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.
Name | HSL | Hex | Lightness |
---|---|---|---|
white | hsl(0,0%,100%) | #ffffff | 100% |
ivory | hsl(60,100%,97%) | #fffff0 | 100% |
lightyellow | hsl(60,100%,94%) | #ffffe0 | 99% |
mintcream | hsl(150,100%,98%) | #f5fffa | 99% |
azure | hsl(180,100%,97%) | #f0ffff | 99% |
snow | hsl(0,100%,99%) | #fffafa | 99% |
honeydew | hsl(120,100%,97%) | #f0fff0 | 99% |
floralwhite | hsl(40,100%,97%) | #fffaf0 | 98% |
lightcyan | hsl(180,100%,94%) | #e0ffff | 98% |
ghostwhite | hsl(240,100%,99%) | #f8f8ff | 98% |
lemonchiffon | hsl(54,100%,90%) | #fffacd | 98% |
cornsilk | hsl(48,100%,93%) | #fff8dc | 97% |
lightgoldenrodyellow | hsl(60,80%,90%) | #fafad2 | 97% |
aliceblue | hsl(208,100%,97%) | #f0f8ff | 97% |
yellow | hsl(60,100%,50%) | #ffff00 | 97% |
seashell | hsl(25,100%,97%) | #fff5ee | 97% |
oldlace | hsl(39,85%,95%) | #fdf5e6 | 97% |
whitesmoke | hsl(0,0%,96%) | #f5f5f5 | 97% |
lavenderblush | hsl(340,100%,97%) | #fff0f5 | 96% |
beige | hsl(60,56%,91%) | #f5f5dc | 96% |
linen | hsl(30,67%,94%) | #faf0e6 | 95% |
papayawhip | hsl(37,100%,92%) | #ffefd5 | 95% |
blanchedalmond | hsl(36,100%,90%) | #ffebcd | 94% |
antiquewhite | hsl(34,78%,91%) | #faebd7 | 94% |
mistyrose | hsl(6,100%,94%) | #ffe4e1 | 93% |
aquamarine | hsl(160,100%,75%) | #7fffd4 | 92% |
bisque | hsl(33,100%,88%) | #ffe4c4 | 92% |
greenyellow | hsl(84,100%,59%) | #adff2f | 92% |
lavender | hsl(240,67%,94%) | #e6e6fa | 92% |
moccasin | hsl(38,100%,85%) | #ffe4b5 | 92% |
palegoldenrod | hsl(55,67%,80%) | #eee8aa | 91% |
cyan | hsl(180,100%,50%) | #00ffff | 91% |
aqua | hsl(180,100%,50%) | #00ffff | 91% |
palegreen | hsl(120,93%,79%) | #98fb98 | 91% |
khaki | hsl(54,77%,75%) | #f0e68c | 90% |
navajowhite | hsl(36,100%,84%) | #ffdead | 90% |
paleturquoise | hsl(180,65%,81%) | #afeeee | 90% |
chartreuse | hsl(90,100%,50%) | #7fff00 | 90% |
wheat | hsl(39,77%,83%) | #f5deb3 | 89% |
peachpuff | hsl(28,100%,86%) | #ffdab9 | 89% |
lawngreen | hsl(90,100%,49%) | #7cfc00 | 89% |
springgreen | hsl(150,100%,50%) | #00ff7f | 88% |
gainsboro | hsl(0,0%,86%) | #dcdcdc | 88% |
lime | hsl(120,100%,50%) | #00ff00 | 88% |
mediumspringgreen | hsl(157,100%,49%) | #00fa9a | 87% |
gold | hsl(51,100%,50%) | #ffd700 | 87% |
lightgreen | hsl(120,73%,75%) | #90ee90 | 87% |
powderblue | hsl(187,52%,80%) | #b0e0e6 | 86% |
lightgrey | hsl(0,0%,83%) | #d3d3d3 | 85% |
lightgray | hsl(0,0%,83%) | #d3d3d3 | 85% |
lightblue | hsl(195,53%,79%) | #add8e6 | 84% |
pink | hsl(350,100%,88%) | #ffc0cb | 84% |
turquoise | hsl(174,72%,56%) | #40e0d0 | 81% |
lightpink | hsl(351,100%,86%) | #ffb6c1 | 81% |
thistle | hsl(300,24%,80%) | #d8bfd8 | 80% |
lightskyblue | hsl(203,92%,75%) | #87cefa | 80% |
skyblue | hsl(197,71%,73%) | #87ceeb | 79% |
lightsteelblue | hsl(214,41%,78%) | #b0c4de | 78% |
silver | hsl(0,0%,75%) | #c0c0c0 | 78% |
burlywood | hsl(34,57%,70%) | #deb887 | 77% |
mediumturquoise | hsl(178,60%,55%) | #48d1cc | 77% |
yellowgreen | hsl(80,61%,50%) | #9acd32 | 77% |
mediumaquamarine | hsl(160,51%,60%) | #66cdaa | 76% |
darkturquoise | hsl(181,100%,41%) | #00ced1 | 75% |
tan | hsl(34,44%,69%) | #d2b48c | 75% |
orange | hsl(39,100%,50%) | #ffa500 | 75% |
lightsalmon | hsl(17,100%,74%) | #ffa07a | 75% |
sandybrown | hsl(28,87%,67%) | #f4a460 | 74% |
darkkhaki | hsl(56,38%,58%) | #bdb76b | 73% |
plum | hsl(300,47%,75%) | #dda0dd | 73% |
limegreen | hsl(120,61%,50%) | #32cd32 | 73% |
deepskyblue | hsl(195,100%,50%) | #00bfff | 73% |
darkseagreen | hsl(120,25%,65%) | #8fbc8f | 72% |
goldenrod | hsl(43,74%,49%) | #daa520 | 71% |
darksalmon | hsl(15,72%,70%) | #e9967a | 70% |
violet | hsl(300,76%,72%) | #ee82ee | 70% |
darkorange | hsl(33,100%,50%) | #ff8c00 | 69% |
darkgray | hsl(0,0%,66%) | #a9a9a9 | 69% |
darkgrey | hsl(0,0%,66%) | #a9a9a9 | 69% |
coral | hsl(16,100%,66%) | #ff7f50 | 67% |
salmon | hsl(6,93%,71%) | #fa8072 | 67% |
lightcoral | hsl(0,79%,72%) | #f08080 | 66% |
lightseagreen | hsl(177,70%,41%) | #20b2aa | 66% |
hotpink | hsl(330,100%,71%) | #ff69b4 | 65% |
mediumseagreen | hsl(147,50%,47%) | #3cb371 | 65% |
rosybrown | hsl(0,25%,65%) | #bc8f8f | 64% |
orchid | hsl(302,59%,65%) | #da70d6 | 63% |
tomato | hsl(9,100%,64%) | #ff6347 | 62% |
cornflowerblue | hsl(219,79%,66%) | #6495ed | 62% |
peru | hsl(30,59%,53%) | #cd853f | 62% |
cadetblue | hsl(182,25%,50%) | #5f9ea0 | 61% |
palevioletred | hsl(340,60%,65%) | #db7093 | 61% |
magenta | hsl(300,100%,50%) | #ff00ff | 60% |
fuchsia | hsl(300,100%,50%) | #ff00ff | 60% |
dodgerblue | hsl(210,100%,56%) | #1e90ff | 59% |
darkgoldenrod | hsl(43,89%,38%) | #b8860b | 59% |
orangered | hsl(16,100%,50%) | #ff4500 | 58% |
chocolate | hsl(25,75%,47%) | #d2691e | 56% |
deeppink | hsl(328,100%,54%) | #ff1493 | 56% |
lightslategray | hsl(210,14%,53%) | #778899 | 56% |
lightslategrey | hsl(210,14%,53%) | #778899 | 56% |
mediumpurple | hsl(260,60%,65%) | #9370db | 55% |
olivedrab | hsl(80,60%,35%) | #6b8e23 | 55% |
mediumorchid | hsl(288,59%,58%) | #ba55d3 | 54% |
gray | hsl(0,0%,50%) | #808080 | 54% |
grey | hsl(0,0%,50%) | #808080 | 54% |
indianred | hsl(0,53%,58%) | #cd5c5c | 53% |
red | hsl(0,100%,50%) | #ff0000 | 53% |
slategray | hsl(210,13%,50%) | #708090 | 53% |
slategrey | hsl(210,13%,50%) | #708090 | 53% |
steelblue | hsl(207,44%,49%) | #4682b4 | 52% |
darkcyan | hsl(180,100%,27%) | #008b8b | 52% |
mediumslateblue | hsl(249,80%,67%) | #7b68ee | 52% |
olive | hsl(60,100%,25%) | #808000 | 52% |
seagreen | hsl(146,50%,36%) | #2e8b57 | 52% |
forestgreen | hsl(120,61%,34%) | #228b22 | 51% |
teal | hsl(180,100%,25%) | #008080 | 48% |
royalblue | hsl(225,73%,57%) | #4169e1 | 48% |
crimson | hsl(348,83%,47%) | #dc143c | 47% |
green | hsl(120,100%,25%) | #008000 | 46% |
slateblue | hsl(248,53%,58%) | #6a5acd | 45% |
mediumvioletred | hsl(322,81%,43%) | #c71585 | 45% |
dimgray | hsl(0,0%,41%) | #696969 | 44% |
dimgrey | hsl(0,0%,41%) | #696969 | 44% |
sienna | hsl(19,56%,40%) | #a0522d | 44% |
darkorchid | hsl(280,61%,50%) | #9932cc | 43% |
darkolivegreen | hsl(82,39%,30%) | #556b2f | 42% |
blueviolet | hsl(271,76%,53%) | #8a2be2 | 42% |
darkviolet | hsl(282,100%,41%) | #9400d3 | 40% |
firebrick | hsl(0,68%,42%) | #b22222 | 39% |
brown | hsl(0,59%,41%) | #a52a2a | 38% |
saddlebrown | hsl(25,76%,31%) | #8b4513 | 37% |
darkgreen | hsl(120,100%,20%) | #006400 | 36% |
darkmagenta | hsl(300,100%,27%) | #8b008b | 33% |
blue | hsl(240,100%,50%) | #0000ff | 32% |
darkslategrey | hsl(180,25%,25%) | #2f4f4f | 31% |
darkslategray | hsl(180,25%,25%) | #2f4f4f | 31% |
darkslateblue | hsl(248,39%,39%) | #483d8b | 31% |
purple | hsl(300,100%,25%) | #800080 | 30% |
darkred | hsl(0,100%,27%) | #8b0000 | 28% |
maroon | hsl(0,100%,25%) | #800000 | 26% |
mediumblue | hsl(240,100%,40%) | #0000cd | 25% |
indigo | hsl(275,100%,25%) | #4b0082 | 20% |
midnightblue | hsl(240,64%,27%) | #191970 | 16% |
darkblue | hsl(240,100%,27%) | #00008b | 15% |
navy | hsl(240,100%,25%) | #000080 | 13% |
black | hsl(0,0%,0%) | #000000 | 0% |