This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

colors by perceptual lightness

Summary

A list of CSS color names, sorted by perceptual lightness.

Related topics

The HSL system’s notion of “lightness” is very abstract, and based on a simple transform from RGB. It places pure blue and pure yellow at the same lightness level, which does not match how humans would rank them at all.

There are much better measures of “perceptual” lightness which take into account the biology of the eye and psychology of color vision. This page uses the “lightness” value from the L*a*b color system, which is designed to be very perceptually uniform. Choosing colors near each other on this table will ensure the appearance of a uniformly bright or dim design.

NameHSLHexLightness
whitehsl(0,0%,100%)#ffffff100%
ivoryhsl(60,100%,97%)#fffff0100%
lightyellowhsl(60,100%,94%)#ffffe099%
mintcreamhsl(150,100%,98%)#f5fffa99%
azurehsl(180,100%,97%)#f0ffff99%
snowhsl(0,100%,99%)#fffafa99%
honeydewhsl(120,100%,97%)#f0fff099%
floralwhitehsl(40,100%,97%)#fffaf098%
lightcyanhsl(180,100%,94%)#e0ffff98%
ghostwhitehsl(240,100%,99%)#f8f8ff98%
lemonchiffonhsl(54,100%,90%)#fffacd98%
cornsilkhsl(48,100%,93%)#fff8dc97%
lightgoldenrodyellowhsl(60,80%,90%)#fafad297%
alicebluehsl(208,100%,97%)#f0f8ff97%
yellowhsl(60,100%,50%)#ffff0097%
seashellhsl(25,100%,97%)#fff5ee97%
oldlacehsl(39,85%,95%)#fdf5e697%
whitesmokehsl(0,0%,96%)#f5f5f597%
lavenderblushhsl(340,100%,97%)#fff0f596%
beigehsl(60,56%,91%)#f5f5dc96%
linenhsl(30,67%,94%)#faf0e695%
papayawhiphsl(37,100%,92%)#ffefd595%
blanchedalmondhsl(36,100%,90%)#ffebcd94%
antiquewhitehsl(34,78%,91%)#faebd794%
mistyrosehsl(6,100%,94%)#ffe4e193%
aquamarinehsl(160,100%,75%)#7fffd492%
bisquehsl(33,100%,88%)#ffe4c492%
greenyellowhsl(84,100%,59%)#adff2f92%
lavenderhsl(240,67%,94%)#e6e6fa92%
moccasinhsl(38,100%,85%)#ffe4b592%
palegoldenrodhsl(55,67%,80%)#eee8aa91%
cyanhsl(180,100%,50%)#00ffff91%
aquahsl(180,100%,50%)#00ffff91%
palegreenhsl(120,93%,79%)#98fb9891%
khakihsl(54,77%,75%)#f0e68c90%
navajowhitehsl(36,100%,84%)#ffdead90%
paleturquoisehsl(180,65%,81%)#afeeee90%
chartreusehsl(90,100%,50%)#7fff0090%
wheathsl(39,77%,83%)#f5deb389%
peachpuffhsl(28,100%,86%)#ffdab989%
lawngreenhsl(90,100%,49%)#7cfc0089%
springgreenhsl(150,100%,50%)#00ff7f88%
gainsborohsl(0,0%,86%)#dcdcdc88%
limehsl(120,100%,50%)#00ff0088%
mediumspringgreenhsl(157,100%,49%)#00fa9a87%
goldhsl(51,100%,50%)#ffd70087%
lightgreenhsl(120,73%,75%)#90ee9087%
powderbluehsl(187,52%,80%)#b0e0e686%
lightgreyhsl(0,0%,83%)#d3d3d385%
lightgrayhsl(0,0%,83%)#d3d3d385%
lightbluehsl(195,53%,79%)#add8e684%
pinkhsl(350,100%,88%)#ffc0cb84%
turquoisehsl(174,72%,56%)#40e0d081%
lightpinkhsl(351,100%,86%)#ffb6c181%
thistlehsl(300,24%,80%)#d8bfd880%
lightskybluehsl(203,92%,75%)#87cefa80%
skybluehsl(197,71%,73%)#87ceeb79%
lightsteelbluehsl(214,41%,78%)#b0c4de78%
silverhsl(0,0%,75%)#c0c0c078%
burlywoodhsl(34,57%,70%)#deb88777%
mediumturquoisehsl(178,60%,55%)#48d1cc77%
yellowgreenhsl(80,61%,50%)#9acd3277%
mediumaquamarinehsl(160,51%,60%)#66cdaa76%
darkturquoisehsl(181,100%,41%)#00ced175%
tanhsl(34,44%,69%)#d2b48c75%
orangehsl(39,100%,50%)#ffa50075%
lightsalmonhsl(17,100%,74%)#ffa07a75%
sandybrownhsl(28,87%,67%)#f4a46074%
darkkhakihsl(56,38%,58%)#bdb76b73%
plumhsl(300,47%,75%)#dda0dd73%
limegreenhsl(120,61%,50%)#32cd3273%
deepskybluehsl(195,100%,50%)#00bfff73%
darkseagreenhsl(120,25%,65%)#8fbc8f72%
goldenrodhsl(43,74%,49%)#daa52071%
darksalmonhsl(15,72%,70%)#e9967a70%
violethsl(300,76%,72%)#ee82ee70%
darkorangehsl(33,100%,50%)#ff8c0069%
darkgrayhsl(0,0%,66%)#a9a9a969%
darkgreyhsl(0,0%,66%)#a9a9a969%
coralhsl(16,100%,66%)#ff7f5067%
salmonhsl(6,93%,71%)#fa807267%
lightcoralhsl(0,79%,72%)#f0808066%
lightseagreenhsl(177,70%,41%)#20b2aa66%
hotpinkhsl(330,100%,71%)#ff69b465%
mediumseagreenhsl(147,50%,47%)#3cb37165%
rosybrownhsl(0,25%,65%)#bc8f8f64%
orchidhsl(302,59%,65%)#da70d663%
tomatohsl(9,100%,64%)#ff634762%
cornflowerbluehsl(219,79%,66%)#6495ed62%
peruhsl(30,59%,53%)#cd853f62%
cadetbluehsl(182,25%,50%)#5f9ea061%
palevioletredhsl(340,60%,65%)#db709361%
magentahsl(300,100%,50%)#ff00ff60%
fuchsiahsl(300,100%,50%)#ff00ff60%
dodgerbluehsl(210,100%,56%)#1e90ff59%
darkgoldenrodhsl(43,89%,38%)#b8860b59%
orangeredhsl(16,100%,50%)#ff450058%
chocolatehsl(25,75%,47%)#d2691e56%
deeppinkhsl(328,100%,54%)#ff149356%
lightslategrayhsl(210,14%,53%)#77889956%
lightslategreyhsl(210,14%,53%)#77889956%
mediumpurplehsl(260,60%,65%)#9370db55%
olivedrabhsl(80,60%,35%)#6b8e2355%
mediumorchidhsl(288,59%,58%)#ba55d354%
grayhsl(0,0%,50%)#80808054%
greyhsl(0,0%,50%)#80808054%
indianredhsl(0,53%,58%)#cd5c5c53%
redhsl(0,100%,50%)#ff000053%
slategrayhsl(210,13%,50%)#70809053%
slategreyhsl(210,13%,50%)#70809053%
steelbluehsl(207,44%,49%)#4682b452%
darkcyanhsl(180,100%,27%)#008b8b52%
mediumslatebluehsl(249,80%,67%)#7b68ee52%
olivehsl(60,100%,25%)#80800052%
seagreenhsl(146,50%,36%)#2e8b5752%
forestgreenhsl(120,61%,34%)#228b2251%
tealhsl(180,100%,25%)#00808048%
royalbluehsl(225,73%,57%)#4169e148%
crimsonhsl(348,83%,47%)#dc143c47%
greenhsl(120,100%,25%)#00800046%
slatebluehsl(248,53%,58%)#6a5acd45%
mediumvioletredhsl(322,81%,43%)#c7158545%
dimgrayhsl(0,0%,41%)#69696944%
dimgreyhsl(0,0%,41%)#69696944%
siennahsl(19,56%,40%)#a0522d44%
darkorchidhsl(280,61%,50%)#9932cc43%
darkolivegreenhsl(82,39%,30%)#556b2f42%
blueviolethsl(271,76%,53%)#8a2be242%
darkviolethsl(282,100%,41%)#9400d340%
firebrickhsl(0,68%,42%)#b2222239%
brownhsl(0,59%,41%)#a52a2a38%
saddlebrownhsl(25,76%,31%)#8b451337%
darkgreenhsl(120,100%,20%)#00640036%
darkmagentahsl(300,100%,27%)#8b008b33%
bluehsl(240,100%,50%)#0000ff32%
darkslategreyhsl(180,25%,25%)#2f4f4f31%
darkslategrayhsl(180,25%,25%)#2f4f4f31%
darkslatebluehsl(248,39%,39%)#483d8b31%
purplehsl(300,100%,25%)#80008030%
darkredhsl(0,100%,27%)#8b000028%
maroonhsl(0,100%,25%)#80000026%
mediumbluehsl(240,100%,40%)#0000cd25%
indigohsl(275,100%,25%)#4b008220%
midnightbluehsl(240,64%,27%)#19197016%
darkbluehsl(240,100%,27%)#00008b15%
navyhsl(240,100%,25%)#00008013%
blackhsl(0,0%,0%)#0000000%