¿Qué es un código hex?

Más allá de HTML y CSS, los códigos hex también se usan en SVG y en la mayoría de las herramientas de diseño, y suelen formar parte de las guías de estilo de marca. En lugar de buscar un color por su nombre, escribes su código: #28efcb, por ejemplo, es un cian brillante.

¿Cómo se lee un código hex?

En su forma estándar, un código hex es un signo de número (#) seguido de seis dígitos hexadecimales que se leen en tres pares. El primer par fija el canal rojo; el segundo, el verde; y el tercero, el azul. Cada par va de 00 (nada) a FF (intensidad máxima), es decir, de 0 a 255 en decimal. Tres canales de 256 niveles suman 24 bits: 16,777,216 colores posibles.

Tomemos #28efcb. El par rojo es 28 (40 en decimal), el verde es ef (239) y el azul es cb (203). Mucho verde y mucho azul con muy poco rojo: por eso es cian. Para usarlo en una hoja de estilo escribirías color: #28efcb;.

Seis dígitos no es la única longitud válida. CSS también acepta una forma corta de 3 dígitos (#RGB) y dos formas que incluyen transparencia: #RGBA de 4 dígitos y #RRGGBBAA de 8, donde el último dígito o par fija el canal alfa. La referencia de hex-color de MDN (en inglés) documenta las cuatro formas, definidas en la especificación CSS Color Module Level 4.

¿Por qué los códigos hex llevan letras?

El hexadecimal es un sistema numérico de base 16, así que cada dígito tiene 16 valores posibles: los números del 0 al 9 representan del cero al nueve, y las letras de la A a la F representan del 10 al 15. Así es como un par de dos dígitos llega a 255: FF significa 15 × 16 + 15.

El hexadecimal también se corresponde de manera exacta con el binario. Cada dígito hex equivale a 4 bits, así que dos dígitos hex representan 1 byte: el rango de 0 a 255 de un canal de color. Un byte para el rojo, otro para el verde y otro para el azul: por eso un código hex de 6 dígitos codifica un color completo de 24 bits.

¿Qué diferencia hay entre un código hex y un valor RGB?

Un código hex y un valor RGB son dos maneras de escribir el mismo color: #8411aa y rgb(132 17 170) se ven idénticos en pantalla. Las diferencias prácticas:

• El hex es compacto: seis dígitos después del # nombran un color exacto, y es la convención en las guías de marca y en la mayor parte del CSS.
• rgb() usa valores decimales de 0 a 255, más fáciles de ajustar a ojo. El CSS moderno agrega la transparencia después de una barra diagonal, como en rgb(132 17 170 / 50%); la forma anterior, rgba(132, 17, 170, 0.5), sigue funcionando como alias, aunque MDN recomienda usar rgb() a secas.

Usa hex para los colores sólidos de tu marca. Cuando un color necesite transparencia, usa un código hex de 8 dígitos o dale un valor alfa a rgb().

¿Cómo encontrar el código hex de un color?

Usa un selector de color. Las herramientas de desarrollo de tu navegador, las apps de diseño como Figma y Photoshop, y los selectores gratuitos en línea te muestran el valor hex de cualquier color que elijas. Si el proyecto tiene una guía de estilo de marca, revísala primero: los colores aprobados ya deberían aparecer ahí como códigos hex. ¿Todavía no eliges tu paleta? Nuestra guía para elegir un esquema de color para tu sitio web te acompaña paso a paso.