Hexadecimal, RGB y HSL
Escribe el color en la notación que tengas y las demás se completan. Los tres campos se mantienen sincronizados.
Cómo se ve
Texto sobre blanco · 3,89
Texto sobre negro · 5,39
- Hexadecimal#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Canales
- Rojo224
- Verde82
- Azul31
- Tono16°
- Saturación76 %
- Luminosidad50 %
Escala de luminosidad
El mismo tono y la misma saturación, con luminosidad del 10 al 90 %. Pulsa una muestra para elegirla.
Cómo funciona
El hexadecimal es lo mismo que RGB, escrito en base hexadecimal. Cada par de caracteres es un canal, de 00 a ff, es decir, de 0 a 255.
La forma corta de tres caracteres duplica cada carácter. #f30 significa #ff3300, por eso solo 4096 de los 16,7 millones de colores se pueden escribir así.
HSL describe los mismos colores por tono, saturación y luminosidad en lugar de tres fuentes de luz. El tono es un ángulo en la rueda de colores, en la que 0 es rojo, 120 verde y 240 azul.
HSL es más cómodo cuando quieres variantes de un color. Mantén el tono y la saturación, cambia solo la luminosidad y obtendrás una escala coherente.
La conversión entre RGB y HSL es exacta en los dos sentidos, pero redondear HSL a grados y porcentajes enteros puede mover un canal un paso al ir y volver.
Cómo convierte la herramienta
De RGB a HSL, cada canal se divide primero entre 255. La luminosidad L es la media del canal mayor y el menor. La saturación S es la diferencia entre ellos dividida entre 1 − |2L − 1|. El tono H depende de qué canal es el mayor y se da en grados. En sentido contrario se usa la misma rueda de colores de seis sectores, y los canales se redondean a números enteros. Las filas muestran números enteros, y la escala de abajo se calcula con los valores sin redondear.
Ejemplo
#1e90ff es rojo 30, verde 144 y azul 255, es decir, 0,118, 0,565 y 1. El mayor es 1 y el menor 0,118, así que L = (1 + 0,118) / 2 = 0,559, o 55,9 %. La diferencia, 0,882, dividida entre 1 − |2 × 0,559 − 1| = 0,882 da S = 1, o 100 %. El azul es el mayor, así que H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 grados.
La herramienta escribe el color como hsl(210, 100%, 56%). Si escribes ese texto, vuelves a #1f8fff, no a #1e90ff, porque el redondeo a grados y porcentajes enteros ha movido el rojo y el verde un paso cada uno.
La luminosidad HSL no es la luminosidad percibida
CSS Color 4 señala que el amarillo y el azul tienen los dos una luminosidad HSL del 50 %, y sin embargo el amarillo parece mucho más claro. Las cifras de contraste de la propia herramienta lo confirman: el amarillo puro, #ffff00, da una relación de 1,07 frente al blanco, y el azul puro, #0000ff, de 8,59. La escala bajo el color mantiene el tono y la saturación y solo cambia la luminosidad, en pasos de 10 puntos porcentuales. El tono es coherente, pero los pasos no parecen iguales.
Lo que lee la herramienta
Los campos siguen CSS Color 4: hexadecimal de tres, cuatro, seis u ocho caracteres, rgb() con números o porcentajes, donde el 100 % es 255, y hsl() con el tono en grados o en las unidades deg, rad, grad y turn.
La transparencia, en hexadecimal de cuatro u ocho caracteres, como cuarto valor o tras una barra, se descarta: la herramienta trabaja con colores opacos e indica cuánta había. Los valores fuera de su intervalo, como rgb(300, 0, 0), se rechazan para que se note un error al escribir, aunque CSS los ajustaría al límite.