Cómo leer un código de color HEX de seis dígitos

Empieza separando #RRGGBB en tres parejas

Ignora por un momento la almohadilla y agrupa los seis dígitos de izquierda a derecha: RR, GG y BB. La primera pareja controla el canal rojo de sRGB, la segunda el verde y la tercera el azul. Cada pareja es un byte, por lo que su valor decimal va de 0 a 255.

#4F46E5
  4F  → red
  46  → green
  E5  → blue

Cómo leer una pareja hexadecimal

El sistema hexadecimal utiliza dieciséis símbolos en vez de diez. Los dígitos del 0 al 9 conservan sus valores habituales; después, A, B, C, D, E y F representan del 10 al 15. El uso de mayúsculas o minúsculas no cambia nada: ff, Ff y FF significan el mismo número.

• El dígito de la izquierda cuenta grupos de dieciséis.
• El dígito de la derecha cuenta unidades individuales.
• Multiplica el valor de la izquierda por 16 y suma el valor de la derecha.
• 00 es 0; FF es 15 × 16 + 15, que equivale a 255.

4F = 4 × 16 + 15 = 79
46 = 4 × 16 + 6  = 70
E5 = 14 × 16 + 5 = 229

Descifra #4F46E5 de principio a fin

Aplica el cálculo de parejas tres veces. El rojo es 4F, es decir, 79. El verde es 46, o 70. El azul es E5, o 229. Por tanto, el mismo color CSS puede escribirse como rgb(79 70 229). El canal azul es mucho mayor que los otros dos, lo que ayuda a explicar la orientación azul violácea de este color concreto.

.sample {
  color: #4F46E5;
  background-color: rgb(79 70 229);
}

El tamaño de los canales aporta información útil, pero no describe por completo la apariencia. Los valores sRGB están codificados y no son medidas de luz lineal, las pantallas varían, los colores circundantes modifican la percepción y el brillo percibido no equivale a la media aritmética de R, G y B.

Reconoce patrones útiles sin hacer todos los cálculos

Varios patrones de canal pueden leerse de un vistazo. Una pareja cercana a 00 aporta poco de ese canal; una cercana a FF aporta mucho. Parejas iguales de rojo, verde y azul producen un gris sRGB acromático. Dos canales altos y uno bajo suelen apuntar hacia una dirección secundaria conocida, aunque la apariencia exacta sigue dependiendo de los tres valores.

• #000000 tiene todos los canales en 0 y representa el negro.
• #FFFFFF tiene todos los canales en 255 y representa el blanco.
• #808080 tiene tres canales iguales y representa un gris de código medio.
• #FF0000, #00FF00 y #0000FF maximizan un canal sRGB.
• #FFFF00 combina el máximo de rojo y verde sin azul.

Cuándo es exacta la abreviatura de tres dígitos

CSS también acepta HEX de tres dígitos. No completa un dígito ausente con cero. En su lugar, duplica cada dígito: #4AE se expande como #44AAEE. La abreviatura solo es exacta cuando todas las parejas del valor de seis dígitos contienen dos dígitos idénticos.

• #FFFFFF puede convertirse en #FFF.
• #00FF00 puede convertirse en #0F0.
• #44AAEE puede convertirse en #4AE.
• #4F46E5 no puede abreviarse porque 4F, 46 y E5 no son parejas repetidas.

Tres dígitos pueden expresar 16 × 16 × 16, es decir, 4096 colores. Seis dígitos pueden expresar 256 × 256 × 256, es decir, 16 777 216 combinaciones de canales. La forma abreviada es, por tanto, una escritura compacta para un subconjunto, no una versión redondeada de todos los colores.

Cómo leer HEX de ocho dígitos y su pareja alfa

Un valor HEX de CSS con ocho dígitos utiliza #RRGGBBAA. Los primeros seis se leen exactamente como antes; la pareja AA final controla el alfa. 00 es totalmente transparente y FF, totalmente opaco. Por ejemplo, 80 es 128 de 255, aproximadamente un 50,2% de alfa.

.overlay {
  /* Same sRGB channels, about 50% alpha */
  background: #4F46E580;
  background: rgb(79 70 229 / 50.2%);
}

Lista fiable para inspeccionar un valor

• Confirma que el valor comienza por # y contiene exactamente 3, 4, 6 u 8 dígitos hexadecimales para CSS.
• Si tiene seis dígitos, sepáralo como RR, GG y BB antes de convertir nada.
• Convierte una pareja con izquierda × 16 + derecha; recuerda que de A a F significan de 10 a 15.
• Considera el uso de mayúsculas y minúsculas como una cuestión de formato.
• Expande una abreviatura duplicando cada dígito, nunca añadiendo ceros.
• Para ocho dígitos, lee la última pareja como alfa después de RGB.
• Usa la luminancia y el contraste calculados en vez de deducir la accesibilidad del tamaño de los canales.

Color Atlas realiza estas conversiones de forma determinista a partir del valor HEX canónico revisado. Una página de color permite comprobar RGB, HSL, HWB, variantes alfa, luminancia relativa, contraste y valores relacionados sin sustituir el código fuente por prosa generada.