Editing Web colors (section)

==Web-safe colors==
{{Color depth}}

In the mid-1990s, many displays were only capable of displaying 256 colors,<ref>{{Cite book|url=https://books.google.com/books?id=50QM5XrxFzQC&q=In+the+early+days+of+computing%2C+many+displays+were+only+capable+of+displaying+256+colors&pg=PT195|title=Web Design All-in-One For Dummies|last=Jenkins|first=Sue|date=2012-12-27|publisher=John Wiley & Sons|isbn=9781118404119|language=en}}</ref> dictated by the hardware or changeable by a "color table". When a color was found (e.g., in an image) that was not available, a different one had to be used. This was done by either using the closest color or by using [[dither]]ing.

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 allowed 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 was presented as if it had special properties that render it immune to dithering, but on 256-color displays applications could actually set a palette of any selection of colors that they chose, 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|date=May 2011|reason=Another editor left a comment stating, "not really, it was pretty much a disaster" - Why? Please clarify}}

"Web-safe" colors had a flaw in that, on systems such as [[X Window System|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 [[Color quantization|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 ([[24-bit color|TrueColor]]) displays,<ref>{{cite web|url=https://www.w3schools.com/browsers/browsers_display.asp |title=Browser Display Statistics |publisher=W3Schools |access-date=8 July 2013}}</ref> 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).

{| class="wikitable" style="text-align: center;"
|+ 6 shades of each color
! scope="col" | Key
! scope="col" | Hex
! scope="col" | Decimal
! scope="col" | Fraction
|-
| 0
| 00
| 0
| style="text-align: left;" | 0
|-
| 3
| 33
| 51
| style="text-align: left;" | 0.2
|-
| 6
| 66
| 102
| style="text-align: left;" | 0.4
|-
| 9
| 99
| 153
| style="text-align: left;" | 0.6
|-
| C (12)
| CC
| 204
| style="text-align: left;" | 0.8
|-
| F (15)
| FF
| 255
| style="text-align: left;" | 1
|}

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|Safest web colors]], below.

===Color table===
{{Web safe colors}}

===Safest web colors===
Designers were encouraged{{By whom|date=February 2024}} 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 [[highcolour|16-bit computer displays]]. They called these 22 colors "the really safe palette"; it consists largely of shades of green, yellow, and cyan.<ref>{{cite web |url=https://www.asc.ohio-state.edu/wilkins.5/color/websafecolors.html |title=Death of the Websafe Color Palette? |publisher=asc.ohio-state.edu |access-date=3 March 2021 |archive-date=3 March 2021 |archive-url=https://web.archive.org/web/20210303202304/https://www.asc.ohio-state.edu/wilkins.5/color/websafecolors.html |url-status=dead |first1=David |last1=Lehn |first2=Hadley |last2=Stern}}</ref><ref>{{cite web|title = Web Color Reference - HTML with Style {{!}} 4 |url = http://www.webreference.com/html/reference/color/websafe.html|website = WebReference |first=Stephanos |last=Piperoglou |date=December 13, 2000 |access-date = 2016-01-05|archive-date = 23 November 2016|archive-url = https://web.archive.org/web/20161123191645/http://www.webreference.com/html/reference/color/websafe.html|url-status = dead}}</ref>

{| class="wikitable mw-no-invert" style="width:80%; text-align:center; margin: 0 auto;"
|+ Safest web colors
|- style="color: light-dark(black,white);"
! {{diagonal split header|{{nowrap|-GB}}|{{nowrap|R--}}}}
!0
!3
!6
!9
!C
!F
|-
!|00
| style="width:16%; background: #000; color: white" | *000*
|
|
| style="width:16%;" |
|
| style="width:16%; background: #F00; color: white" | *F00*
|-
!|03
| style="width:16%; background: #003; color: white" | *003*
|
|
|
|
| style="width:16%; background: #F03; color: white" | *F03*
|-
!|06
|
|
|
|
|
|
|-
!|09
|
|
|
|
|
|
|-
!|0C
|
|
|
|
|
|
|-
!|0F
| style="background: #00F; color: white" | *00F*
|
|
|
|
| style="background: #F0F; color: white" | *F0F*
|- style="color: black;"
! ⋮
| colspan="6"|⋮
|- style="color: black;"
!F0
| style="background: #0F0; color: black" | *0F0*
|
| style="background: #6F0; color: black" | *6F0*
|
|
| style="background: #FF0; color: black" | *FF0*
|- style="color: black;"
!F3
|
| style="background: #3F3; color: black" | *3F3*
| style="background: #6F3; color: black" | *6F3*
|
|
| style=" background: #FF3; color: black" | *FF3*
|- style="color: black;"
!F6
| style="background: #0F6; color: black" | *0F6*
| style="background: #3F6; color: black" | *3F6*
|
|
| style="background: #CF6; color: black" | *CF6*
| style="background: #FF6; color: black" | *FF6*
|- style="color:black"
!F9
|
|
|
|
|
|
|- style="color: black;"
!FC
| style="background: #0FC; color: black" | *0FC*
| style="background: #3FC; color: black" | *3FC*
|
|
|
|
|- style="color: black;"
!FF
| style="background: #0FF; color: black" | *0FF*
| style="background: #3FF; color: black" | *3FF*
| style="background: #6FF; color: black" | *6FF*
|
|
| style="background: #FFF;" | *FFF*
|}