140 CSS3 Web Colours
=== by Bob Sutherland ===
Every colour chart I have seen of the 140 named web colours of Cascading Style Sheets version 3 (CSS3) lists the colours in alphabetical order. Why alphabetical order?
Instead of focussing on the names I have tried focussing on the hexadecimal numbers for the RGB (red-green-blue) light intensities. Hopefully you will find my numerically arranged colour charts on this page a bit more useful than an alphabetical list.
If you look at the title above each chart you will see a hint based on the RGB values as to why I grouped those colours together in that particular chart.
I have listed each of the 140 named colours of CSS3 only once somewhere on this page.
All 3 RGB Values are Equal
Chart 111 - Grey Scale
| #ffffff - white |
#f5f5f5 - whitesmoke |
| #dcdcdc - gainsboro |
#d3d3d3 - lightgray |
| #c0c0c0 - silver |
#a9a9a9 - darkgray |
| #808080 - gray |
#696969 - dimgray |
| #000000 - black |
|
When 2 RGB Values are Equal - Original HTML Colours
The original 16 named and standardized colours in HTML were adopted into the CSS3 list. Twelve of the colours are here and four of the colours (white, silver, grey, black) are shown in the grey scale chart up above.
Chart 80 + 00
| #800000 - maroon |
#800080 - purple |
| #008000 - green |
#808000 - olive |
| #000080 - navy |
#008080 - teal |
Chart FF + 00
| #ff0000 - red |
#00ff00 - lime |
| #0000ff - blue |
#ffff00 - yellow |
4 Names = 2 Colours
| #00ffff - aqua |
#00ffff - cyan |
| #ff00ff - fuchsia |
#ff00ff - magenta |
Aqua and Cyan are two different names for the same colour #00ffff.
Fuchsia and Magenta are two different names for the same colour #ff00ff.
When 2 RGB Values are Equal
The chart titles indicate the pattern of the RGB (red-green-blue) light intensities. A 2 represents a brighter light intensity than a 1.
Chart 122
| #f0ffff - azure |
|
| #e0ffff - lightcyan |
#afeeee - paleturquoise |
| #008b8b - darkcyan |
#2f4f4f - darkslategray |
Chart 112
| #f8f8ff - ghostwhite |
|
| #e6e6fa - lavener |
#0000cd - mediumblue |
| #00008b - darkblue |
#191970 - midnightblue |
Chart 221
| #fffff0 - ivory |
#ffffe0 - lightyellow |
| #fafad2 - lightgoldenrodyellow |
#f5f5dc - beige |
Chart 211
| #fffafa - snow |
|
| #f08080 - lightcoral |
#cd5c5c - indianred |
| #bc8f8f - rosybrown |
#b22222 - firebrick |
| #a52a2a - brown |
#8b0000 - darkred |
Chart 212
| #ee82ee - violet |
#dda0dd - plum |
| #d8bfd8 - thistle |
#8b008b - darkmagenta |
Chart 121
| #f0fff0 - honeydew |
|
| #98fb98 - palegreen |
#90ee90 - lightgreen |
| #32cd32 - limegreen |
#8fbc8f - darkseagreen |
| #228b22 - forestgreen |
#006400 - darkgreen |
When the RGB Values are Different
The chart titles indicate the pattern of the RGB (red-green-blue) light intensities. A 3 represents a brighter light intensity than a 2, while a 2 is brighter than a 1.
Chart 312
| #fff0f5 - lavenderblush |
|
| #ffc0cb - pink |
#ffb6c1 - lightpink |
| #ff69b4 - hotpink |
#ff1493 - deeppink |
| #dc143c - crimson |
#db7093 - palevioletred |
| #da70d6 - orchid |
#c71585 - mediumvioletred |
Chart 231
| #adff2f - greenyellow |
#7fff00 - chartreuse |
| #7cfc00 - lawngreen |
#9acd32 - yellowgreen |
| #6b8e23 - olivedrab |
#556b2f - darkolivegreen |
Chart 132
| #f5fffa - mintcream |
#7fffd4 - aquamarine |
| #00ff7f - springgreen |
#00fa9a - mediumspringgreen |
| #40e0d0 - turquoise |
#48d1cc - mediumturquoise |
| #66cdaa - mediumaquamarine |
#3cb371 - mediumseagreen |
| #20b2aa - lightseagreen |
#2e8b57 - seagreen |
Chart 213
| #7b68ee - mediumslateblue |
#8a2be2 - blueviolet |
| #9370db - mediumpurple |
#ba55d3 - mediumorchid |
| #9400d3 - darkviolet |
#655acd - slateblue |
| #9932cc - darkorchid |
#483d8b - darkslateblue |
| #4b0082 - indigo |
|
Chart 123
| #f0f8ff - aliceblue |
|
| #00bfff - deepseablue |
#1e90ff - dodgerblue |
| #87cefa - lightskyblue |
#6495ed - cornflowerblue |
| #b0e0e6 - powderblue |
#add8e6 - lightblue |
| #87ceeb - skyblue |
#4169e1 - royalblue |
| #b0c4de - lightsteelblue |
#00ced1 - darkturquoise |
| #4682b4 - steelblue |
#5f9ea0 - cadetblue |
| #778899 - lightslategray |
#708090 - slategray |
Looking at how many colours there are in the following chart I decided to break Chart 321 up into three separate parts.
Notice that 36 out of the 138 colours on this web page are in Chart 321. (That is 26%!) Can you explain why?
Chart 321a
| #fffaf0 - floralwhite |
#fffacd - lemonchiffon |
| #fff8dc - cornsilk |
#fff5ee - seashell |
| #ffefd5 - papayawhip |
#ffebcd - blanchedalmond |
| #ffe4e1 - mistyrose |
#ffe4c4 - bisque |
| #ffe4b5 - moccasin |
#ffdead - navajowhite |
| #ffdab9 - peachpuff |
|
Chart 321b
| #ffd700 - gold |
#ffa500 - orange |
| #ffa07a - lightsalmon |
#ff8c00 - darkorange |
| #ff7f50 - coral |
#ff6347 - tomato |
| #ff4500 - orangered |
|
Chart 321c
| #fdf5e6 - oldlace |
#faf0e6 - linen |
| #faebd7 - antiquewhite |
#fa8072 - salmon |
| #f5deb3 - wheat |
#f4a460 - sandybrown |
| #f0e68c - khaki |
#eee8aa - palegoldenrod |
| #e9967a - darksalmon |
#deb887 - burlywood |
| #daa520 - goldenrod |
#d2b48c - tan |
| #d2691e - chocolate |
#cd853f - peru |
| #bdb76b - darkkhaki |
#b8860b - darkgoldenrod |
| #a0522d - sienna |
#8b4513 - saddlebrown |
