Colores web: guía esencial de RGB, hexadecimal y espacio sRGB
Guía esencial de colores web: aprende RGB, códigos hexadecimales y espacio sRGB para diseñar con precisión, consistencia y fidelidad cromática en la web.
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.
Galería de imágenes
1 Imagen
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.
Triplete hexadecimal
Un triplete hexadecimal es un número de seis dígitos y tres bytes que se utiliza en HTML, CSS, SVG y otros programas informáticos para representar los colores. Los bytes representan las partes roja, verde y azul del color. Un byte representa un número en el rango de 00 a FF, o de 0 a 255 en notación decimal. Esto representa desde la menor (0) hasta la mayor (255) intensidad de cada uno de los componentes del color. El triplete hexadecimal se forma concatenando tres bytes en notación hexadecimal, en el siguiente orden:
Byte 1: valor rojo (tipo de color rojo)
Byte 2: valor verde (tipo de color verde)
Byte 3: valor azul (tipo de color azul)
Por ejemplo, considere el color donde los valores rojo/verde/azul son números decimales: rojo=36, verde=104, azul=160 (un color azul grisáceo). Los números decimales 36, 104 y 160 son similares a los números 24, 68 y A0 respectivamente. El triplete hexadecimal se obtiene combinando los 6 dígitos hexadecimales juntos, 2468A0 en este ejemplo.
Colores web HTML
Formulado en 1997, originalmente había 16 colores. Posteriormente se añadió el naranja para hacer un total de 17. Los 16 originales formaban parte de algo llamado "plantilla VGA de Windows", lo que significa que son los colores que pueden utilizarse para acciones como el resaltado.
| Color | Hexadecimal | Color | Hexadecimal | Color | Hexadecimal | Color | Hexadecimal |
| aqua | #00FFFF | gris | #808080 | #000080 | plata | #C0C0C0 | |
| negro | #000000 | verde | #008000 | #808000 | #008080 | ||
| azul | #0000FF | cal | #00FF00 | púrpura | #800080 | #FFFFFF | |
| #FF00FF | #800000 | rojo | #FF0000 | amarillo | #FFFF00 |
Lista de nombres de colores HTML
La tabla siguiente contiene los 140 colores HTML. Todos los navegadores modernos los soportan.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Colores X11 (formulados en 1987)
Se denominan "colores web X11" desde la invención de la World Wide Web en 1991.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Tabla de colores web seleccionados
Esta tabla muestra los colores HTML y X11 seleccionados, así como los colores web de consenso no oficiales desarrollados por diseñadores web desde 2002. Al introducir el código utilizando los colores no oficiales, debe especificarse el código hexadecimal del color en lugar de escribir el nombre del mismo.
Colores de la web (lista) | |||||||||||||||||||
| Rosa | Rojo | Marrón | Misty Rose | Coral | Naranja-Rojo | Chocolate | Oro | Marfil | Amarillo | Oliva | Césped verde | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Cal | Verde | Verde primavera | Turquesa | Azure | Teal | Azul | Ciruela | Púrpura | |||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Tan | Beige | Gris pizarra | Gris pizarra oscuro | Gris claro | Plata | Gris oscuro | Gris | Gris oscuro | Negro | ||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
| ||||||||
Preguntas y respuestas
P: ¿Qué son los colores web?
R: Los colores web son los colores que se utilizan en el diseño de las páginas web y las formas de describir y enumerar esos colores.
P: ¿Cuántos colores diferentes se pueden crear con los tripletes RGB?
R: Con los tripletes RGB se pueden crear 16.777.216 colores diferentes.
P: ¿Existen nombres comunes en inglés para algunos de estos colores?
R: Sí, muchos colores comunes también pueden elegirse por sus nombres comunes en inglés.
P: ¿Qué software se suele utilizar para crear valores de color?
R: A menudo se utiliza una herramienta de color u otro software gráfico para crear valores de color.
P: ¿En qué se basaron las listas de colores originales de Mosaic y Netscape Navigator?
R: Las primeras versiones de Mosaic y Netscape Navigator utilizaron los nombres de los colores de X11 como base para sus listas de colores porque ambos empezaron como aplicaciones del sistema X Window.
P: ¿Qué relación tiene sRGB con los colores de la web?
R: Cada color de la web tiene su propia definición, sRGB, que se relaciona con las cromaticidades de un único conjunto de fósforo, una curva de transferencia determinada, un punto blanco adaptable y las condiciones de visualización.
P: ¿Cómo muestran los agentes de usuario estos colores con precisión?
R: Los mejores agentes de usuario utilizan la gestión del color para crear una mayor fidelidad del color, lo que es importante para las aplicaciones de impresión de la web.
Artículos relacionados
Autor
AlegsaOnline.com Colores web: guía esencial de RGB, hexadecimal y espacio sRGB Leandro Alegsa
URL: https://es.alegsaonline.com/art/107055
Fuentes
- purei.com : "Web design details"
- w3.org : HTML 4.01 Specification section 6.5 "Colors"