Conversor de Colores

Acerca de Conversor de Colores

Pega un color en HEX, RGB o HSL y la herramienta detecta el formato y muestra los tres. Acepta la forma corta de tres dígitos (#fff), la sintaxis CSS moderna separada por espacios rgb(255 0 0) e incluso unos números sueltos como 255, 128, 0. Los valores con canal alfa (#rrggbbaa) se aceptan, pero el alfa se descarta y solo se convierte el color.

Los tres formatos describen el mismo espacio sRGB. HEX y RGB contienen exactamente la misma información; HSL reorganiza ese RGB en un ángulo del círculo cromático, una saturación y una luminosidad. Las cuentas son sencillas. Lo que suele fallar en diseño es que la luminosidad de HSL no es el brillo que percibimos.

El 50 % de luminosidad en HSL no es el mismo brillo

El amarillo #ffff00 es hsl(60, 100%, 50%) y el azul #0000ff es hsl(240, 100%, 50%). Misma L, pero en pantalla el amarillo deslumbra y el azul se ve oscuro. La L de HSL es solo la media del canal mayor y el menor, así que ignora que la vista humana es muy sensible al verde y poco al azul.

La luminancia relativa que usan las WCAG para calcular el contraste pondera R, G y B linealizados con 0,2126, 0,7152 y 0,0722. Con esa medida, el amarillo da unos 0,93 y el azul unos 0,07. Si creas una serie de colores de botón manteniendo L fija y girando el tono, el texto blanco será legible en unos y no en otros justamente por esto.

En qué se diferencian HSV y OKLCH

Esta herramienta trabaja solo con HEX, RGB y HSL. HSV (o HSB), habitual en los selectores de color de los programas gráficos, comparte el ángulo de tono con HSL, pero define el brillo como el valor del canal mayor. Por eso el rojo puro es L 50 % en HSL y V 100 % en HSV. La saturación también se calcula distinto en cada modelo.

OKLCH es la forma cilíndrica (luminosidad L, croma C, tono H) de Oklab, un espacio de color publicado por Björn Ottosson en 2020 e incorporado a CSS Color Level 4 como la función oklch(). Su L está diseñada para seguir la luminosidad percibida: el amarillo sale cerca del 97 % y el azul cerca del 45 %. Si fijas L y giras H, los colores mantienen un brillo parecido, que es justo lo que HSL no consigue. Esta herramienta no convierte a OKLCH.

La gama sRGB y lo que HEX no puede expresar

Los valores HEX y rgb() de 0 a 255 solo describen colores dentro de sRGB (IEC 61966-2-1). Muchos móviles y portátiles actuales muestran la gama más amplia Display P3, y los verdes y rojos más saturados de esa gama no tienen equivalente en HEX. En CSS hay que usar color(display-p3 …) u oklch().

Cada canal tiene 8 bits, es decir, 256 pasos. Si HSL se redondeara a enteros, HEX → HSL → HEX no siempre devolvería el valor original, así que la herramienta muestra HSL con un decimal. Comprobado con los 16,7 millones de colores sRGB, un decimal basta para que todos vuelvan al mismo HEX. Un HSL escrito con enteros en otro sitio ya viene redondeado y puede desviar un canal una unidad.

Para qué sigue sirviendo HSL

HSL es cómodo para ajustes rápidos: bajar S lleva hacia el gris y subir L hacia el blanco. Funciona bien para estados hover o variantes de un mismo tono. No es la herramienta adecuada para una paleta de varios tonos con contraste homogéneo; ahí conviene comprobar el contraste directamente o trabajar en OKLCH.

Ejemplos

Cómo se usa

1. Pega un valor HEX, rgb() o hsl() tal como lo tengas.
2. Revisa los tres valores convertidos y la muestra de color.
3. Copia el formato que necesites.

Preguntas frecuentes

Guías relacionadas

• Contraste de color y accesibilidad: el origen de la fórmula WCAG, sus límites y la ley