Los códigos de color son el idioma que usan navegadores, editores gráficos y programadores para decirle a una máquina qué color mostrar. Los tres formatos más usados —HEX, RGB y HSL— representan exactamente el mismo color de tres formas distintas. Aprender a leerlos te abrirá la puerta del diseño y del CSS.
El modelo de color: luz mezclada
Todos estos formatos se basan en el modelo RGB (rojo, verde, azul): una pantalla crea cada color mezclando esas tres luces. Combinando los tres a máxima intensidad obtienes blanco; apagándolos por completo, negro.
Formato HEX: el favorito de los desarrolladores
El código HEX se escribe con una almohadilla y seis dígitos:
#RRGGBB
- RR = componente rojo
- GG = componente verde
- BB = componente azul
Cada par usa hexadecimal (0-9 y A-F), donde FF = 255 y 00 = 0:
| Color | HEX | Significado |
|---|---|---|
| Rojo puro | #FF0000 | Máximo rojo, sin verde ni azul |
| Verde puro | #00FF00 | Máximo verde |
| Azul puro | #0000FF | Máximo azul |
| Blanco | #FFFFFF | Los tres al máximo |
| Negro | #000000 | Los tres a cero |
| Gris medio | #808080 | Los tres a 128 |
Truco: los códigos con pares repetidos (#AABBCC → #ABC) se pueden abreviar a tres dígitos en CSS.
Formato RGB: valores de 0 a 255
El formato RGB usa la misma mezcla, pero en decimal:
rgb(rojo, verde, azul) con cada canal entre 0 y 255
Ejemplos:
rgb(255, 0, 0)→ rojorgb(52, 152, 219)→ un azul mediorgb(255, 255, 255)→ blanco
Existe también rgba(), que añade un canal de transparencia (opacidad) de 0 a 1.
Cómo pasar de HEX a RGB: convierte cada par hexadecimal a decimal. #3366CC → 33=51, 66=102, CC=204 → rgb(51, 102, 204).
Formato HSL: el más intuitivo para crear paletas
HSL describe el color de forma mucho más natural, muy usada en CSS moderno:
hsl(matiz, saturación%, luminosidad%)
- Matiz (h): un ángulo de 0 a 360° sobre el círculo cromático. 0° rojo, 60° amarillo, 120° verde, 240° azul.
- Saturación (s): intensidad del color, de 0 % (gris) a 100 % (color puro).
- Luminosidad (l): claridad, de 0 % (negro) a 100 % (blanco), con 50 % como valor “normal”.
| Color | HSL |
|---|---|
| Rojo | hsl(0, 100%, 50%) |
| Verde | hsl(120, 100%, 50%) |
| Azul | hsl(240, 100%, 50%) |
| Gris | hsl(0, 0%, 50%) |
La ventaja clave: cambiar solo la luminosidad (hsl(210, 100%, 40%) vs hsl(210, 100%, 80%)) te da automáticamente las variantes más claras y oscuras de un mismo color. Perfecto para botones con hover.
Tabla rápida de conversión
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| #3498DB | rgb(52, 152, 219) | hsl(204, 70%, 53%) |
Cuándo usar cada formato
- HEX: stándar en diseño web y herramientas de diseño; el más compacto para copiar y pegar.
- RGB/RGBA: útil cuando necesitas transparencia o valores en código.
- HSL: la mejor opción para generar paletas y variaciones de un color de forma lógica.
Convierte colores al instante
Nuestro conversor de colores online convierte HEX ↔ RGB ↔ HSL al momento: pega un color, usa el selector o escribe el formato, y verás las tres representaciones junto con la muestra del color real. Ideal para trabajar con CSS sin hacer cuentas mentales.
Conclusión
Ya sea que diseñes una web, configures una hoja de estilo o simplemente quieras duplicar un color exacto de una imagen, entender HEX, RGB y HSL te da el control total sobre el color. Los tres describen lo mismo; conocer sus diferencias te permite elegir la herramienta adecuada en cada caso.
Color codes are the language that browsers, graphics editors and programmers use to tell a machine which color to show. The three most used formats —HEX, RGB and HSL— represent exactly the same color in three different ways. Learning to read them opens the door to design and CSS.
The color model: mixed light
All these formats are based on the RGB model (red, green, blue): a screen creates each color by mixing those three lights. Combining all three at maximum intensity gives white; turning them all off, black.
HEX format: the developers’ favourite
The HEX code is written with a hash and six digits:
#RRGGBB
- RR = red component
- GG = green component
- BB = blue component
Each pair uses hexadecimal (0–9 and A–F), where FF = 255 and 00 = 0:
| Color | HEX | Meaning |
|---|---|---|
| Pure red | #FF0000 | Maximum red, no green or blue |
| Pure green | #00FF00 | Maximum green |
| Pure blue | #0000FF | Maximum blue |
| White | #FFFFFF | All three at maximum |
| Black | #000000 | All three at zero |
| Medium gray | #808080 | All three at 128 |
Trick: codes with repeated pairs (#AABBCC → #ABC) can be abbreviated to three digits in CSS.
RGB format: values from 0 to 255
The RGB format uses the same mix, but in decimal:
rgb(red, green, blue) with each channel between 0 and 255
Examples:
rgb(255, 0, 0)→ redrgb(52, 152, 219)→ a medium bluergb(255, 255, 255)→ white
There is also rgba(), which adds a transparency (opacity) channel from 0 to 1.
How to go from HEX to RGB: convert each hexadecimal pair to decimal. #3366CC → 33=51, 66=102, CC=204 → rgb(51, 102, 204).
HSL format: the most intuitive for building palettes
HSL describes color in a much more natural way, widely used in modern CSS:
hsl(hue, saturation%, lightness%)
- Hue (h): an angle from 0 to 360° on the color wheel. 0° red, 60° yellow, 120° green, 240° blue.
- Saturation (s): color intensity, from 0% (gray) to 100% (pure color).
- Lightness (l): brightness, from 0% (black) to 100% (white), with 50% as the “normal” value.
| Color | HSL |
|---|---|
| Red | hsl(0, 100%, 50%) |
| Green | hsl(120, 100%, 50%) |
| Blue | hsl(240, 100%, 50%) |
| Gray | hsl(0, 0%, 50%) |
The key advantage: changing just the lightness (hsl(210, 100%, 40%) vs hsl(210, 100%, 80%)) automatically gives you lighter and darker variants of the same color. Perfect for hover buttons.
Quick conversion table
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| #3498DB | rgb(52, 152, 219) | hsl(204, 70%, 53%) |
When to use each format
- HEX: standard in web design and design tools; the most compact for copy-paste.
- RGB/RGBA: useful when you need transparency or values in code.
- HSL: the best choice for generating palettes and variations of a color logically.
Convert colors instantly
Our online color converter converts HEX ↔ RGB ↔ HSL on the fly: paste a color, use the picker or type the format, and see all three representations along with the real color swatch. Ideal for working with CSS without doing mental math.
Conclusion
Whether you are designing a website, configuring a stylesheet or simply want to duplicate an exact color from an image, understanding HEX, RGB and HSL gives you total control over color. All three describe the same thing; knowing their differences lets you choose the right tool for each case.