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 el promedio del canal más grande y el más chico. La saturación S es la diferencia entre ellos dividida entre 1 − |2L − 1|. El tono H depende de qué canal es el más grande y se da en grados. En el otro sentido se usa la misma rueda de colores de seis sectores, y los canales se redondean a números enteros.
Ejemplo paso a paso
#1e90ff es rojo 30, verde 144 y azul 255, es decir, 0.118, 0.565 y 1. El más grande es 1 y el más chico 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 más grande, 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, obtienes #1f8fff y no #1e90ff, porque redondear a grados y porcentajes enteros movió el rojo y el verde un paso cada uno.
La luminosidad de HSL no es la que se percibe
CSS Color 4 señala que el amarillo y el azul tienen los dos una luminosidad HSL del 50 %, pero el amarillo se ve mucho más claro. Las cifras de contraste de la propia herramienta muestran lo mismo: hsl(60, 100%, 50%) da una relación de 1.07 contra el blanco y hsl(240, 100%, 50%) da 8.59. La escala de abajo conserva el tono y la saturación y solo cambia la luminosidad, en pasos de 10 puntos porcentuales. Los tonos combinan, pero los pasos no se ven iguales.
Lo que lee la herramienta
Los campos siguen CSS Color 4: hexadecimal con 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. Así, rgb(50%, 50%, 50%) se convierte en rgb(128, 128, 128), y hsl(0.5turn, 100%, 50%) recibe el tono de 180 grados, que es #00ffff.
La transparencia, en hexadecimal de cuatro u ocho caracteres, como cuarto valor o después de una barra, se descarta: la herramienta trabaja con colores opacos y dice cuánta había. Los valores fuera de su rango, como rgb(300, 0, 0), se rechazan para que se note un error de tecleo, aunque CSS los ajusta al límite.