A (CSS) Horse of a Different Color - Part 1 | 3
A (CSS) Horse of a Different Color - Part 1
HSL Colors and their Equivalents
HSL (Hue Saturation Light) is a new way of specifying colors
on the Web currently being considered by the World Wide Web Consortium in their
CSS3 color module*.
It is arguably a more intuitive way of specifying colors than using hex RGB
values, since HSL values can easily be visualized as points along a progressive
color wheel.
On this color wheel the reds can be found at around 0 degrees, greens at 120 degrees and blues at 240 degrees. Both saturation and lightness are represented by percentage values: 100% saturation is the "full" value for a given color, whereas 0% represents the grayest value for that color. Then there is the "light" value: 100% lightness is bright, sometimes near-white, 50% is "normal" and 0% lightness is very dark, sometimes near-black depending on the color.
This table is ordered by the HSL values, preceded by their equivalent color names, hex RGB values and decimal values. It is followed by a sample representation of the color. This way of specifying color reveals similarities not easily visualized if you are thinking about hex or decimal values. For example, #7CFC00 ("LawnGreen") and #7FFF00 ("Chartreuse") are revealed to be only a single degree of separation apart -- 90deg,100%,99% and 90deg,100%,100% -- when represented in HSL.
* At the time of writing, the CSS 3 color module has not been formally adopted by the World Wide Web Consortium.
| Color Name | Hex RGB | Decimal | HSL | Sample |
|---|---|---|---|---|
| Black | #000000 | 0,0,0 | 0deg,0%,0% | |
| DimGray | #696969 | 105,105,105 | 0deg,0%,41% | |
| Gray | #808080 | 128,128,128 | 0deg,0%,50% | |
| DarkGray | #A9A9A9 | 169,169,169 | 0deg,0%,66% | |
| Silver | #C0C0C0 | 192,192,192 | 0deg,0%,75% | |
| LightGrey | #D3D3D3 | 211,211,211 | 0deg,0%,83% | |
| Gainsboro | #DCDCDC | 220,220,220 | 0deg,0%,86% | |
| WhiteSmoke | #F5F5F5 | 245,245,245 | 0deg,0%,96% | |
| White | #FFFFFF | 255,255,255 | 0deg,0%,100% | |
| Snow | #FFFAFA | 255,250,250 | 0deg,2%,100% | |
| RosyBrown | #BC8F8F | 188,143,143 | 0deg,24%,74% | |
| BurlyWood | #DEB887 | 222,184,135 | 0deg,39%,87% | |
| LightCoral | #F08080 | 240,128,128 | 0deg,47%,94% | |
| IndianRed | #CD5C5C | 205,92,92 | 0deg,55%,80% | |
| Brown | #A52A2A | 165,42,42 | 0deg,75%,65% | |
| FireBrick | #B22222 | 178,34,34 | 0deg,81%,70% | |
| Maroon | #800000 | 128,0,0 | 0deg,100%,50% | |
| DarkRed | #8B0000 | 139,0,0 | 0deg,100%,55% | |
| Red | #FF0000 | 255,0,0 | 0deg,100%,100% | |
| MistyRose | #FFE4E1 | 255,228,225 | 6deg,12%,100% | |
| Salmon | #FA8072 | 250,128,114 | 6deg,54%,98% | |
| Tomato | #FF6347 | 255,99,71 | 9deg,72%,100% | |
| DarkSalmon | #E9967A | 233,150,122 | 15deg,48%,91% | |
| Coral | #FF7F50 | 255,127,80 | 16deg,69%,100% | |
| OrangeRed | #FF4500 | 255,69,0 | 16deg,100%,100% | |
| LightSalmon | #FFA07A | 255,160,122 | 17deg,52%,100% | |
| Sienna | #A0522D | 160,82,45 | 19deg,72%,63% | |
| Seashell | #FFF5EE | 255,245,238 | 25deg,7%,100% | |
| SaddleBrown | #8B4513 | 139,69,19 | 25deg,86%,55% | |
| Chocolate | #D2691E | 210,105,30 | 25deg,86%,82% | |
| PeachPuff | #FFDAB9 | 255,218,185 | 28deg,27%,100% | |
| SandyBrown | #F4A460 | 244,164,96 | 28deg,61%,96% | |
| Linen | #FAF0E6 | 250,240,230 | 30deg,8%,98% | |
| Peru | #CD853F | 205,133,63 | 30deg,69%,80% | |
| Bisque | #FFE4C4 | 255,228,196 | 33deg,23%,100% | |
| DarkOrange | #FF8C00 | 255,140,0 | 33deg,100%,100% | |
| AntiqueWhite | #FAEBD7 | 250,235,215 | 34deg,14%,98% | |
| Tan | #D2B48C | 210,180,140 | 34deg,33%,82% | |
| BlanchedAlmond | #FFEBCD | 255,235,205 | 36deg,20%,100% | |
| NavajoWhite | #FFDEAD | 255,222,173 | 36deg,32%,100% | |
| PapayaWhip | #FFEFD5 | 255,239,213 | 37deg,16%,100% | |
| Moccasin | #FFE4B5 | 255,228,181 | 38deg,29%,100% | |
| OldLace | #FDF5E6 | 253,245,230 | 39deg,9%,99% | |
| Wheat | #F5DEB3 | 245,222,179 | 39deg,27%,96% | |
| Orange | #FFA500 | 255,165,0 | 39deg,100%,100% | |
| FloralWhite | #FFFAF0 | 255,250,240 | 40deg,6%,100% | |
| Goldenrod | #DAA520 | 218,165,32 | 43deg,85%,85% | |
| DarkGoldenrod | #B8860B | 184,134,11 | 43deg,94%,72% | |
| Cornsilk | #FFF8DC | 255,248,220 | 48deg,14%,100% | |
| Gold | #FFD700 | 255,215,0 | 51deg,100%,100% | |
| LemonChiffon | #FFFACD | 255,250,205 | 54deg,20%,100% | |
| Khaki | #F0E68C | 240,230,140 | 54deg,42%,94% | |
| PaleGoldenrod | #EEE8AA | 238,232,170 | 55deg,29%,93% | |
| DarkKhaki | #BDB76B | 189,183,107 | 56deg,43%,74% | |
| Ivory | #FFFFF0 | 255,255,240 | 60deg,6%,100% | |
| Beige | #F5F5DC | 245,245,220 | 60deg,10%,96% | |
| LightYellow | #FFFFE0 | 255,255,224 | 60deg,12%,100% | |
| LightGoldenrodYellow | #FAFAD2 | 250,250,210 | 60deg,16%,98% | |
| Olive | #808000 | 128,128,0 | 60deg,100%,50% | |
| Yellow | #FFFF00 | 255,255,0 | 60deg,100%,100% | |
| OliveDrab | #6B8E23 | 107,142,35 | 80deg,75%,56% | |
| YellowGreen | #9ACD32 | 154,205,50 | 80deg,76%,80% | |
| DarkOliveGreen | #556B2F | 85,107,47 | 82deg,56%,42% | |
| GreenYellow | #ADFF2F | 173,255,47 | 84deg,82%,100% | |
| LawnGreen | #7CFC00 | 124,252,0 | 90deg,100%,99% | |
| Chartreuse | #7FFF00 | 127,255,0 | 90deg,100%,100% | |
| Honeydew | #F0FFF0 | 240,255,240 | 120deg,6%,100% | |
| DarkSeaGreen | #8FBC8F | 143,188,143 | 120deg,24%,74% | |
| LightGreen | #90EE90 | 144,238,144 | 120deg,39%,93% | |
| PaleGreen | #98FB98 | 152,251,152 | 120deg,39%,98% | |
| ForestGreen | #228B22 | 34,139,34 | 120deg,76%,55% | |
| LimeGreen | #32CD32 | 50,205,50 | 120deg,76%,80% | |
| DarkGreen | #006400 | 0,100,0 | 120deg,100%,39% | |
| Green | #008000 | 0,128,0 | 120deg,100%,50% | |
| Lime | #00FF00 | 0,255,0 | 120deg,100%,100% | |
| SeaGreen | #2E8B57 | 46,139,87 | 146deg,67%,55% | |
| MediumSeaGreen | #3CB371 | 60,179,113 | 147deg,66%,70% | |
| MintCream | #F5FFFA | 245,255,250 | 150deg,4%,100% | |
| SpringGreen | #00FF7F | 0,255,127 | 150deg,100%,100% | |
| MediumSpringGreen | #00FA9A | 0,250,154 | 157deg,100%,98% | |
| MediumAquamarine | #66CDAA | 102,205,170 | 160deg,50%,80% | |
| Aquamarine | #7FFFD4 | 127,255,212 | 160deg,50%,100% | |
| Turquoise | #40E0D0 | 64,224,208 | 174deg,71%,88% | |
| LightSeaGreen | #20B2AA | 32,178,170 | 177deg,82%,70% | |
| MediumTurquoise | #48D1CC | 72,209,204 | 178deg,66%,82% | |
| Azure | #F0FFFF | 240,255,255 | 180deg,6%,100% | |
| LightCyan | #E0FFFF | 224,255,255 | 180deg,12%,100% | |
| PaleTurquoise | #AFEEEE | 175,238,238 | 180deg,26%,93% | |
| DarkCyan | #008B8B | 0,139,139 | 180deg,100%,55% | |
| Aqua | #00FFFF | 0,255,255 | 180deg,100%,100% | |
| Cyan | #00FFFF | 0,255,255 | 180deg,100%,100% | |
| DarkSlateGray | #2F4F4F | 47,79,79 | 180deg,41%,31% | |
| Teal | #008080 | 0,128,128 | 180deg,100%,50% | |
| DarkTurquoise | #00CED1 | 0,206,209 | 181deg,100%,82% | |
| CadetBlue | #5F9EA0 | 95,158,160 | 182deg,41%,63% | |
| PowderBlue | #B0E0E6 | 176,224,230 | 187deg,23%,90% | |
| LightBlue | #ADD8E6 | 173,216,230 | 195deg,25%,90% | |
| DeepSkyBlue | #00BFFF | 0,191,255 | 195deg,100%,100% | |
| SkyBlue | #87CEEB | 135,206,235 | 197deg,43%,92% | |
| LightSkyBlue | #87CEFA | 135,206,250 | 203deg,46%,98% | |
| SteelBlue | #4682B4 | 70,130,180 | 207deg,61%,71% | |
| AliceBlue | #F0F8FF | 240,248,255 | 208deg,6%,100% | |
| SlateGray | #708090 | 112,128,144 | 210deg,22%,56% | |
| LightSlateGray | #778899 | 119,136,153 | 210deg,22%,60% | |
| DodgerBlue | #1E90FF | 30,144,255 | 210deg,88%,100% | |
| LightSteelBlue | #B0C4DE | 176,196,222 | 214deg,21%,87% | |
| CornflowerBlue | #6495ED | 100,149,237 | 219deg,58%,93% | |
| RoyalBlue | #4169E1 | 65,105,225 | 225deg,71%,88% | |
| GhostWhite | #F8F8FF | 248,248,255 | 240deg,3%,100% | |
| Lavender | #E6E6FA | 230,230,250 | 240deg,8%,98% | |
| MidnightBlue | #191970 | 25,25,112 | 240deg,78%,44% | |
| Navy | #000080 | 0,0,128 | 240deg,100%,50% | |
| DarkBlue | #00008B | 0,0,139 | 240deg,100%,55% | |
| MediumBlue | #0000CD | 0,0,205 | 240deg,100%,80% | |
| Blue | #0000FF | 0,0,255 | 240deg,100%,100% | |
| DarkSlateBlue | #483D8B | 72,61,139 | 248deg,56%,55% | |
| SlateBlue | #6A5ACD | 106,90,205 | 248deg,56%,80% | |
| MediumSlateBlue | #7B68EE | 123,104,238 | 249deg,56%,93% | |
| MediumPurple | #9370DB | 147,112,219 | 260deg,49%,86% | |
| BlueViolet | #8A2BE2 | 138,43,226 | 271deg,81%,89% | |
| Indigo | #4B0082 | 75,0,130 | 275deg,100%,51% | |
| DarkOrchid | #9932CC | 153,50,204 | 280deg,75%,80% | |
| DarkViolet | #9400D3 | 148,0,211 | 282deg,100%,83% | |
| MediumOrchid | #BA55D3 | 186,85,211 | 288deg,60%,83% | |
| Thistle | #D8BFD8 | 216,191,216 | 300deg,12%,85% | |
| Plum | #DDA0DD | 221,160,221 | 300deg,28%,87% | |
| Violet | #EE82EE | 238,130,238 | 300deg,45%,93% | |
| Purple | #800080 | 128,0,128 | 300deg,100%,50% | |
| DarkMagenta | #8B008B | 139,0,139 | 300deg,100%,55% | |
| Magenta | #FF00FF | 255,0,255 | 300deg,100%,100% | |
| Fuchsia | #FF00FF | 255,0,255 | 300deg,100%,100% | |
| Orchid | #DA70D6 | 218,112,214 | 302deg,49%,85% | |
| MediumVioletRed | #C71585 | 199,21,133 | 322deg,89%,278% | |
| DeepPink | #FF1493 | 255,20,147 | 328deg,92%,100% | |
| HotPink | #FF69B4 | 255,105,180 | 330deg,59%,100% | |
| LavenderBlush | #FFF0F5 | 255,240,245 | 340deg,6%,100% | |
| PaleVioletRed | #DB7093 | 219,112,147 | 340deg,49%,86% | |
| Crimson | #DC143C | 220,20,60 | 348deg,91%,86% | |
| Pink | #FFC0CB | 255,192,203 | 350deg,25%,100% | |
| LightPink | #FFB6C1 | 255,182,193 | 351deg,29%,100% |
Compiled by Keith Schengili-Roberts
Created: March 27, 2003
Revised: June 17, 2003
URL: http://webreference.com/programming/css_color/1
Find a programming school near you
