Color en pantallas
La mayoría de las pantallas construyen colores mezclando luz roja, verde y azul. En el modelo habitual de 8 bits por canal, cada canal va de 0 a 255, lo que da 256³ ≈ 16,7 millones de colores posibles. Dos grafías populares del mismo triplete dominan el trabajo web: notación funcional RGB y códigos hexadecimales.
Convierta un valor hex a canales decimales con la herramienta hex a RGB.
Triples RGB
En CSS, rgb(34, 139, 34) significa rojo=34, verde=139, azul=34—un verde tipo bosque. CSS moderno también permite rgb(34 139 34 / 0.8) con un componente alfa (opacidad). El alfa no forma parte del hex clásico de seis dígitos sin extensión; véase el hex de ocho dígitos más abajo.
Los valores RGB en el CSS cotidiano son referidos al dispositivo: describen señales enviadas a la tubería de pantalla, no una coincidencia garantizada en impresión. Para impresión crítica de marca, los diseñadores usan perfiles ICC y otros flujos con gestión de color.
Codificación hex
Un color hex escribe cada canal como dos dígitos hexadecimales. Los dígitos hex van de 0–9 y luego A–F (sin distinguir mayúsculas), representando 0–15. Dos dígitos representan 0–255 porque 16×16 = 256.
Ejemplo: #228B22
22hex → 2×16 + 2 = 34 decimal (rojo)8Bhex → 8×16 + 11 = 139 decimal (verde)22hex → 34 decimal (azul)
Así #228B22 equivale a rgb(34, 139, 34).
El # inicial es convencional en HTML/CSS. Algunos sistemas lo omiten; otros lo exigen.
Forma hex corta
CSS permite hex de tres dígitos #rgb como abreviatura donde cada dígito se duplica: #2A8 se expande a #22AA88. Es cómodo para colores gruesos y tokens de diseño, pero no expresa todo triplete de 8 bits—solo aquellos cuyos canales son múltiplos de 17 (0x00, 0x11, …, 0xFF).
Alfa en hex
El hex de ocho dígitos #RRGGBBAA añade un canal alfa. #228B2280 es aproximadamente 50 % de opacidad según cómo se interprete la escala (0x80 / 255 ≈ 0,502). El soporte es sólido en navegadores modernos; en entornos antiguos, prefiera rgba() / rgb() moderno con alfa.
El hex corto de cuatro dígitos #rgba se expande de forma similar duplicando dígitos.
Convertir hex → RGB a mano
- Quite el
#. - Si la longitud es 3 o 4, expanda dígitos.
- Divida en pares.
- Analice cada par en base 16.
- Opcionalmente convierta el par alfa a float 0–1 dividiendo por 255.
Convertir RGB → hex
- Acote canales a enteros 0–255.
- Convierta cada uno a dos dígitos hex (rellene con cero a la izquierda si hace falta).
- Concatene tras
#.
El redondeo aparece al convertir desde formatos con gamas más amplias o canales decimales—decida redondear o truncar y sea coherente.
HSL y otros modelos
Los diseñadores suelen pensar en HSL (matiz, saturación, luminosidad) porque ajustar el tinte se siente natural. Los ordenadores siguen rasterizando a RGB en pantallas típicas. La conversión HSL↔RGB es sin pérdida en el gamut CSS si se hace con cuidado, pero el redondeo intermedio puede derivar tras muchos idas y vueltas.
Otros modelos (CIELAB, OKLCH, Display P3) aparecen en CSS moderno por uniformidad perceptual o gamas más amplias. Hex y sRGB siguen siendo la lengua franca de tokens de diseño y especificaciones antiguas.
Accesibilidad: el contraste importa más que los códigos
Escriba #333333 o rgb(51,51,51), la legibilidad es el contraste frente al fondo. Las ratios WCAG comparan luminancias relativas. Elegir hex bonitos sin comprobar contraste deja el texto difícil de leer. Empareje herramientas de color con un comprobador de contraste al fijar texto de cuerpo y chrome de UI.
Sistemas de diseño y tokens
Los equipos guardan colores de marca como tokens con nombre (--color-brand-600: #228B22) para que los componentes no fijen hex aleatorios. Documente hex y RGB si distintas plataformas necesitan APIs distintas (el móvil nativo a menudo quiere canales float 0–1).
Mantenga una única fuente de verdad; genere los demás formatos. Listas paralelas mantenidas a mano se desvían.
Errores comunes
- Confundir las reglas de expansión
#RGB. - Olvidar que
100%en RGB CSS moderno no es la misma sintaxis que enteros 0–255. - Asumir que el hex en pantalla coincide con pantone impreso sin gestión de color.
- Usar
#000000puro sobre#111111para texto «sutil»—el contraste puede fallar en tipografía pequeña. - Analizar hex con regex que permita longitudes impares sin validación.
Consejos programáticos
- Normalice hex a mayúsculas o minúsculas en el código para estabilidad de diffs.
- Valide con un patrón estricto:
^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$(ajuste si prohíbe formas cortas). - Al interpolar animaciones, convierta a un espacio lineal o use interpolación CSS moderna de color en lugar de lerpear hex como texto.
Flujo con conversors
Cuando una herramienta de diseño exporta hex y una API gráfica quiere bytes:
- Pegue hex en un conversor.
- Confirme canales.
- Pase enteros o floats normalizados a la API.
- Compruebe visualmente unos colores de marca.
La herramienta from-hex-to-rgb está hecha para ese bucle rápido de confirmación.
Resumen
Los colores hex son grafías en base 16 de bytes de canal RGB. El hex de seis dígitos mapea directamente a tres componentes 0–255; las formas corta y de ocho dígitos amplían la idea para brevedad y alfa. Aprenda una vez la conversión por pares, mantenga tokens coherentes y verifique contraste—porque el formato importa menos que si la gente puede leer la interfaz.