Cómo usar: Conversor de códigos de color
- Pulsa Elegir color para seleccionar el color que quieras, o pega un valor HEX, RGB o HSL en el campo Código de color.
- En la tabla aparecen los valores HEX, RGB, HSL, HSV y CMYK; usa el botón Copiar para llevarte el que necesites.
- En el apartado de contraste, comprueba si se lee mejor el texto blanco o el texto negro sobre ese color.
- En las paletas de abajo, haz clic en cualquier tono más claro u oscuro de la misma gama para seleccionarlo al momento.
Cómo convertir HEX a RGB
Un código HEX #RRGGBB indica los valores de rojo, verde y azul, cada uno con dos dígitos hexadecimales (de 00 a FF, es decir, de 0 a 255 en decimal). Si separas el código en parejas de dígitos y pasas cada una a decimal, obtienes el valor RGB.
#FF8800 → FF = 255, 88 = 136, 00 = 0 → rgb(255, 136, 0)
Para pasar de RGB a HEX se hace lo contrario: cada valor se convierte a dos dígitos hexadecimales y se escriben seguidos. Como 37 → 25, 99 → 63 y 235 → EB, el color rgb(37, 99, 235) equivale a #2563EB. Un HEX de 3 dígitos (#F80) es lo mismo que repetir cada dígito: #FF8800. Si quieres practicar con números hexadecimales, usa el conversor de bases numéricas.
¿En qué se diferencian HSL, HSV y CMYK?
| Formato | Componentes | Uso habitual |
|---|---|---|
| RGB / HEX | Intensidad de los tres colores primarios de la luz (0–255) | Web y diseño para pantalla |
| HSL | Tono (0–360°), saturación y luminosidad | CSS, cuando solo quieres ajustar lo claro u oscuro |
| HSV (HSB) | Tono, saturación y valor (brillo) | Selectores de color de programas gráficos como Photoshop |
| CMYK | Proporción de las cuatro tintas (cian, magenta, amarillo y negro) | Impresión |
Los valores CMYK son una aproximación calculada a partir del RGB con una fórmula. El color impreso real depende del papel y del perfil de color de la impresora, así que para trabajos importantes consulta las especificaciones de color de tu imprenta.
La regla de contraste 4.5:1 y cómo elegir el color del texto
Las pautas de accesibilidad web (WCAG 2.1) recomiendan un contraste mínimo de 4.5:1 (nivel AA) entre el texto normal y el fondo, y de 3:1 para texto grande (unos 24 px o más, o 18.66 px o más en negrita). Con 7:1 o más se cumple el nivel AAA, que es más estricto.
El contraste se calcula con la luminancia relativa L de los dos colores: (L más clara + 0.05) ÷ (L más oscura + 0.05). El máximo posible es 21:1, el contraste entre blanco y negro. Al decidir el color de un botón o un banner, elige el color de texto que aparezca marcado con AA en el resultado y será cómodo de leer para la mayoría de las personas.
Además de ser una buena práctica, la accesibilidad web es un requisito legal para muchos sitios del sector público en España y en varios países de Latinoamérica, y cada vez más empresas la exigen en sus proyectos.
Cómo usar los códigos de color en CSS
Puedes pegar los valores convertidos tal cual en tu CSS. Los tres formatos siguientes representan exactamente el mismo color:
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
Si necesitas un color semitransparente, añade la opacidad después de una barra, como en rgb(37 99 235 / 50%), o agrega dos dígitos al final del HEX, como en #2563EB80 (80 equivale a una opacidad de alrededor del 50 %).