Los colores de la web son los colores utilizados en el diseño de las páginas web, así como las formas de describir y enumerar esos colores. Entender cómo se representan y gestionan estos colores es clave para obtener resultados coherentes entre navegadores, monitores e impresiones.
Hay varias formas de elegir los colores para las partes de las páginas web. Los colores pueden aparecer como un triplete RGB (un conjunto de tres números) en formato hexadecimal (un triplete hexadecimal). El triplete RGB puede formar 16.777.216 colores diferentes (256 niveles por canal: 256³ = 16.777.216). Muchos colores comunes también pueden elegirse por sus nombres comunes en inglés. A menudo se utiliza una herramienta de color u otro software gráfico para crear valores de color.
Formatos habituales en la web
- Hexadecimal (#RRGGBB): representación compacta muy usada en CSS. Cada par de dígitos hex representa la intensidad de rojo, verde y azul (00 a FF).
- rgb() y rgba(): funciones CSS que muestran los valores en decimal (ej. rgb(255, 0, 0) para rojo). rgba() añade un canal alfa para la transparencia.
- hsl() / hsla(): describe color mediante matiz, saturación y luminosidad; a menudo resulta más intuitivo para ajustar tonos.
- Nombres de color: ciertos colores estándar pueden usarse por nombre (por ejemplo, "white", "black", "red"). Estos nombres provienen históricamente de listas como las de X11 y fueron adoptados por navegadores tempranos.
sRGB: el estándar de la web
Cada color de la web tiene su propia definición, sRGB. Ésta se relaciona con las cromaticidades de un único conjunto de fósforos, una curva de transferencia determinada, un punto blanco adaptable y unas condiciones de visualización. Se han elegido para que sean similares a muchos monitores y condiciones de visualización del mundo real. Incluso sin la gestión del color, los colores creados se acercan bastante a los valores dados.
sRGB define tanto las coordenadas de color (chromaticities) como la curva de gamma aproximada que deben seguir los números RGB para mapear a luz visible. Por eso, cuando un navegador o una imagen declara que usa el espacio sRGB, los dispositivos y el software pueden interpretar los valores con mayor coherencia.
Gestión del color y diferencias entre dispositivos
Los agentes de usuario pueden diferir en la fidelidad con la que muestran los colores. Los mejores agentes de usuario utilizan la gestión del color para convertir correctamente entre perfiles (p. ej., entre sRGB y el perfil de un monitor calibrado), lo que mejora la fidelidad cromática. Esto es especialmente importante para aplicaciones Web-to-print y trabajos donde la reproducción exacta del color importa.
Factores que afectan la apariencia final:
- Calibración y perfil ICC del monitor.
- Brillo, contraste y iluminación ambiental.
- Compresión y conversión de imágenes entre formatos o perfiles.
- Soporte del navegador para gestión del color y perfiles incrustados.
Historia breve y compatibilidad
Las primeras versiones de Mosaic y Netscape Navigator utilizaban los nombres de colores de X11 como base para sus listas de colores. Esto se debió a que ambos comenzaron como aplicaciones del sistema X Window. Desde entonces, las listas de colores y el soporte han evolucionado, pero la compatibilidad hacia atrás y los nombres estándar siguen siendo relevantes en muchos proyectos.
Buenas prácticas para diseñadores web
- Usa sRGB como espacio de trabajo por defecto para diseños web a menos que tengas un motivo específico para otro perfil.
- Incrusta perfiles ICC en imágenes cuando la fidelidad del color sea crítica y asegúrate de que los navegadores destino soporten su uso.
- Evita depender de tonos muy matizados que sólo puedan distinguirse en monitores calibrados; prueba en dispositivos reales.
- Controla la accesibilidad: comprueba el contraste de color entre texto y fondo siguiendo las pautas WCAG (relación de contraste mínima) para garantizar legibilidad.
- Utiliza herramientas de selección de color y generadores de paletas para mantener coherencia en la interfaz y para crear variantes (tonos, sombras, transparencias).
Herramientas y recursos
- Picker de color integrado en editores gráficos y navegadores.
- Generadores de paletas y contrast checkers para accesibilidad.
- Herramientas de gestión del color y calibradores de monitor para entornos profesionales de diseño e impresión.
En resumen, comprender los formatos RGB y hexadecimal, usar sRGB como referencia y aplicar prácticas de gestión del color y accesibilidad permitirá resultados consistentes y usables en la mayoría de los proyectos web.