De Wikipedia, la enciclopedia libre
  (Redirigido desde los nombres de color HTML )
Saltar a navegación Saltar a búsqueda

Los colores web son colores que se utilizan para mostrar páginas web en la World Wide Web y los métodos para describir y especificar esos colores. Los colores se pueden especificar como un triplete RGB o en formato hexadecimal (un triplete hexadecimal ) o de acuerdo con sus nombres comunes 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, se utilizan 24 bits para especificar un color web dentro de la gama sRGB , y 16.777.216 colores que se pueden especificar así.

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] Especificar un color que no sea sRGB de esta manera requiere la llamada a la función RGB (). 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 utilizaron los nombres de colores 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ósforo particular , una curva de transferencia determinada, un punto blanco adaptativo y las condiciones de visualización. [4] Estos han sido elegidos para ser similares a muchos monitores y condiciones de visualización del mundo real , para permitir que el renderizado sea bastante cercano a los valores especificados incluso sin administración de color . Agentes de usuariovarí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 desde la Web .

Triplete hexagonal [ editar ]

Un triplete hexadecimal es un número hexadecimal de seis dígitos y tres 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. 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 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:

  • 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 equivalentes 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 hexadecimales (16 decimales), 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 puede representar este sistema es 16 6 o 256 3 o 2 24 = 16.777.216.

Forma hexadecimal taquigráfica [ editar ]

Se utiliza una forma abreviada de tres dígitos (hexadecimal). [5] Expandir este formulario al formulario de seis dígitos es tan simple como duplicar cada dígito: 09C se convierte en 0099CC como se presenta en el siguiente ejemplo de CSS :

. threedigit  {  color :  # 09C ;  } . seis dígitos  {  color :  # 0099CC ;  }  / * mismo color que el anterior * /

Esta forma abreviada reduce la paleta a 4096 colores, equivalente al color de 12 bits en contraposición al 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.

Conversión de RGB a hexadecimal [ editar ]

Los valores RGB generalmente se dan en el rango 0-255; si están en el rango 0-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 los modelos portátiles y las calculadoras de software incluidas con la mayoría de los sistemas operativos modernos . También se encuentran disponibles herramientas basadas en web específicas para convertir valores de color.

Nombres de colores HTML [ editar ]

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

Colores básicos [ editar ]

The basic colors are 16 colors defined in the HTML 4.01 specification, ratified in 1999,[8] as follows (names are defined in this context to be case-insensitive):

These 16 were labelled as sRGB and included in the HTML 3.0 specification, which noted they were "the standard 16 colors supported with the Windows VGA palette."[9]

Extended colors[edit]

SVG Version of X11 color names
SVG1.1 named colors with sRGB hex/dec and HSL codes, at UHD (4K) resolution

The extended colors is the result of merging specifications from HTML 4.01, CSS 2.0, SVG 1.0 and CSS3 User Interfaces (CSS3 UI).[6]

Several colors are defined by web browsers. A particular browser may not recognize all of these colors, but as of 2005, all modern, general-use, graphical browsers support the full list of colors. Many of these colors are from the list of X11 color names distributed with the X Window System. These colors were standardized by SVG 1.0, and are accepted by SVG Full user agents. They are not part of SVG Tiny.

The list of colors shipped with the X11 product varies between implementations and clashes with certain of the HTML names such as green. X11 colors are defined as simple RGB (hence, no particular color space), rather than sRGB. This means that the list of colors found in X11 (e.g., in /usr/lib/X11/rgb.txt) should not directly be used to choose colors for the web.[10]

The list of web "X11 colors" from the CSS3 specification, along with their hexadecimal and decimal equivalents, is shown below. Compare the alphabetical lists in the W3C standards. This includes the common synonyms: aqua (HTML4/CSS 1.0 standard name) and cyan (common sRGB name), magenta (common sRGB name) and fuchsia (HTML4/CSS 1.0 standard name), gray (HTML4/CSS 1.0 standard name) and grey.[11][12]

CSS colors[edit]

The Cascading Style Sheets specification defines the same number of named colors as the HTML 4 spec, namely the 16 html colors, and 124 colors from the Netscape X11 color list for a total of 140 names that were recognized by Internet Explorer (IE) 3.0 and Netscape Navigator 3.0.[13] Blooberry.com notes that Opera 2.1 and Safari 1 also included Netscape's expanded list of 140 color names, but later discovered 14 names not included with Opera 3.5 on Windows 98.[14]

In CSS 2.1, the color 'orange' (one of the 140) was added to the section with the 16 HTML4 colors as a 17th color.[15] The CSS3.0 specification did not include orange in the "HTML4 color keywords" section, which was renamed as "Basic color keywords".[16] In the same reference, the "SVG color keywords" section, was renamed "Extended color keywords", after starting out as "X11 color keywords" in an earlier working draft.[17] The working draft for the level 4 color module combines the Basic and Extended sections together in a simple "Named Colors" section.[18]

CSS 2, SVG and CSS 2.1 allow web authors to use system colors, which are color names whose values are taken from the operating system, picking the operating system's highlighted text color, or the background color for tooltip controls. This enables web authors to style their content in line with the operating system of the user agent.[19] The CSS3 color module has deprecated the use of system colors in favor of CSS3 UI System Appearance property,[20][21] which itself was subsequently dropped from CSS3.[22]

The CSS3 specification also introduces HSL color space values to style sheets:[23]

 /* RGB model */ p { color: #F00 } /* #rgb */ p { color: #FF0000 } /* #rrggbb */ p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */ p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */ /* RGB with alpha channel, added to CSS3 */ p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */ /* HSL model, added to CSS3 */ p { color: hsl(0, 100%, 50%) } /* red */ p { color: hsl(120, 100%, 50%) } /* green */ p { color: hsl(120, 100%, 25%) } /* dark green */ p { color: hsl(120, 100%, 75%) } /* light green */ p { color: hsl(120, 50%, 50%) } /* pastel green */ /* HSL model with alpha channel */ p { color: hsla(120, 100%, 50%, 1) } /* green */ p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */ p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

CSS Color 4[edit]

On 21 June 2014, the CSS WG added the color RebeccaPurple to the Editor's Draft of the Colors module level 4, to commemorate Eric Meyer's daughter Rebecca who died on 7 June 2014, her sixth birthday.[24]

CSS also supports the special color transparent, which represents an alpha value of zero; by default, transparent is rendered as an invisible nominal black: rgba(0, 0, 0, 0).[18]

CSS Color 5[edit]


Web-safe colors[edit]

In the mid-1990s, many displays were only capable of displaying 256 colors.[25] These may be dictated by the hardware or changeable by a "color table". When a color is found (e.g., in an image) that is not available, a different one had to be used. This can be done by either using the closest color or by using dithering.

There were various attempts to make a "standard" color palette. A set of colors was needed that could be shown without dithering on 256-color displays; the number 216 was chosen partly because computer operating systems customarily reserved sixteen to twenty colors for their own use; it was also selected because it allows exactly six equally spaced shades of red, green, and blue (6 × 6 × 6 = 216), each from 00 to FF (including both limits).

The list of colors is presented as if it had special properties that render them immune to dithering, but on 256-color displays applications can actually set a palette of any selection of colors that they choose, dithering the rest. These colors were chosen specifically because they matched the palettes selected by various browser applications. There were not very different palettes in use in different browsers.[citation needed]

"Web-safe" colors had a flaw in that, on systems such as X11 where the palette is shared between applications, smaller color cubes (5×5×5 or 4×4×4) were allocated by browsers—the "web-safe" colors would dither on such systems. Different results were obtained by providing an image with a larger range of colors and allowing the browser to quantize the color space if needed, rather than suffer the quality loss of a double quantization.

Through the 2000s, use of 256-color displays in personal computers dropped sharply in favour of 24-bit (TrueColor) displays,[26] and the use of "web-safe" colors has fallen into practical disuse.

The "web-safe" colors do not all have standard names, but each can be specified by an RGB triplet: each component (red, green, and blue) takes one of the six values from the following table (out of the 256 possible values available for each component in full 24-bit color).

The following table shows all of the "web-safe" colors. One shortcoming of the web-safe palette is its small range of light colors for webpage backgrounds, whereas the intensities at the low end of the range, such as the two darkest, are similar to each other, making them hard to distinguish. Values flanked by "*" (asterisk) are part of the "really safe palette;" see Safest web colors, below.

Color table[edit]

Each color code listed is a shorthand for the RGB value. For example, code 609 is equivalent to RGB code 102-0-153 or HEX code #660099.


Safest web colors[edit]

Designers were encouraged to stick to these 216 "web-safe" colors in their websites because there were a lot of 8-bit color displays when the 216-color palette was developed. David Lehn and Hadley Stern discovered that only 22 of the 216 colors in the web-safe palette are reliably displayed without inconsistent remapping on 16-bit computer displays. They called these 22 colors "the really safe palette"; it consists largely of shades of green, yellow, and blue.[27][28]


Accessibility[edit]

Color selection[edit]

Some browsers and devices do not support colors. For these displays or blind and colorblind users, Web content depending on colors can be unusable or difficult to use.

Either no colors should be specified (to invoke the browser's default colors), or both the background and all foreground colors (such as the colors of plain text, unvisited links, hovered links, active links, and visited links) should be specified to avoid black on black or white on white effects.[29]

Color contrast[edit]

The Web Content Accessibility Guidelines recommend a contrast ratio of at least 4.5:1 between the relative luminance of text and its background color[30] or at least 3:1 for large text. Enhanced accessibility requires contrast ratios greater than 7:1.

However, addressing accessibility concerns is not simply a matter of increasing the contrast ratio. As a report to the Web Accessibility Initiative indicates,[31] dyslexic readers are better served by contrast ratios below the maximum. The recommendations they refer to of off-black (0x0A0A0A) on off-white (0xFFFFE5) and black (0x000000) on creme (0xFAFAC8) have contrast ratios of 11.7:1 and 20.3:1 respectively. Among their other color pairs, brown (0x282800) on dark green (0xA0A000) has a contrast ratio of 3.24:1, which is less than the WCAG recommendation, dark brown (0x1E1E00) on light green (0xB9B900) has a contrast ratio of 4.54:1 and blue (0x00007D) on yellow (0xFFFF00) has a contrast ratio of 11.4:1. Notice that the colors named in the report use different color values than the web colors of the same name.

See also[edit]

  • Adobe RGB color space
  • CIE 1931 XYZ color space
  • CIE L*a*b* color space
  • Color tool
  • List of color palettes
  • List of colors
  • List of colors by shade
  • ProPhoto RGB
  • RGB color space
  • scRGB
  • Wide-gamut RGB color space

References[edit]

  1. ^ Niederst Robbins, Jennifer (February 2006). "Appendix D: Specifying Color". Web Design in a Nutshell. O'Reilly. p. 830. ISBN 978-0-596-00987-8.
  2. ^ York, Richard. Beginning CSS, pp. 71–72.
  3. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "CSS Color Module Level 3". W3C. section 4.2.1. RGB color values.
  4. ^ Digital Color Imaging Handbook By Gaurav Sharma. ISBN 0-8493-0900-X
  5. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.2.1. RGB color values". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  6. ^ a b "CSS Color Module Level 3". W3c. Retrieved 19 July 2020.
  7. ^ Powell, Thomas A. (2010). HTML & CSS: The Complete Reference, Fifth Edition. New York: McGraw-Hill. p. 765. ISBN 9780071741705.
  8. ^ "HTML 4.01 Specification section 6.5 "Colors"". W3.org. Retrieved 8 July 2013.
  9. ^ "HTML 3.2 Specification "The BODY element"". W3.org. Retrieved 8 July 2013.
  10. ^ "Public discussion on SVG mailing list Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt". Lists.w3.org. Retrieved 8 July 2013.
  11. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.3. Extended color keywords". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  12. ^ "W3C TR SVG 1.0, recognized color keyword names". W3.org. 16 August 2011. Retrieved 1 February 2019.
  13. ^ "The X11 Color Set". Retrieved 6 July 2014.
  14. ^ Brian Wilson. "Colors in HTML and CSS". Retrieved 6 July 2014.
  15. ^ "CSS 2.1 Specification: Syntax and basic data types: Colors". 8 September 2009. Retrieved 21 December 2009.
  16. ^ "CSS Color Module Level 3 – Proposed Recommendation - 11. Changes". 28 October 2010. Retrieved 6 July 2014.
  17. ^ "CSS Color Module Level 3 – Working Draft". 18 April 2002. Retrieved 6 July 2014.
  18. ^ a b CSS Color Module Level 4 – Editor’s Draft, 26 June 2014
  19. ^ "User interface – System colors". W3.org. Retrieved 8 July 2013.
  20. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.5.1. CSS2 system colors". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  21. ^ "CSS3 Basic User Interface Module, W3C Candidate Recommendation 11 May 2004: System Appearance". W3.org. Retrieved 8 July 2013.
  22. ^ Çelik, Tantek, ed. (17 January 2012). "List of substantial changes". CSS Basic User Interface Module Level 3. W3C. Retrieved 19 March 2013. System Appearance has been dropped, including appearance values & property, and system fonts / extension of the 'font' property shorthand.
  23. ^ Pemberton, Steven; Pettit, Brad (7 June 2011). Çelik, Tantek; Lilley, Chris; Baron, L. David (eds.). "4.2.4. HSL color values". CSS Color Module Level 3. W3C. Retrieved 19 March 2013.
  24. ^ Glazman, Daniel (21 June 2014). "Re: [CfC] adding 'rebeccapurple' to CSS Color Level 4". Post to www-style mailing list. W3C. Retrieved 24 June 2014.
  25. ^ Jenkins, Sue (27 December 2012). Web Design All-in-One For Dummies. John Wiley & Sons. ISBN 9781118404119.
  26. ^ "Browser Display Statistics". W3schools.com. Retrieved 8 July 2013.
  27. ^ "Death of the Websafe Color Palette?". Physics.ohio-state.edu. Retrieved 8 July 2013.
  28. ^ "Web Color Reference - HTML with Style | 4 | WebReference". www.webreference.com. Retrieved 5 January 2016.
  29. ^ "If You Pick One Color, Pick Them All". W3.org. Retrieved 8 July 2013.
  30. ^ WCAG 2.0 guideline 1.4
  31. ^ Optimal Colors to Improve Readability for People with Dyslexia

External links[edit]

  • CSS color value on MDN Web Docs
  • CSS2.1 Color Specification
  • Listing of Web Safe Colors
  • Web colors at Curlie