Los colores web son colores utilizados para mostrar páginas web en la World Wide Web ; se pueden describir mediante tres métodos: un color se puede especificar como un triplete RGB , en formato hexadecimal (un triplete hexadecimal ) o según su nombre común en inglés en algunos casos. A menudo se utiliza una herramienta de color u otro software de gráficos para generar valores de color. En algunos usos, los códigos de color hexadecimales se especifican con notación utilizando un signo numérico inicial (#). [1] [2] Un color se especifica según la intensidad de sus componentes rojo, verde y azul, cada uno representado por ocho bits . Por lo tanto, se utilizan 24 bits para especificar un color web dentro de la gama sRGB y 16.777.216 colores que pueden especificarse de esa manera.
Los colores fuera de la gama sRGB se pueden especificar en hojas de estilo en cascada haciendo que uno o más de los componentes rojo, verde y azul sean negativos o superiores al 100%, por lo que el espacio de color es teóricamente una extrapolación ilimitada de sRGB similar a scRGB . [3] Para especificar un color que no sea sRGB de esta manera se requiere la RGB()llamada a la función. Es imposible con la sintaxis hexadecimal (y, por tanto, imposible en documentos HTML heredados que no utilizan CSS).
Las primeras versiones de Mosaic y Netscape Navigator utilizaron los nombres de colores X11 como base para sus listas de colores, ya que ambos comenzaron como aplicaciones del sistema X Window . Los colores web tienen una definición colorimétrica inequívoca, sRGB , que relaciona las cromaticidades de un conjunto de fósforo particular , una curva de transferencia determinada, un punto blanco adaptativo y las condiciones de visualización. [4] Se han elegido para que sean similares a muchos monitores y condiciones de visualización del mundo real, para permitir que la representación sea bastante cercana a los valores especificados incluso sin gestión de color . Los agentes de usuario varían en la fidelidad con la que representan los colores especificados. Los agentes de usuario más avanzados utilizan la gestión del color para proporcionar una mejor fidelidad del color; esto es particularmente importante para las aplicaciones de impresión web .
Un triplete hexadecimal es un número hexadecimal de seis dígitos (u ocho dígitos) y tres bytes (o cuatro bytes) que se utiliza en HTML , CSS , SVG y otras aplicaciones informáticas para representar colores. Los bytes representan los componentes rojo, verde y azul del color. El cuarto byte opcional se refiere al canal alfa . Un byte representa un número en el rango de 00 a FF (en notación hexadecimal) o de 0 a 255 en notación decimal. Esto representa la intensidad mínima (0) a la máxima (255) de cada uno de los componentes del color. Por tanto, los colores web especifican colores en el esquema de color RGB de 24 bits . El triplete hexadecimal se forma concatenando tres bytes en notación hexadecimal, en el siguiente orden:
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 equivalen a los números hexadecimales 24, 68 y A0 respectivamente. El triplete hexadecimal se obtiene concatenando los seis dígitos hexadecimales, 2468A0 en este ejemplo.
Si cualquiera de los tres valores de color es menor que 10 hexadecimal (16 decimal), debe representarse con un cero a la izquierda para que el triplete siempre tenga exactamente seis dígitos. Por ejemplo, el triplete decimal 4, 8, 16 estaría representado por los dígitos hexadecimales 04, 08, 10, formando el triplete hexadecimal 040810.
El número de colores que se pueden representar con este sistema es 16 6 o 256 3 o 2 24 = 16.777.216.
Se puede utilizar una forma abreviada de tres o cuatro dígitos (hexadecimal), [5] pero puede causar errores si el software o los scripts de mantenimiento solo esperan la forma larga. Expandir este formulario al formato de seis dígitos es tan simple como repetir cada dígito: 09C se convierte en 0099CC como se presenta en el siguiente ejemplo de CSS :
. tres dígitos { color : #09C ; } . seis dígitos { color : #0099CC ; } /* mismo color que arriba */ Esta forma abreviada reduce la paleta a 4.096 colores, equivalente a un color de 12 bits en lugar de un color de 24 bits utilizando la forma completa de seis dígitos (16.777.216 colores). Esta limitación es suficiente para muchos documentos basados en texto.
Los valores RGB suelen darse en el rango de 0 a 255; si están en el rango de 0 a 1, los valores se multiplican por 255 antes de la conversión. Este número dividido por dieciséis (división entera; ignorando cualquier resto) da el primer dígito hexadecimal (entre 0 y F, donde las letras de la A a la F representan los números del 10 al 15. Consulte hexadecimal para obtener más detalles). El resto da el segundo dígito hexadecimal. Por ejemplo, el valor RGB 201 se divide en 12 grupos de 16, por lo que el primer dígito es C. Un resto de nueve da el número hexadecimal C9. Este proceso se repite para cada uno de los tres valores de color.
La conversión entre bases numéricas es una característica común de las calculadoras, incluidos tanto los modelos portátiles como las calculadoras de software incluidas con la mayoría de los sistemas operativos modernos . También se encuentran disponibles herramientas basadas en web específicamente para convertir valores de color.
Las especificaciones recientes del W3C sobre nombres de colores distinguen entre colores básicos y extendidos . [6] En HTML y XHTML, se pueden usar colores para texto, color de fondo, bordes de marco, tablas y celdas de tablas individuales. [7]
Los colores básicos son 16 colores definidos en la especificación HTML 4.01, ratificada en 1999, [8] de la siguiente manera (los nombres se definen en este contexto para no distinguir entre mayúsculas y minúsculas):
Estos 16 fueron etiquetados como sRGB y se incluyeron en la especificación HTML 3.0, que señalaba que eran "los 16 colores estándar compatibles con la paleta VGA de Windows ". [9]
Los colores extendidos son el resultado de la combinación de especificaciones de HTML 4.01, CSS 2.0, SVG 1.0 y interfaces de usuario CSS3 (CSS3 UI). [6]
Los navegadores web definen varios colores . Es posible que un navegador en particular no reconozca todos estos colores, pero a partir de 2005, todos los navegadores gráficos modernos de uso general admiten la lista completa de colores. Muchos de estos colores provienen de la lista de nombres de colores X11 distribuida con el sistema X Window . Estos colores fueron estandarizados por SVG 1.0 y son aceptados por los agentes de usuario de SVG Full . No forman parte de SVG Tiny .
La lista de colores enviada con el producto X11 varía según la implementación y choca con algunos de los nombres HTML, como el verde. Los colores X11 se definen como RGB simple (por lo tanto, no hay un espacio de color particular), en lugar de sRGB . Esto significa que la lista de colores que se encuentra en X11 (por ejemplo, en /usr/lib/X11/rgb.txt) no debe usarse directamente para elegir colores para la web. [10]
A continuación se muestra la lista de "colores X11" web de la especificación CSS3, junto con sus equivalentes hexadecimales y decimales. Compare las listas alfabéticas en los estándares del W3C. Esto incluye los sinónimos comunes: aguamarina (nombre estándar HTML4/CSS 1.0) y cian (nombre estándar sRGB), fucsia (nombre estándar HTML4/CSS 1.0) y magenta (nombre estándar sRGB), gris (nombre estándar HTML4/CSS 1.0) y gris. [11] [12]
La especificación Cascading Style Sheets define la misma cantidad de colores con nombre que la especificación HTML 4, es decir, 16 colores HTML y 124 colores de la lista de colores de Netscape X11 para un total de 140 nombres reconocidos por Internet Explorer (IE) 3.0 y Navegador Netscape 3.0. [13] Blooberry.com señala que Opera 2.1 y Safari 1 también incluyeron la lista ampliada de Netscape de 140 nombres de colores, pero luego descubrió 14 nombres no incluidos en Opera 3.5 en Windows 98. [14]
En CSS 2.1, el color 'naranja' (uno de los 140) se agregó a la sección con los 16 colores HTML4 como color número 17. [15] La especificación CSS3.0 no incluía el naranja en la sección "Palabras clave de color HTML4", que pasó a llamarse "Palabras clave de color básico". [16] En la misma referencia, la sección "Palabras clave de color SVG" pasó a llamarse "Palabras clave de color extendidas", después de comenzar como "Palabras clave de color X11" en un borrador de trabajo anterior. [17] El borrador de trabajo para el módulo de color de nivel 4 combina las secciones Básica y Extendida en una sección simple de "Colores con nombre". [18]
CSS 2, SVG y CSS 2.1 permiten a los autores web utilizar colores del sistema , que son nombres de colores cuyos valores se toman del sistema operativo , eligiendo el color del texto resaltado del sistema operativo o el color de fondo para los controles de información sobre herramientas. Esto permite a los autores web diseñar su contenido de acuerdo con el sistema operativo del agente de usuario. [19] El módulo de color CSS3 ha desaprobado el uso de colores del sistema en favor de la propiedad Apariencia del sistema de interfaz de usuario de CSS3, [20] [21] que posteriormente se eliminó de CSS3. [22]
La especificación CSS3 también introduce valores de espacio de color HSL en las hojas de estilo: [23]
/* modelo RGB */ p { color : #F00 } /* #rgb */ p { color : #FF0000 } /* #rrggbb */ p { color : rgb ( 255 , 0 , 0 ) } /* rango entero 0 - 255 */ p { color : rgb ( 100 % , 0 % , 0 % ) } /* rango flotante 0,0% - 100,0% */ /* RGB con canal alfa, agregado a CSS3 */ p { color : rgba ( 255 , 0 , 0 , 0.5 ) } /* 0.5 opacidad, semitransparente */ /* Modelo HSL, agregado a CSS3 */ p { color : hsl ( 0 , 100 % , 50 % ) } /* rojo */ p { color : hsl ( 120 , 100 % , 50 % ) } /* verde */ p { color : hsl ( 120 , 100 % , 25 % ) } /* verde oscuro */ p { color : hsl ( 120 , 100 % , 75 % ) } /* verde claro */ p { color : hsl ( 120 , 50 % , 50 % ) } /* verde pastel */ /* Modelo HSL con canal alfa */ p { color : hsla ( 120 , 100 % , 50 % , 1 ) } /* verde */ p { color : hsla ( 120 , 100 % , 50 % , 0.5 ) } /* verde semitransparente */ p { color : hsla ( 120 , 100 % , 50 % , 0.1 ) } /* verde muy transparente */ CSS también admite el color especial transparent, que representa un valor alfa de cero; De forma predeterminada, transparentse representa como un negro nominal invisible: rgba(0, 0, 0, 0). Se introdujo en CSS1 pero su alcance de uso se ha ampliado con las versiones. [23]
El nivel 4 de la especificación CSS Color introdujo varios formatos de color CSS nuevos. [24]
Además de nuevas formas de escribir colores, también introduce el concepto de mezclar colores en un espacio de color no sRGB, un primer paso para solucionar un problema bien conocido en los degradados de color . También se agregan algunas secciones que explican la teoría del color y operaciones comunes como el mapeo de gama para ayudar en la implementación. [24]
CSS Color 4 introduce varios formatos diferentes para el color independiente del dispositivo que pueden mostrar la totalidad del color visible (en una pantalla compatible), que incluyen: [25]
A través de la nueva función también se introducen varios espacios RGB con gamas más amplias que sRGBcolor() : [25]
También se define una variante linealizada de sRGB para la mezcla de colores. [24]
El 21 de junio de 2014, el CSS WG agregó el color RebeccaPurple al nivel 4 del módulo Draft of the Colors del editor, para conmemorar a Rebecca, la hija de Eric Meyer , que murió el 7 de junio de 2014, en su sexto cumpleaños. [26]
CSS4 también introduce el modelo de color HWB como alternativa a HSL/HSV. [18]
El borrador de la especificación CSS Color 5 [27] introduce una sintaxis para mezclar y manipular colores existentes, que incluye:
color-mix()función para mezclar colores.Los espacios de color personalizados también son compatibles a través de perfiles ICC . Esto permite el uso de CMYK en páginas web. [27]
A mediados de la década de 1990, muchas pantallas sólo eran capaces de mostrar 256 colores, [28] dictados por el hardware o modificables mediante una "tabla de colores". Cuando se encontraba un color (por ejemplo, en una imagen) que no estaba disponible, había que utilizar uno diferente. Esto se hizo usando el color más cercano o usando difuminado .
Hubo varios intentos de crear una paleta de colores "estándar". Se necesitaba un conjunto de colores que pudiera mostrarse sin interrupciones en pantallas de 256 colores; se eligió el número 216 en parte porque los sistemas operativos informáticos habitualmente reservaban entre dieciséis y veinte colores para su propio uso; también se seleccionó porque permitía exactamente seis tonos equidistantes de rojo, verde y azul (6 × 6 × 6 = 216), cada uno de 00 a FF (incluidos ambos límites).
La lista de colores se presentó como si tuviera propiedades especiales que la hicieran inmune al difuminado, pero en pantallas de 256 colores, las aplicaciones podían establecer una paleta de cualquier selección de colores que eligieran, y el resto se difuminaba. Estos colores se eligieron específicamente porque coincidían con las paletas seleccionadas por varias aplicaciones de navegador. No se utilizaban paletas muy diferentes en diferentes navegadores. [ cita necesaria ]
Los colores "seguros para la Web" tenían el defecto de que, en sistemas como X11 , donde la paleta se comparte entre aplicaciones, los navegadores asignaban cubos de colores más pequeños (5×5×5 o 4×4×4); Los colores "seguros" oscilarían en tales sistemas. Se obtuvieron resultados diferentes al proporcionar una imagen con una gama más amplia de colores y permitir que el navegador cuantifique el espacio de color si es necesario, en lugar de sufrir la pérdida de calidad de una doble cuantificación.
Durante la década de 2000, el uso de pantallas de 256 colores en computadoras personales cayó drásticamente en favor de pantallas de 24 bits ( TrueColor ), [29] y el uso de colores "seguros para la web" ha caído en desuso.
No todos los colores "seguros para la web" tienen nombres estándar, pero cada uno puede especificarse mediante un triplete RGB : cada componente (rojo, verde y azul) toma uno de los seis valores de la siguiente tabla (de los 256 posibles valores disponibles para cada componente en color completo de 24 bits).
La siguiente tabla muestra todos los colores "seguros para la web". Una desventaja de la paleta segura para la web es su pequeña gama de colores claros para los fondos de las páginas web, mientras que las intensidades en el extremo inferior del rango, como las dos más oscuras, son similares entre sí, lo que las hace difíciles de distinguir. Los valores flanqueados por "*" (asterisco) son parte de la "paleta realmente segura"; consulte Colores web más seguros, a continuación.
Cada código de color enumerado es una abreviatura del valor RGB. Por ejemplo, el código 609 equivale al código RGB 102-0-153 o al código HEX #660099 .
Los diseñadores fueron alentados [ ¿por quién? ] a apegarse a estos 216 colores "seguros para la web" en sus sitios web porque había muchas pantallas de color de 8 bits cuando se desarrolló la paleta de 216 colores. David Lehn y Hadley Stern descubrieron que sólo 22 de los 216 colores de la paleta segura para la web se muestran de manera confiable sin reasignación inconsistente en pantallas de computadora de 16 bits . A estos 22 colores los llamaron "la paleta realmente segura"; se compone principalmente de tonos de verde, amarillo y cian. [30] [31]
Algunos navegadores y dispositivos no admiten colores. Para estas pantallas o usuarios ciegos y daltónicos, el contenido web que depende de los colores puede resultar inutilizable o difícil de utilizar.
No se debe especificar ningún color (para invocar los colores predeterminados del navegador), o se deben especificar tanto los colores de fondo como los de primer plano (como los colores de texto sin formato, enlaces no visitados, enlaces suspendidos, enlaces activos y enlaces visitados) para evitar efectos de negro sobre negro o blanco sobre blanco . [32]
Las Pautas de accesibilidad al contenido web recomiendan una relación de contraste de al menos 4,5:1 entre la luminancia relativa del texto y su color de fondo [33] o al menos 3:1 para texto grande. La accesibilidad mejorada requiere relaciones de contraste superiores a 7:1.
Sin embargo, abordar los problemas de accesibilidad no es simplemente una cuestión de aumentar la relación de contraste. Como indica un informe de la Web Accessibility Initiative , [34] los lectores disléxicos obtienen mejores resultados con relaciones de contraste inferiores al máximo. Las recomendaciones a las que se refieren de negro (#0A0A0A) sobre blanquecino (#FFFFE5) y negro (#000000) sobre crema (#FAFAC8) tienen relaciones de contraste de 11,7:1 y 20,3:1 respectivamente. Entre sus otros pares de colores, el marrón (#282800) sobre verde oscuro (#A0A000) tiene una relación de contraste de 3,24:1, que es inferior a la recomendación WCAG ; el marrón oscuro (#1E1E00) sobre verde claro (#B9B900) tiene una relación de contraste de 4,54:1 y el azul (#00007D) sobre amarillo (#FFFF00) tiene una relación de contraste de 11,4:1. Los colores nombrados en el informe utilizan valores de color diferentes a los colores web del mismo nombre.
Se ha eliminado la apariencia del sistema, incluidos los valores y propiedades de apariencia, y las fuentes del sistema/extensión de la abreviatura de propiedad 'fuente'.