Web colors

An abbreviated, three (hexadecimal)-digit or four-digit form can be used,[5] but can cause errors if software or maintenance scripts are only expecting the long form. Expanding this form to the six-digit form is as simple as repeating each digit: 09C becomes 0099CC as presented on the following CSS example:

.threedigit { color: #09C;    }
.sixdigit   { color: #0099CC; } /* same color as above */

This shorthand form reduces the palette to 4,096 colors, equivalent of 12-bit color as opposed to 24-bit color using the whole six-digit form (16,777,216 colors). This limitation is sufficient for many text-based documents.

RGB values are usually given in the 0–255 range; if they are in the 0–1 range, the values are multiplied by 255 before conversion. This number divided by sixteen (integer division; ignoring any remainder) gives the first hexadecimal digit (between 0 and F, where the letters A to F represent the numbers 10 to 15. See hexadecimal for more details). The remainder gives the second hexadecimal digit. For instance, the RGB value 201 divides into 12 groups of 16, thus the first digit is C. A remainder of nine gives the hexadecimal number C9. This process is repeated for each of the three color values.

Conversion between number bases is a common feature of calculators, including both hand-held models and the software calculators bundled with most modern operating systems. Web-based tools specifically for converting color values are also available.

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]

SVG Version of X11 color names

SVG1.1 named colors with sRGB hex/dec and HSL codes, at UHD (4K) resolution

Extended colors are 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), fuchsia (HTML4/CSS 1.0 standard name) and magenta (common sRGB name), gray (HTML4/CSS 1.0 standard name) and grey.[11][12]

Level 4 of the CSS Color specification introduced several new CSS color formats.[24]

Besides new ways to write colors, it also introduces the concept of mixing colors in a non-sRGB color space, a first step towards fixing a well-known issue in color gradients. Some sections explaining color theory and common operations like gamut mapping are also added to aid implementation.[24]

CSS Color 4 introduces several different formats for device independent color that can display the entirety of visible color (in a capable screen), including:[25]

• Lab and LCH
• OKLab and OKLCH (preferred over Lab/LCH)[24]^{: §§9.2–3}
• XYZ (D50 or D65 [default])

A number of RGB spaces with gamuts that are wider than sRGB are also introduced through the new color() function:[25]

• Display P3
• Prophoto
• REC.2020
• Adobe 1998 RGB

A linearized variant of sRGB is also defined for color mixing.[24]

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.[26]

CSS4 also introduces the HWB color model as an alternative to HSL/HSV.[18]

The draft CSS Color 5[27] specification introduces syntax for mixing and manipulating existing colors, including:

• A color-mix() function for mixing colors
• Relative color syntax for manipulating components of an existing color

Custom color spaces are also supported via ICC profiles. This allows the use of CMYK on web pages.[27]

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.

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 cyan.[30][31]

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.[32]

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[33] 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,[34] dyslexic readers are better served by contrast ratios below the maximum. The recommendations they refer to of off-black (#0A0A0A) on off-white (#FFFFE5) and black (#000000) on creme (#FAFAC8) have contrast ratios of 11.7:1 and 20.3:1 respectively. Among their other color pairs, brown (#282800) on dark green (#A0A000) has a contrast ratio of 3.24:1, which is less than the WCAG recommendation, dark brown (#1E1E00) on light green (#B9B900) has a contrast ratio of 4.54:1 and blue (#00007D) on yellow (#FFFF00) has a contrast ratio of 11.4:1. The colors named in the report use different color values than the web colors of the same name.