Conversor HEX ↔ RGB ↔ HSL

HEX (#RRGGBB) is the most compact color format for web design. Each pair of hexadecimal digits (00-FF) represents the intensity of red, green, and blue, respectively. The value 00 means the channel is off (black), and FF means it's at full intensity. For example, #FF0000 is pure red, #00FF00 is pure green, and #FFFFFF is white. HEX is the standard format in CSS, HTML, and design tools because it's short, unambiguous, and easy to copy-paste. Shorthand notation (#RGB) exists for colors where each pair is identical, like #F00 for red.

RGB uses decimal values (0-255) for the same three channels. It's the format that display hardware natively understands -- each pixel on an LCD or OLED screen has red, green, and blue subpixels that can be set to 256 brightness levels. RGB is also used in JavaScript's canvas API (ctx.fillStyle = 'rgb(255, 0, 0)') and in image processing libraries. RGBA adds an alpha channel (0-1 or 0-255) for transparency.

HSL (Hue, Saturation, Lightness) describes colors in a way that's more intuitive for humans. Hue is the color itself, measured as an angle on the color wheel (0掳=red, 120掳=green, 240掳=blue). Saturation is how vivid the color is (0%=gray, 100%=fully colored). Lightness is how dark or light (0%=black, 50%=normal, 100%=white). HSL makes it easy to create tints (increase lightness), shades (decrease lightness), and tones (decrease saturation) of a base color. HSV (Hue, Saturation, Value) is similar but uses Value instead of Lightness -- Value=100% means the color at full brightness, while Lightness=100% means white.

Use HEX for CSS and HTML -- it's the most widely supported format and the shortest to write. Use RGB when you need to programmatically manipulate color channels (e.g., mixing two colors by averaging their RGB values) or when you need alpha transparency (rgba()). Use HSL when you need to create color variations -- for example, generating a button's hover state by increasing lightness by 10%, or creating a monochromatic color scheme by keeping hue constant and varying saturation and lightness.

HSL is particularly powerful in CSS custom properties (CSS variables). You can define -- hue: 210 and then use hsl(var(-- hue), 70%, 50%) throughout your stylesheet. Changing a single variable updates the entire color scheme -- impossible with HEX or RGB without recalculating every value. This is why modern CSS frameworks like Tailwind v4 are moving toward HSL-based color systems.