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
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%

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%

Whitepapers and eBooks

Intel Whitepaper: 2010 Intel Core vPro Processors Overview
Article: Adobe Helps PHP Developers Create Rich Internet Applications
Case Study: Microsoft IT Strengthens Security with Data Loss Prevention Solution
Article: Reduce Your Infrastructure Costs with Microsoft System Center
Intel Brief: Five-Star IT Support--Intel Core 2 processor with vPro Delivers ROI of 524 Percent
Article: Security Enhancements Abound in Windows Server 2008
Article: Enterprise Social Computing with Microsoft SharePoint 2010
Intel Whitepaper: Implementing Intel vPro Technology to Drive Down Client Management Costs

Microsoft Whitepaper: Improve Communications and Collaboration
Intel Article: Intel Core i5 vPro Brings Intelligence to the Processor
Microsoft Personalized Whitepapers and Resources for You
Microsoft Articles: Visual Studio 2010
Adobe Article: Java Developers Finding a Home at Adobe Flex
Microsoft Whitepaper: Make Better Decisions - SQL Server 2008 Business Intelligence.
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Downloads and eKits

Tutorials and Demos

Created: March 27, 2003
Revised: June 17, 2003

URL: http://webreference.com/programming/css_color/1