CSS3 adds numerical hue-saturation-lightness (HSL) colors as a more intuitive complement to numerical RGB colors. RGB colors are hardware-oriented. They reflect the fact that CRT monitors displayed colors based on red, green and blue. However, RGB is not the way humans tend to see colors.
RGB is non-intuitive.
Designers generally define colors based on the hue, saturation and brightness or lightness of a color. HSL defines colors this way: H=hue, S=saturation, L=lightness.
The Hue is represented as an angle of the color circle (i.e. the rainbow represented in a circle), with the ‘degrees’ of the circle pointing to different hues. HSL hues are defined as integers representing the degrees or angles of this circle with red=0 (red=360 too), green=120, and blue=240. The saturation and lightness are represented as percentages. For saturation, 100% is full saturation, and 0% is a shade of gray. For lightness, 0% lightness is black, 100% lightness is white, and 50% lightness is “normal”.
Syntax:
hsl(hue[0-360], saturation[%], lightness[%]);
When it comes to black, white and grey, since there is no saturation (or, in the case of white, full saturation), we could have used any value for the hue.
| Named Color | Hex | RGB | HSL |
|---|---|---|---|
| black | #000000 | rgb(0,0,0) | hsl(0, 0%, 0%) |
| dimgray / dimgrey | #696969 | rgb(105,105,105) | hsl(0, 0%, 41%) |
| gray / grey | #808080 | rgb(128,128,128) | hsl(0, 0%, 50%) |
| darkgray / darkgrey | #A9A9A9 | rgb(169,169,169) | hsl(0, 0%, 66%) |
| silver | #C0C0C0 | rgb(192,192,192) | hsl(0, 0%, 75%) |
| lightgray / lightgrey | #D3D3D3 | rgb(211,211,211) | hsl(0, 0%, 83%) |
| gainsboro | #DCDCDC | rgb(220,220,220) | hsl(0, 0%, 86%) |
| whitesmoke | #F5F5F5 | rgb(245,245,245) | hsl(0, 0%, 96%) |
| white | #FFFFFF | rgb(255,255,255) | hsl(0, 100%, 100%) |
Table 1: The HSL, RGB and Hex values of the named grey colors
The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the lightness/darkness, and saturation).
Below are the rest of the named colors in order of hue.
| Named Color | Hex | RGB | HSL |
|---|---|---|---|
| maroon | #800000 | rgb(128,0,0) | hsl(0, 100%, 25%) |
| darkred | #8B0000 | rgb(139,0,0) | hsl(0, 100%, 27%) |
| red | #FF0000 | rgb(255,0,0) | hsl(0, 100%, 50%) |
| snow | #FFFAFA | rgb(255,250,250) | hsl(0, 100%, 99%) |
| rosybrown | #BC8F8F | rgb(188,143,143) | hsl(0, 25%, 65%) |
| indianred | #CD5C5C | rgb(205,92,92) | hsl(0, 53%, 58%) |
| brown | #A52A2A | rgb(165,42,42) | hsl(0, 59%, 41%) |
| firebrick | #B22222 | rgb(178,34,34) | hsl(0, 68%, 42%) |
| lightcoral | #F08080 | rgb(240,128,128) | hsl(0, 79%, 72%) |
| mistyrose | #FFE4E1 | rgb(255,228,225) | hsl(6, 100%, 94%) |
| salmon | #FA8072 | rgb(250,128,114) | hsl(6, 93%, 71%) |
| tomato | #FF6347 | rgb(255,99,71) | hsl(9, 100%, 64%) |
| darksalmon | #E9967A | rgb(233,150,122) | hsl(15, 72%, 70%) |
| orangered | #FF4500 | rgb(255,69,0) | hsl(16, 100%, 50%) |
| coral | #FF7F50 | rgb(255,127,80) | hsl(16, 100%, 66%) |
| lightsalmon | #FFA07A | rgb(255,160,122) | hsl(17, 100%, 74%) |
| sienna | #A0522D | rgb(160,82,45) | hsl(19, 56%, 40%) |
| seashell | #FFF5EE | rgb(255,245,238) | hsl(25, 100%, 97%) |
| chocolate | #D2691E | rgb(210,105,30) | hsl(25, 75%, 47%) |
| saddlebrown | #8B4513 | rgb(139,69,19) | hsl(25, 76%, 31%) |
| peachpuff | #FFDAB9 | rgb(255,218,185) | hsl(28, 100%, 86%) |
| sandybrown | #F4A460 | rgb(244,164,96) | hsl(28, 87%, 67%) |
| peru | #CD853F | rgb(205,133,63) | hsl(30, 59%, 53%) |
| linen | #FAF0E6 | rgb(250,240,230) | hsl(30, 67%, 94%) |
| darkorange | #FF8C00 | rgb(255,140,0) | hsl(33, 100%, 50%) |
| bisque | #FFE4C4 | rgb(255,228,196) | hsl(33, 100%, 88%) |
| tan | #D2B48C | rgb(210,180,140) | hsl(34, 44%, 69%) |
| burlywood | #DEB887 | rgb(222,184,135) | hsl(34, 57%, 70%) |
| antiquewhite | #FAEBD7 | rgb(250,235,215) | hsl(34, 78%, 91%) |
| crimson | #DC143C | rgb(220,20,60) | hsl(35, 83%, 58%) |
| navajowhite | #FFDEAD | rgb(255,222,173) | hsl(36, 100%, 84%) |
| blanchedalmond | #FFEBCD | rgb(255,235,205) | hsl(36, 100%, 90%) |
| papayawhip | #FFEFD5 | rgb(255,239,213) | hsl(37, 100%, 92%) |
| moccasin | #FFE4B5 | rgb(255,228,181) | hsl(38, 100%, 85%) |
| orange | #FFA500 | rgb(255,165,0) | hsl(39, 100%, 50% |
| wheat | #F5DEB3 | rgb(245,222,179) | hsl(39, 77%, 83%) |
| oldlace | #FDF5E6 | rgb(253,245,230) | hsl(39, 85%, 95%) |
| floralwhite | #FFFAF0 | rgb(255,250,240) | hsl(40, 100%, 97%) |
| goldenrod | #DAA520 | rgb(218,165,32) | hsl(43, 74%, 49%) |
| darkgoldenrod | #B8860B | rgb(184,134,11) | hsl(43, 89%, 38%) |
| cornsilk | #FFF8DC | rgb(255,248,220) | hsl(48, 100%, 93%) |
| gold | #FFD700 | rgb(255,215,0) | hsl(51, 100%, 50%) |
| lemonchiffon | #FFFACD | rgb(255,250,205) | hsl(54, 100%, 90%) |
| khaki | #F0E68C | rgb(240,230,140) | hsl(54, 77%, 75%) |
| palegoldenrod | #EEE8AA | rgb(238,232,170) | hsl(55, 67%, 80%) |
| darkkhaki | #BDB76B | rgb(189,183,107) | hsl(56, 38%, 58%) |
| olive | #808000 | rgb(128,128,0) | hsl(60, 100%, 25%) |
| yellow | #FFFF00 | rgb(255,255,0) | hsl(60, 100%, 50%) |
| lightyellow | #FFFFE0 | rgb(255,255,224) | hsl(60, 100%, 94%) |
| ivory | #FFFFF0 | rgb(255,255,240) | hsl(60, 100%, 97%) |
| beige | #F5F5DC | rgb(245,245,220) | hsl(60, 56%, 91%) |
| lightgoldenrodyellow | #FAFAD2 | rgb(250,250,210) | hsl(60, 80%, 90%) |
| olivedrab | #6B8E23 | rgb(107,142,35) | hsl(80, 60%, 35%) |
| yellowgreen | #9ACD32 | rgb(154,205,50 | hsl(80, 61%, 50%); |
| darkolivegreen | #556B2F | rgb(85,107,47) | hsl(82, 39%, 30%) |
| greenyellow | #ADFF2F | rgb(173,255,47) | hsl(84, 100%, 59%) |
| lawngreen | #7CFC00 | rgb(124,252,0) | hsl(90, 100%, 49%) |
| chartreuse | #7FFF00 | rgb(127,255,0) | hsl(90, 100%, 50%) |
| darkgreen | #006400 | rgb(0,100,0) | hsl(120, 100%, 20%) |
| green | #008000 | rgb(0,128,0) | hsl(120, 100%, 25%) |
| lime | #00FF00 | rgb(0,255,0) | hsl(120, 100%, 50%) |
| honeydew | #F0FFF0 | rgb(240,255,240) | hsl(120, 100%, 97%) |
| darkseagreen | #8FBC8F | rgb(143,188,143) | hsl(120, 25%, 65%) |
| forestgreen | #228B22 | rgb(34,139,34) | hsl(120, 61%, 34%) |
| limegreen | #32CD32 | rgb(50,205,50) | hsl(120, 61%, 50%) |
| lightgreen | #90EE90 | rgb(144,238,144) | hsl(120, 73%, 75%) |
| palegreen | #98FB98 | rgb(152,251,152) | hsl(120, 93%, 79%) |
| seagreen | #2E8B57 | rgb(46,139,87) | hsl(146, 50%, 36%) |
| mediumseagreen | #3CB371 | rgb(60,179,113) | hsl(147, 50%, 47%) |
| springgreen | #00FF7F | rgb(0,255,127) | hsl(150, 100%, 50%) |
| mintcream | #F5FFFA | rgb(245,255,250) | hsl(150, 100%, 98%) |
| mediumspringgreen | #00FA9A | rgb(0,250,154) | hsl(157, 100%, 49%) |
| aquamarine | #7FFFD4 | rgb(127,255,212) | hsl(160, 100%, 75%) |
| mediumaquamarine | #66CDAA | rgb(102,205,170) | hsl(160, 51%, 60%) |
| turquoise | #40E0D0 | rgb(64,224,208) | hsl(174, 72%, 56%) |
| lightseagreen | #20B2AA | rgb(32,178,170) | hsl(177, 70%, 41%) |
| mediumturquoise | #48D1CC | rgb(72,209,204) | hsl(178, 60%, 55%) |
| teal | #008080 | rgb(0,128,128) | hsl(180, 100%, 25%) |
| darkcyan | #008B8B | rgb(0,139,139) | hsl(180, 100%, 27%) |
| aqua / cyan | #00FFFF | rgb(0,255,255) | hsl(180, 100%, 50%) |
| cyan / aqua | #00FFFF | rgb(0,255,255) | hsl(180, 100%, 50%) |
| lightcyan | #E0FFFF | rgb(224,255,255) | hsl(180, 100%, 94%) |
| azure | #F0FFFF | rgb(240,255,255) | hsl(180, 100%, 97%) |
| darkslategray / darkslategrey | #2F4F4F | rgb(47,79,79) | hsl(180, 25%, 25% |
| paleturquoise | #AFEEEE | rgb(175,238,238) | hsl(180, 65%, 81%) |
| darkturquoise | #00CED1 | rgb(0,206,209) | hsl(181, 100%, 41%) |
| cadetblue | #5F9EA0 | rgb(95,158,160) | hsl(182, 25%, 50%) |
| powderblue | #B0E0E6 | rgb(176,224,230) | hsl(187, 52%, 80%) |
| deepskyblue | #00BFFF | rgb(0,191,255) | hsl(195, 100%, 50%) |
| lightblue | #ADD8E6 | rgb(173,216,230) | hsl(195, 53%, 79%) |
| skyblue | #87CEEB | rgb(135,206,235) | hsl(197, 71%, 73%) |
| lightskyblue | #87CEFA | rgb(135,206,250) | hsl(203, 92%, 75%) |
| steelblue | #4682B4 | rgb(70,130,180) | hsl(207, 44%, 49%) |
| aliceblue | #F0F8FF | rgb(240,248,255) | hsl(208, 100%, 97%) |
| dodgerblue | #1E90FF | rgb(30,144,255) | hsl(210, 100%, 56%) |
| slategray / slategrey | #708090 | rgb(112,128,144) | hsl(210, 13%, 50%) |
| lightslategray / lightslategrey | #778899 | rgb(119,136,153) | hsl(210, 14%, 53%) |
| lightsteelblue | #B0C4DE | rgb(176,196,222) | hsl(214, 41%, 78%) |
| cornflowerblue | #6495ED | rgb(100,149,237) | hsl(219, 79%, 66%) |
| royalblue | #4169E1 | rgb(65,105,225) | hsl(225, 73%, 57%) |
| navy | #000080 | rgb(0,0,128) | hsl(240, 100%, 25%) |
| darkblue | #00008B | rgb(0,0,139) | hsl(240, 100%, 27%); |
| mediumblue | #0000CD | rgb(0,0,205) | hsl(240, 100%, 40%) |
| blue | #0000FF | rgb(0,0,255) | hsl(240, 100%, 50%) |
| ghostwhite | #F8F8FF | rgb(248,248,255) | hsl(240, 100%, 99%) |
| midnightblue | #191970 | rgb(25,25,112) | hsl(240, 64%, 27%) |
| lavender | #E6E6FA | rgb(230,230,250) | hsl(240, 67%, 94%) |
| darkslateblue | #483D8B | rgb(72,61,139) | hsl(248, 39%, 39%) |
| slateblue | #6A5ACD | rgb(106,90,205) | hsl(248, 53%, 58%) |
| mediumslateblue | #7B68EE | rgb(123,104,238) | hsl(249, 80%, 67%) |
| mediumpurple | #9370DB | rgb(147,112,219) | hsl(260, 60%, 65%) |
| blueviolet | #8A2BE2 | rgb(138,43,226) | hsl(271, 76%, 53%) |
| indigo | #4B0082 | rgb(75,0,130) | hsl(275, 100%, 25%) |
| darkorchid | #9932CC | rgb(153,50,204) | hsl(280, 61%, 50%) |
| darkviolet | #9400D3 | rgb(148,0,211) | hsl(282, 100%, 41%) |
| mediumorchid | #BA55D3 | rgb(186,85,211) | hsl(288, 59%, 58%) |
| purple | #800080 | rgb(128,0,128) | hsl(300, 100%, 25%) |
| darkmagenta | #8B008B | rgb(139,0,139) | hsl(300, 100%, 27%) |
| fuchsia / magenta | #FF00FF | rgb(255,0,255) | hsl(300, 100%, 50%) |
| thistle | #D8BFD8 | rgb(216,191,216) | hsl(300, 24%, 80%) |
| plum | #DDA0DD | rgb(221,160,221) | hsl(300, 47%, 75%) |
| violet | #EE82EE | rgb(238,130,238) | hsl(300, 76%, 72%) |
| orchid | #DA70D6 | rgb(218,112,214) | hsl(302, 59%, 65%) |
| mediumvioletred | #C71585 | rgb(199,21,133) | hsl(322, 81%, 43%) |
| deeppink | #FF1493 | rgb(255,20,147) | hsl(328, 100%, 54%) |
| hotpink | #FF69B4 | rgb(255,105,180) | hsl(330, 100%, 71%) |
| lavenderblush | #FFF0F5 | rgb(255,240,245) | hsl(340, 100%, 97%) |
| palevioletred | #DB7093 | rgb(219,112,147) | hsl(340, 60%, 65%) |
| pink | #FFC0CB | rgb(255,192,203) | hsl(350, 100%, 88%) |
| lightpink | #FFB6C1 | rgb(255,182,193) | hsl(351, 100%, 86%) |
Table 2: The HSL, RGB and Hex values of named colors sorted by hue
You’ll note that the colors in the table above go from red to orange to yellow to green to blue to purple and pink and back to red. As noted before, red=0 and red=360, with all the other hues coming in between.
While named colors are limited, HSL color combinations are limitless. Try picking a hue and play around with saturation and lightness to create a color palette for your next website.
