#2a9d8f y rgb(42, 157, 143) son el mismo verde azulado escrito de dos formas. Te enseñamos a leer los códigos a simple vista, a convertir entre HEX, RGB y HSL y a comprobar si un texto cumple el contraste WCAG.
Los códigos de color son la manera de describir un color con números para que lo entiendan el navegador, el editor de diseño y la hoja de estilos. En la web predominan dos: HEX, como #2a9d8f, y RGB, como rgb(42, 157, 143). Ambos indican cuánta luz roja, verde y azul se mezcla, con un valor de 0 a 255 por canal; HEX lo escribe en base 16 y RGB en base 10. HSL describe ese mismo valor como tono, saturación y luminosidad. El píxel que pinta el navegador es idéntico en los tres casos.
El selector de color te muestra a la vez el valor HEX y el RGB del tono que elijas. Si necesitas localizar valores dentro de un CSS minificado, la herramienta para formatear CSS lo vuelve legible línea a línea. Para llevar una hoja existente a Sass, convertir CSS a SCSS anida las reglas (las variables las defines tú después), y convertir SCSS a CSS calcula funciones como darken() o rgba() y devuelve valores finales.
Un código HEX es una almohadilla seguida de tres pares de dígitos hexadecimales: #RRGGBB. El sistema hexadecimal usa del 0 al 9 y de la a a la f (de 10 a 15), así que cada par va de 00, que es 0, a ff, que es 255. Con 256 valores por canal salen 16.777.216 combinaciones posibles.
Fíjate en #2a9d8f. Sus pares son 2a, 9d y 8f: poco rojo y bastante verde y azul en proporciones parecidas, es decir, un verde azulado. Con algo de práctica, la mayoría de valores se leen así, sin convertir nada:
| Código | Qué indica el patrón | Resultado |
|---|---|---|
#ffffff | Los tres canales al máximo | Blanco |
#757575 | Tres pares iguales | Gris medio |
#d62828 | Domina el rojo | Rojo intenso |
#2a9d8f | Verde y azul altos, rojo bajo | Verde azulado |
#f4a261 | Rojo alto, verde medio, azul bajo | Naranja arena |
#264653 | Todo bajo, con algo más de azul | Azul petróleo oscuro |
Cuando los tres canales son iguales, el resultado siempre es un gris. Y si rojo y verde están altos a la vez sale amarillo: la pantalla mezcla luz, no pintura.
Si los dos dígitos de cada par coinciden, el código se puede escribir con tres y el navegador duplica cada uno: #fa0 equivale a #ffaa00 y #333 a #333333. Un valor como #2a9d8f no admite abreviatura, y si lo intentas obtienes otro distinto: #298 se expande a #229988. Las mayúsculas dan igual al navegador, pero elegir una sola forma de escribir facilita buscar y comparar dentro del proyecto.
El nivel 4 del módulo de color de CSS (CSS Color Module Level 4) añadió un cuarto par opcional para el canal alfa: #RRGGBBAA. Con ff el resultado es opaco y con 00, invisible. #2a9d8f80 es el verde azulado a un 50 % aproximado de opacidad, porque 128 entre 255 da 0,5. También existe la versión corta de cuatro dígitos: #fa08 significa #ffaa0088.
RGB escribe los mismos tres canales en decimal. La sintaxis clásica separa con comas y usa rgba() para la transparencia, con un cuarto valor entre 0 y 1; la sintaxis moderna separa con espacios y añade el alfa tras una barra:
background: rgb(42, 157, 143);background: rgba(42, 157, 143, 0.12);background: rgb(42 157 143 / 12%);
Las tres funcionan en los navegadores actuales. Si tu proyecto todavía da soporte a navegadores muy antiguos, quédate con la forma con comas. RGB tiene una ventaja práctica sobre HEX: los cálculos (aclarar, oscurecer, añadir transparencia) se razonan mejor con números decimales.
HSL describe el color como lo haría una persona. El tono es un ángulo en la rueda cromática: 0 es rojo, 120 verde y 240 azul. La saturación mide la viveza, de gris (0 %) a tono puro (100 %). La luminosidad va del negro (0 %) al blanco (100 %), con el tono pleno en el 50 %. Nuestro verde azulado, #2a9d8f, es hsl(173, 58%, 39%).
Su gran ventaja aparece cuando necesitas variantes de una misma base. Si mantienes tono y saturación y mueves solo la luminosidad, los estados normal, hover y pulsado de un botón quedan coherentes entre sí. Las funciones darken() y lighten() de Sass hacen exactamente eso:
$primario: #2a9d8f;.boton:hover { background: darken($primario, 10%); }.aviso { background: rgba($primario, 0.12); }
Al compilarlo obtienes background: #1f756a; para el hover y background: rgba(42, 157, 143, 0.12); para el aviso: la luminosidad baja diez puntos y el tono no se mueve.
Pasar de una notación a otra no pierde información, porque es el mismo valor escrito de otra forma. El selector te da HEX y RGB de una vez; si quieres entender el cálculo, hazlo a mano al menos una vez:
#f4a261 da f4, a2 y 61.f4 = 15 × 16 + 4 = 244; a2 = 10 × 16 + 2 = 162; 61 = 6 × 16 + 1 = 97.rgb(244, 162, 97).a2.hsl(27, 87%, 67%).| Nombre | HEX | RGB | HSL |
|---|---|---|---|
| Verde azulado | #2a9d8f | rgb(42, 157, 143) | hsl(173, 58%, 39%) |
| Naranja arena | #f4a261 | rgb(244, 162, 97) | hsl(27, 87%, 67%) |
| Azul petróleo | #264653 | rgb(38, 70, 83) | hsl(197, 37%, 24%) |
| Rojo intenso | #d62828 | rgb(214, 40, 40) | hsl(0, 69%, 50%) |
Como HSL se redondea a números enteros, ir y volver puede desviarse una unidad. Guarda siempre el valor HEX o RGB como referencia en tus variables de diseño.
Una paleta bonita no sirve si el texto no se lee. Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1 y 2.2) del W3C miden la diferencia entre texto y fondo con una razón que va de 1:1, mismo valor, a 21:1, negro sobre blanco. Los umbrales que conviene memorizar son:
Primero se obtiene la luminancia relativa de cada valor. Cada canal se divide entre 255 y se linealiza: si queda en 0,04045 o menos se divide entre 12,92; si no, se calcula ((valor + 0,055) / 1,055) elevado a 2,4. Algunas versiones antiguas de las pautas usan 0,03928, sin efecto práctico con canales de 8 bits. La luminancia es 0,2126 × R + 0,7152 × G + 0,0722 × B; el verde pesa más porque el ojo es más sensible a él. La razón es (luminancia clara + 0,05) / (luminancia oscura + 0,05).
| Texto | Fondo | Razón | Veredicto |
|---|---|---|---|
| Blanco | #2a9d8f | 3,32:1 | Solo texto grande |
| Blanco | #1f7a6f | 5,16:1 | AA para texto normal |
#264653 | Blanco | 10,08:1 | AAA |
#264653 | #f4a261 | 4,89:1 | AA para texto normal |
| Blanco | #f4a261 | 2,06:1 | No pasa ni en texto grande |
#757575 | Blanco | 4,61:1 | AA para texto normal |
Las dos primeras filas muestran un caso muy común: un botón con el verde de marca y texto blanco se queda corto para texto normal, pero bajar la luminosidad unos puntos (#1f7a6f) lo resuelve sin cambiar la identidad visual. Con el naranja arena pasa lo contrario: el texto blanco no funciona y el azul petróleo, sí.
Los componentes inactivos y los elementos puramente decorativos están exentos del mínimo, pero esa excepción nunca cubre el texto que hay que leer.
--primario: #2a9d8f;) o como variable de Sass.rgba($primario, 0.12), en lugar de inventar tonos casi iguales.Cuando un proyecto crece sin estas reglas, el mismo azul acaba escrito de cinco maneras distintas y nadie sabe cuál es el oficial. Una variable bien nombrada ahorra esa discusión.
Sí. Los dos guardan 8 bits por canal y solo cambia la base numérica. #d62828 y rgb(214, 40, 40) pintan exactamente el mismo píxel.
Ambos funcionan. El HEX de ocho dígitos es más corto, pero el alfa en hexadecimal cuesta leerlo; rgb(42 157 143 / 12%) se entiende a la primera.
El código describe un valor en el espacio sRGB. La calibración, el brillo y las pantallas de gama amplia pueden mostrarlo de forma diferente, pero el navegador pide siempre lo mismo.
No. Las pautas no redondean, así que 4,48:1 no cumple y los validadores automáticos lo marcarán. Oscurecer el texto un paso suele bastar.
Si quieres saber cómo se guardan los rellenos y trazos dentro de un gráfico vectorial, lee qué es un archivo SVG. Para entender por qué el tamaño de la paleta influye en el peso de una imagen, tienes cómo elegir formato de imagen. Antes de publicar tus hojas de estilo, qué es minificar código explica el último paso, y si piensas incrustar iconos pequeños en el CSS, qué es Base64 te ayudará a decidir cuándo compensa.
