stringtranslate.com

Colores web

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 puede especificarse 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 de número inicial (#). [1] [2] Un color se especifica de acuerdo con la intensidad de sus componentes rojo, verde y azul, cada uno representado por ocho bits . Por lo tanto, hay 24 bits utilizados 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 mayores del 100 %, por lo que el espacio de color es teóricamente una extrapolación ilimitada de sRGB similar a scRGB . [3] Especificar un color que no sea sRGB de esta manera requiere la RGB()llamada de función. Es imposible con la sintaxis hexadecimal (y, por lo tanto, imposible en documentos HTML heredados que no usan CSS).

Las primeras versiones de Mosaic y Netscape Navigator usaban los nombres de colores de X11 como base para sus listas de colores, ya que ambas 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ósforos en particular , una curva de transferencia dada, un punto blanco adaptativo y condiciones de visualización. [4] Estos han sido elegidos 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 administració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 usan la administración de color para proporcionar una mejor fidelidad de color; esto es particularmente importante para las aplicaciones de Web a impresión .

Triplete hexadecimal

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 máxima (255) de cada uno de los componentes de color. Por lo 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=123, verde=58, azul=30 (un color marrón madera dura). Los números decimales 123, 58 y 30 son equivalentes a los números hexadecimales 7B, 3A y 1E, respectivamente. El triplete hexadecimal se obtiene concatenando los seis dígitos hexadecimales, 7B3A1E en este ejemplo.

Si alguno de los tres valores de color es menor que 10 hexadecimales (16 decimales), debe representarse con un cero inicial para que el triplete tenga siempre exactamente seis dígitos. Por ejemplo, el triplete decimal 4, 8, 16 se representaría con 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 256 3 , 16 6 o 2 24 = 16.777.216.

Forma hexadecimal abreviada

Se puede utilizar una forma abreviada de tres dígitos (hexadecimales) o de cuatro dígitos [5], pero puede provocar errores si el software o los scripts de mantenimiento solo esperan la forma larga. Ampliar esta forma a la forma de seis dígitos es tan simple como repetir cada dígito: 09C se convierte en 0099CC como se muestra en el siguiente ejemplo de CSS :

. threedigit { color : #09C ; } . sixdigit { color : #0099CC ; } /* mismo color que el anterior */         

Esta forma abreviada reduce la paleta a 4096 colores, equivalentes a un color de 12 bits en lugar de un color de 24 bits que utiliza la forma completa de seis dígitos (16 777 216 colores). Esta limitación es suficiente para muchos documentos basados ​​en texto.

Conversión de RGB a hexadecimal

Los valores RGB se dan normalmente 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 A a F representan los números del 10 al 15. Vea hexadecimal para más detalles). El resto da el segundo dígito hexadecimal. Por ejemplo, el valor RGB 58 (como se muestra en el ejemplo anterior de tripletes hexadecimales) se divide en 3 grupos de 16, por lo tanto, el primer dígito es 3. Un resto de diez da el número hexadecimal 3A. Del mismo modo, el valor RGB 201 se divide en 12 grupos de 16, por lo tanto, 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, tanto de los modelos portátiles como de las calculadoras de software que se incluyen con la mayoría de los sistemas operativos modernos . También hay disponibles herramientas basadas en la Web específicas para convertir valores de color.

Nombres de colores HTML

Las especificaciones recientes del W3C sobre los nombres de colores distinguen entre colores básicos y extendidos . [6] En HTML y XHTML, los colores se pueden utilizar para texto, color de fondo, bordes de marcos, tablas y celdas de tablas individuales. [7]

Colores básicos

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 que no distingan entre mayúsculas y minúsculas):

Estos 16 fueron etiquetados como sRGB y se incluyeron en la especificación HTML 3.0, que señaló que eran "los 16 colores estándar compatibles con la paleta VGA de Windows ". [9]

Colores extendidos

Versión SVG de los nombres de colores X11
Colores con nombre SVG1.1 con códigos sRGB hex/dec y HSL, con resolución UHD (4K)

Los colores extendidos son el resultado de la fusión de especificaciones de HTML 4.01, CSS 2.0, SVG 1.0 e 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 X Window System . Estos colores fueron estandarizados por SVG 1.0 y son aceptados por los agentes de usuario SVG Full . No son parte de SVG Tiny .

La lista de colores que se incluye con el producto X11 varía entre las implementaciones y entra en conflicto 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 en 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 se debe utilizar directamente para elegir colores para la web. [10]

A continuación se muestra la lista de colores web "X11" de la especificación CSS3, junto con sus equivalentes hexadecimales y decimales. Compare las listas alfabéticas en los estándares W3C. Esto incluye los sinónimos comunes: aqua (nombre estándar HTML4/CSS 1.0) y cyan (nombre común sRGB), fuchsia (nombre estándar HTML4/CSS 1.0) y magenta (nombre común sRGB), gray (nombre estándar HTML4/CSS 1.0) y grey. [11] [12]

Colores CSS

La especificación de hojas de estilo en cascada define el mismo número de colores con nombre que la especificación HTML 4, es decir, los 16 colores HTML y 124 colores de la lista de colores de Netscape X11 para un total de 140 nombres que fueron reconocidos por Internet Explorer (IE) 3.0 y Netscape Navigator 3.0. [13] Blooberry.com señala que Opera 2.1 y Safari 1 también incluyeron la lista ampliada de 140 nombres de colores de Netscape, pero luego descubrieron 14 nombres que no estaban 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 el color número 17. [15] La especificación CSS3.0 no incluyó el naranja en la sección "Palabras clave de color HTML4", que se renombró como "Palabras clave de color básicas". [16] En la misma referencia, la sección "Palabras clave de color SVG" se renombró como "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 juntas en una simple sección "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 dejado obsoleto el uso de colores del sistema en favor de la propiedad Apariencia del sistema de interfaz de usuario 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 de números enteros 0 - 255 */ p { color : rgb ( 100 % , 0 % , 0 % ) } /* rango de puntos flotantes 0,0% - 100,0% */                        /* RGB con canal alfa, agregado a CSS3 */ p { color : rgba ( 255 , 0 , 0 , 0.5 ) } /* Opacidad 0.5, semitransparente */        /* Modelo HSL, añadido 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 manera 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]

Colores CSS 4

El nivel 4 de la especificación de color CSS 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 distinto de sRGB, un primer paso hacia la solución de un problema bien conocido en los gradientes de color . También se añaden algunas secciones que explican la teoría del color y operaciones comunes como el mapeo de gama para facilitar la implementación. [24]

Color independiente del dispositivo

CSS Color 4 presenta varios formatos diferentes para el color independiente del dispositivo que pueden mostrar la totalidad del color visible (en una pantalla compatible), incluidos: [25]

Espacios de color predefinidos

La nueva función también introduce una serie de 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]

Otros formatos

El 21 de junio de 2014, el CSS WG agregó el color RebeccaPurple al Borrador del Editor del nivel 4 del módulo Colores, para conmemorar a la hija de Eric Meyer , Rebecca, quien murió el 7 de junio de 2014, su sexto cumpleaños. [26]

CSS4 también introduce el modelo de color HWB como alternativa a HSL/HSV. [18]

Colores CSS 5

El borrador de la especificación CSS Color 5 [27] introduce una sintaxis para mezclar y manipular colores existentes, que incluye:

Los espacios de color personalizados también se admiten a través de perfiles ICC . Esto permite el uso de CMYK en páginas web. [27]

Colores seguros para la Web

A mediados de los años 1990, muchas pantallas sólo podían mostrar 256 colores, [28] determinados por el hardware o modificables mediante una "tabla de colores". Cuando se encontraba un color (por ejemplo, en una imagen) que no estaba disponible, se debía utilizar uno diferente. Esto se hacía utilizando el color más cercano o mediante tramado .

Hubo varios intentos de crear una paleta de colores "estándar". Se necesitaba un conjunto de colores que pudieran mostrarse sin difuminación en pantallas de 256 colores; el número 216 se eligió en parte porque los sistemas operativos de computadoras reservaban habitualmente entre dieciséis y veinte colores para su propio uso; también se seleccionó porque permitía exactamente seis tonos de rojo, verde y azul igualmente espaciados (6 × 6 × 6 = 216), cada uno desde 00 hasta FF (incluidos ambos límites).

La lista de colores se presentó como si tuviera propiedades especiales que la hicieran inmune al tramado, pero en pantallas de 256 colores las aplicaciones podían realmente establecer una paleta de cualquier selección de colores que eligieran, tramando el resto. Estos colores se eligieron específicamente porque coincidían con las paletas seleccionadas por varias aplicaciones del navegador. No había paletas muy diferentes en uso en diferentes navegadores. [ cita requerida ]

Los colores "seguros para la Web" tenían un defecto: en sistemas como X11 , donde la paleta se comparte entre aplicaciones, los navegadores asignaban cubos de color más pequeños (5x5x5 o 4x4x4), y los colores "seguros para la Web" se distorsionaban en esos sistemas. Se obtuvieron resultados diferentes al proporcionar una imagen con una gama más amplia de colores y permitir que el navegador cuantizara el espacio de color si era necesario, en lugar de sufrir la pérdida de calidad de una cuantización doble.

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" cayó en desuso práctico.

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 valores posibles disponibles para cada componente en color completo de 24 bits).

La siguiente tabla muestra todos los colores "seguros para la Web". Una de las deficiencias 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 de la gama, como los dos más oscuros, son similares entre sí, lo que hace que sea difícil distinguirlos. Los valores flanqueados por "*" (asterisco) forman parte de la "paleta realmente segura"; consulte Colores web más seguros, a continuación.

Tabla de colores

Cada código de color que aparece en la lista es una abreviatura del valor RGB. Por ejemplo, el código 609 es equivalente al código RGB 102-0-153 o al código HEX #660099 .

Colores web más seguros

Los diseñadores fueron alentados [ ¿por quién? ] a mantener 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 solo 22 de los 216 colores de la paleta segura para la web se muestran de manera confiable sin reasignaciones inconsistentes en pantallas de computadora de 16 bits . Llamaron a estos 22 colores "la paleta realmente segura"; consiste principalmente en tonos de verde, amarillo y cian. [30] [31]

Accesibilidad

Selección de colores

Algunos navegadores y dispositivos no admiten colores. Para estas pantallas o para los usuarios ciegos o daltónicos, el contenido web que depende de los colores puede resultar inutilizable o difícil de usar.

O bien no se deben especificar colores (para invocar los colores predeterminados del navegador), o bien se deben especificar tanto los colores de fondo como todos los colores de primer plano (como los colores del texto simple, los enlaces no visitados, los enlaces sobre los que se pasa el mouse, los enlaces activos y los enlaces visitados) para evitar efectos de negro sobre negro o blanco sobre blanco . [32]

Contraste de color

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 textos grandes. La accesibilidad mejorada requiere relaciones de contraste mayores a 7:1.

Sin embargo, abordar las preocupaciones 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 se benefician más de relaciones de contraste inferiores al máximo. Las recomendaciones a las que hacen referencia de negro hueso (#0A0A0A) sobre blanco hueso (#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.

Véase también

Referencias

  1. ^ Niederst Robbins, Jennifer (febrero de 2006). "Apéndice D: Especificación del color". Diseño web en pocas palabras . O'Reilly. pág. 830. ISBN 978-0-596-00987-8.
  2. ^ York, Richard. Principios de CSS , págs. 71–72.
  3. ^ Pemberton, Steven; Pettit, Brad (7 de junio de 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "CSS Color Module Level 3". W3C. Sección 4.2.1. Valores de color RGB.
  4. ^ Sharma, Gaurav; Bala, Raja (19 de diciembre de 2017). Manual de imágenes en color digital. CRC Press. ISBN 978-1-4200-4148-4.
  5. ^ Pemberton, Steven; Pettit, Brad (7 de junio de 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.2.1. Valores de color RGB". Módulo de color CSS nivel 3 . W3C . Consultado el 19 de marzo de 2013 .
  6. ^ ab "Módulo de color CSS nivel 3". W3c . Consultado el 19 de julio de 2020 .
  7. ^ Powell, Thomas A. (2010). HTML & CSS: The Complete Reference, quinta edición . Nueva York: McGraw-Hill. pág. 765. ISBN. 9780071741705.
  8. ^ "Especificación HTML 4.01 | Tipos de datos HTML básicos | Colores". W3C . Consultado el 8 de julio de 2013 .
  9. ^ Raggett, Dave. "Especificación de referencia HTML 3.2 | El elemento BODY". W3C . Consultado el 8 de julio de 2013 .
  10. ^ Lilley, Chris (24 de abril de 2002). "Re: los nombres de colores en SVG-1.0 entran en conflicto con /usr/lib/X11/rgb.txt". Archivos de listas de correo públicas del W3C . Consultado el 8 de julio de 2013 .
  11. ^ Pemberton, Steven; Pettit, Brad (7 de junio de 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.3. Palabras clave de color extendidas". Módulo de color CSS nivel 3 . W3C . Consultado el 19 de marzo de 2013 .
  12. ^ "Gráficos vectoriales escalables (SVG) 1.1 (segunda edición) | Tipos de datos básicos e interfaces | Nombres de palabras clave de colores reconocidos". W3C. 16 de agosto de 2011. Consultado el 1 de febrero de 2019 .
  13. ^ "El conjunto de colores X11". Computación y redes en HSEAS . Archivado desde el original el 14 de julio de 2014. Consultado el 6 de julio de 2014 .
  14. ^ Brian Wilson. "Colores en HTML y CSS". blooberry.com . Consultado el 6 de julio de 2014 .
  15. ^ "Especificación CSS 2.1: Sintaxis y tipos de datos básicos: Colores". W3C . 8 de septiembre de 2009 . Consultado el 21 de diciembre de 2009 .
  16. ^ "CSS Color Module Level 3 – Proposed Recommendation - 11. Changes". W3C . 28 de octubre de 2010 . Consultado el 6 de julio de 2014 .
  17. ^ "Módulo CSS3: Color | Borrador de trabajo". W3C . 18 de abril de 2002 . Consultado el 6 de julio de 2014 .
  18. ^ ab "Módulo de color CSS nivel 4: colores con nombre".
  19. ^ "Interfaz de usuario – Colores del sistema". W3C . Consultado el 8 de julio de 2013 .
  20. ^ Pemberton, Steven; Pettit, Brad (7 de junio de 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.5.1. Colores del sistema CSS2". Módulo de color CSS nivel 3 . W3C . Consultado el 19 de marzo de 2013 .
  21. ^ "Módulo de interfaz de usuario básica CSS3 | Apariencia del sistema". W3C . Consultado el 8 de julio de 2013 .
  22. ^ Çelik, Tantek, ed. (17 de enero de 2012). "Lista de cambios sustanciales". Módulo de interfaz de usuario básica CSS nivel 3 . W3C . Consultado el 19 de marzo de 2013 . Se ha eliminado la apariencia del sistema, incluidos los valores y propiedades de apariencia, y las fuentes del sistema/extensión de la propiedad abreviada 'font'.
  23. ^ ab Pemberton, Steven; Pettit, Brad (7 de junio de 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.2.4. Valores de color HSL". Módulo de color CSS nivel 3 . W3C . Consultado el 19 de marzo de 2013 .
  24. ^ abcd «Módulo de color CSS nivel 4». W3C . Consultado el 14 de marzo de 2022 .
  25. ^ ab "Módulo de color CSS nivel 4: descripción general". W3C . Consultado el 11 de enero de 2022 .
  26. ^ Glazman, Daniel (21 de junio de 2014). "Re: [CfC] agregando 'rebeccapurple' al nivel de color CSS 4". Publicado en la lista de correo www-style . W3C . Consultado el 24 de junio de 2014 .
  27. ^ ab Módulo de color CSS Nivel 5
  28. ^ Jenkins, Sue (27 de diciembre de 2012). Diseño web todo en uno para principiantes. John Wiley & Sons. ISBN 9781118404119.
  29. ^ "Estadísticas de visualización del navegador". W3Schools . Consultado el 8 de julio de 2013 .
  30. ^ Lehn, David; Stern, Hadley. "¿Muerte de la paleta de colores Websafe?". asc.ohio-state.edu. Archivado desde el original el 3 de marzo de 2021. Consultado el 3 de marzo de 2021 .
  31. ^ Piperoglou, Stephanos (13 de diciembre de 2000). «Web Color Reference - HTML with Style | 4». WebReference . Archivado desde el original el 23 de noviembre de 2016. Consultado el 5 de enero de 2016 .
  32. ^ "Si eliges un color, elígelos todos". W3C . Consultado el 8 de julio de 2013 .
  33. ^ Directriz 1.4 de WCAG 2.0
  34. ^ Colores óptimos para mejorar la legibilidad para personas con dislexia

Enlaces externos