HEX, RGB o HSL: cómo escribir un color en CSS
Un mismo color en cinco formatos, qué dice cada uno, cuál conviene para tus ajustes y cuándo el contraste del texto queda por debajo de lo recomendado.
HEX, RGB y HSL describen el mismo color de formas distintas: HEX y RGB indican cuánto rojo, verde y azul lleva, y HSL lo describe por tono, saturación y luminosidad. Con el conversor de color escribes un color en cualquier formato de CSS y obtienes todos los demás, además de su contraste con blanco y negro, en tu navegador. Lo que importa al elegir es qué quieres hacer con el color: copiarlo tal cual, ajustarlo o comprobar que el texto se lea.
Un mismo color en cinco formatos
Tomemos el azul #3b82f6. Esta es la salida real del conversor:
| Formato | Valor |
|---|---|
| HEX | #3b82f6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217.22, 91.22%, 59.8%) |
| OKLCH | oklch(0.623 0.188 259.8) |
| CMYK | Se muestra también, para quien lo necesita en impresión |
El conversor además indica el nombre de Tailwind más cercano, marcado como aproximado, y genera paletas: análoga, complementaria, triádica y monocromática.
¿Cómo se lee cada formato?
- HEX
#3b82f6: tres pares de dígitos hexadecimales, que son el rojo (3b), el verde (82) y el azul (f6). Cada par va de 00 a ff, o de 0 a 255. Es el más compacto y el más usado en diseño. - RGB
rgb(59, 130, 246): los mismos tres valores, en decimal. Es lo mismo que HEX, pero más fácil de leer. - HSL
hsl(217, 91%, 60%): tono (un ángulo de 0 a 360 en la rueda de color), saturación y luminosidad. Es el más cómodo para ajustar: para un azul más claro, sube la luminosidad; para uno más apagado, baja la saturación. - OKLCH: tono, croma y luminosidad en un espacio pensado para que los cambios se perciban de forma pareja. Lo define CSS Color Level 4; comprueba el soporte de los navegadores que debes atender.
¿Cuál usar en CSS?
Todos valen y el navegador los entiende. La elección es de comodidad:
- Para copiar un color de una guía de marca, HEX.
- Para variar un color (más claro, más oscuro, con transparencia), HSL, porque cada ajuste cambia un solo número.
- Para sistemas de diseño con escalas de color, OKLCH reparte mejor la luminosidad percibida entre tonos distintos.
- Para impresión, CMYK, aunque no existe como valor nativo para pantalla en CSS.
Cómo usar el conversor paso a paso
- Abre el conversor de color.
- Escribe un color en cualquier formato de CSS: HEX,
rgb(),hsl(),oklch()o un nombre comored, o elígelo con el selector. - Copia el formato que necesitas. Si el valor no se reconoce, la herramienta lo indica.
- Mira el contraste y las paletas generadas.
Cómo ajustar un color sin salirte de la paleta
Si necesitas una versión más clara u oscura de un color de marca, pásalo a HSL y toca solo la luminosidad: el tono y la saturación se quedan, y el color sigue siendo reconocible. Con el azul de ejemplo, subir la luminosidad de 60 % a 90 % da un azul pálido apto para fondos, y bajarla a 30 % da uno oscuro apto para texto sobre fondo claro. Después copia el resultado en HEX si tu sistema lo pide. Las paletas que genera el conversor (análoga, complementaria, triádica y monocromática) parten del mismo principio: giran el tono o cambian la luminosidad en el espacio OKLCH.
Contraste: el dato que más se olvida
El contraste entre el texto y el fondo decide si se lee. Las pautas WCAG recomiendan al menos 4,5 a 1 para texto normal y 3 a 1 para texto grande, según el criterio de contraste mínimo de W3C. El conversor calcula el contraste del color frente a blanco y a negro. Para nuestro azul, da 3,68 con texto blanco y 5,71 con texto negro. Es decir, un botón con ese azul y letras blancas queda por debajo de 4,5 para texto normal, y pasa solo si el texto es grande. Mira la cifra antes de fijar el color.
Otra muestra, el ámbar #f59e0b, da 2,15 frente al blanco y 9,78 frente al negro: con letras blancas sería difícil de leer, y con letras negras queda muy cómodo.
Un error común
Redondear al convertir. Pasar de HSL a HEX y de vuelta puede dar valores ligeramente distintos, porque HSL admite decimales y HEX no. Si necesitas el color exacto, guarda el original en un solo formato y conviértelo desde ahí. Si tu color sale de una imagen, mira cómo sacar la paleta de colores de una imagen.
Preguntas frecuentes
¿Cuál es la diferencia entre HEX y RGB?
Ninguna en el color: HEX escribe los valores de rojo, verde y azul en hexadecimal y RGB los escribe en decimal. #3b82f6 y rgb(59, 130, 246) son el mismo color.
¿Cómo convierto un HEX a RGB?
Separa el HEX en tres pares y pasa cada uno de hexadecimal a decimal. 3b es 59, 82 es 130 y f6 es 246. O pega el color en el conversor y copia el RGB.
¿Qué es HSL?
Un formato que describe un color por tono (un ángulo de 0 a 360), saturación y luminosidad. Es cómodo para aclarar, oscurecer o apagar un color.
¿Qué es OKLCH?
Un formato basado en un espacio de color pensado para la percepción humana, con luminosidad, croma y tono. Está en CSS Color Level 4.
¿Qué contraste necesita el texto?
Las pautas WCAG recomiendan al menos 4,5 a 1 para texto normal y 3 a 1 para texto grande.
Convierte un color entre formatos
HEX, RGB, HSL, OKLCH y CMYK, con contraste WCAG y paletas. 100% local, gratis y sin registro.
Abrir Conversor de color →Herramientas relacionadas
- Conversor de color: HEX, RGB, HSL, OKLCH y CMYK, con contraste y paletas.
- Paleta desde imagen: extrae los colores principales de una foto.
- Convertir imagen: cambia el formato de una imagen.
- Minificar: reduce CSS, HTML y JS para producción.
También te puede interesar: cuándo usar SVG y cuándo convertirlo a PNG, guía completa del favicon y Pasar de binario a decimal y hexadecimal a mano.