HSL: Hue Saturation and Lightness

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.

Published by

Estelle Weyl

My name is Estelle Weyl. I an open web evangelist and community engineer. I'm a consulting web developer, writing technical books with O'Reilly, running frontend workshops, and speaking about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via @estellevw.