Conversor de colores
Convierte un color entre HEX, RGB, HSL y HSV, con su contraste frente al negro y al blanco.
Se ejecuta enteramente en tu navegador. No se sube, registra ni guarda nada.
Hexadecimal
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Luminancia relativa
- 0,2830
- Contraste sobre blanco
- 3,15:1
- Contraste sobre negro
- 6,66:1
HEX, RGB, HSL y HSV son cuatro formas de escribir el mismo color sRGB. Cuál resulta cómoda depende de lo que estés haciendo: hexadecimal para copiar un valor de un diseño, HSL para aclarar algo un poco sin cambiar el tono.
Cómo funciona
La entrada se lee en canales de rojo, verde y azul de ocho bits más un alfa, y todas las salidas se calculan a partir de esos canales. No se convierte nada a partir de otra salida, así que un valor no puede irse desviando por una cadena de redondeos.
Las cifras de contraste siguen la WCAG 2.1: cada canal se lineariza, se pondera según cuánto aporta al ojo, y la razón es (el más claro + 0,05) dividido entre (el más oscuro + 0,05). La escala va de 1 para dos colores idénticos a 21 para negro sobre blanco.
Ejemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Un valor hexadecimal de un archivo de diseño | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| La forma corta, que repite cada dígito | #39d | #3399DD, not #039D |
| Con transparencia | rgb(52 152 219 / 0.5) | #3498DB80 |
Preguntas frecuentes
¿Un contraste de 4,5 significa que mi texto cumple?
Depende del texto, que es por lo que se da el número y no un veredicto. La WCAG pide 4,5 para el texto normal y 3 para el texto grande, donde grande significa al menos 18 puntos, o 14 puntos en negrita. Una herramienta que solo ve dos colores no puede saber qué regla se aplica.
¿Por qué al convertir a HSL y volver a veces cambia un dígito?
Porque el hexadecimal tiene 256 pasos por canal y HSL no se divide de forma exacta entre ellos. La ida y vuelta puede caer a un paso de distancia. Aquí todas las notaciones se calculan a partir de los canales originales, así que los valores que se muestran son siempre los más cercanos a lo que has escrito.
¿Qué diferencia hay entre HSL y HSV?
Comparten el tono y no se ponen de acuerdo en lo demás. En HSL, una luminosidad del 100 % es blanco y el 50 % es el color puro. En HSV, un valor del 100 % es el color puro y el blanco solo aparece cuando la saturación baja a cero. Las herramientas de diseño suelen mostrar HSV; CSS habla HSL.
¿Se admiten los colores con nombre como «rebeccapurple»?
No. La lista de palabras clave de CSS es una tabla de unos 150 nombres que pertenece a la especificación y no a la aritmética, y esta herramienta convierte entre notaciones en lugar de buscar nombres.
Conviene saber
- Todo aquí es sRGB, el espacio que la web ha dado por supuesto siempre. Los espacios más amplios que añade CSS Color 4 —lab, oklch, display-p3— describen colores que sRGB no alcanza, y convertir a ellos necesita una decisión sobre qué hacer con los que quedan fuera. Esa decisión no se toma aquí.
- Las cifras de contraste son números, no veredictos. Que una pareja cumpla depende del tamaño y del grosor del texto, que un color por sí solo no conoce.
Fuentes
Todas las herramientas de Código