Color Spot Tables: tables of color swatches and color codes used in HTML and CSS

Hue, Saturation, and Light Color Codes

This page demonstrates the hue, saturation, and light (HSL) representation of color of the 147 colors defined by the Scalable Vector Graphics (SVG) Specification. This type of color representation is of the form hsl(H, S%, L%), where H is the hue measured in degrees of the color circle ranging from 0 to 360 (red = 0°; green = 120°; blue = 240°). S is the saturation percent (100% full saturation, 0% is a shade of gray); L is the lightness percent (100% is white, 0% is black, 50% is 'normal'). This is just one of the ways you can define colors in HTML attributes and in Cascading Style Sheets; you can use a quick reference table to help you choose from among the many color tables available.

NOTE: Not all Web browsers will show colors using HSL. The Mozilla Web browser shows colors defined by this method; as of August 2004, Microsoft Internet Explorer does not.

Note that there are 147 color names, but not that many distinct colors, as some name variants are given for the same color values--grey (spelled with "e") and gray (spelled with "a") are both listed here for the same color. Also, there are repetitions for magenta and fuchsia.

Color swatches are defined by using the HSL code for the color and are sorted by the HSL code.

You can see the meaning of the labels (Safe 16 SVG Hex3) on the Color Spot table of tables.

black(Safe 16 Hex3) hsl(0, 0%, 0%)
 
dimgrey hsl(0, 0%, 41%)dimgray hsl(0, 0%, 41%)
grey(16) hsl(0, 0%, 50%)
 
gray(16) hsl(0, 0%, 50%)darkgray hsl(0, 0%, 66%)
darkgrey hsl(0, 0%, 66%)
 
silver(16) hsl(0, 0%, 75%)lightgrey hsl(0, 0%, 83%)
lightgray hsl(0, 0%, 83%)
 
gainsboro hsl(0, 0%, 86%)whitesmoke hsl(0, 0%, 96%)
white(Safe 16 Hex3) hsl(0, 0%, 100%)
 
rosybrown hsl(0, 25%, 65%)indianred hsl(0, 53%, 58%)
brown hsl(0, 59%, 41%)
 
firebrick hsl(0, 68%, 42%)lightcoral hsl(0, 79%, 72%)
maroon(16) hsl(0, 100%, 25%)
 
darkred hsl(0, 100%, 27%)red(Safe 16 Hex3) hsl(0, 100%, 50%)
snow hsl(0, 100%, 99%)
 
salmon hsl(6, 93%, 71%)mistyrose hsl(6, 100%, 94%)
tomato hsl(9, 100%, 64%)
 
darksalmon hsl(15, 72%, 70%)orangered hsl(16, 100%, 50%)
coral hsl(16, 100%, 66%)
 
lightsalmon hsl(17, 100%, 74%)sienna hsl(19, 56%, 40%)
chocolate hsl(25, 75%, 47%)
 
saddlebrown hsl(25, 76%, 31%)seashell hsl(25, 100%, 97%)
sandybrown hsl(28, 87%, 67%)
 
peachpuff hsl(28, 100%, 86%)peru hsl(30, 59%, 53%)
linen hsl(30, 67%, 94%)
 
darkorange hsl(33, 100%, 50%)bisque hsl(33, 100%, 88%)
tan hsl(34, 44%, 69%)
 
burlywood hsl(34, 57%, 70%)antiquewhite hsl(34, 78%, 91%)
navajowhite hsl(36, 100%, 84%)
 
blanchedalmond hsl(36, 100%, 90%)papayawhip hsl(37, 100%, 92%)
moccasin hsl(38, 100%, 85%)
 
wheat hsl(39, 77%, 83%)oldlace hsl(39, 85%, 95%)
orange hsl(39, 100%, 50%)
 
floralwhite hsl(40, 100%, 97%)goldenrod hsl(43, 74%, 49%)
darkgoldenrod hsl(43, 89%, 38%)
 
cornsilk hsl(48, 100%, 93%)gold hsl(51, 100%, 50%)
khaki hsl(54, 77%, 75%)
 
lemonchiffon hsl(54, 100%, 90%)palegoldenrod hsl(55, 67%, 80%)
darkkhaki hsl(56, 38%, 58%)
 
beige hsl(60, 56%, 91%)lightgoldenrodyellow hsl(60, 80%, 90%)
olive(16) hsl(60, 100%, 25%)
 
yellow(Safe 16 Hex3) hsl(60, 100%, 50%)lightyellow hsl(60, 100%, 94%)
ivory hsl(60, 100%, 97%)
 
olivedrab hsl(80, 60%, 35%)yellowgreen hsl(80, 61%, 50%)
darkolivegreen hsl(82, 39%, 30%)
 
greenyellow hsl(84, 100%, 59%)lawngreen hsl(90, 100%, 49%)
chartreuse hsl(90, 100%, 50%)
 
darkseagreen hsl(120, 25%, 65%)forestgreen hsl(120, 61%, 34%)
limegreen hsl(120, 61%, 50%)
 
lightgreen hsl(120, 73%, 75%)palegreen hsl(120, 93%, 79%)
darkgreen hsl(120, 100%, 20%)
 
green(16) hsl(120, 100%, 25%)lime(Safe 16 Hex3) hsl(120, 100%, 50%)
honeydew hsl(120, 100%, 97%)
 
seagreen hsl(146, 50%, 36%)mediumseagreen hsl(147, 50%, 47%)
springgreen hsl(150, 100%, 50%)
 
mintcream hsl(150, 100%, 98%)mediumspringgreen hsl(157, 100%, 49%)
mediumaquamarine hsl(160, 51%, 60%)
 
aquamarine hsl(160, 100%, 75%)turquoise hsl(174, 72%, 56%)
lightseagreen hsl(177, 70%, 41%)
 
mediumturquoise hsl(178, 60%, 55%)darkslategray hsl(180, 25%, 25%)
darkslategrey hsl(180, 25%, 25%)
 
paleturquoise hsl(180, 65%, 81%)teal(16) hsl(180, 100%, 25%)
darkcyan hsl(180, 100%, 27%)
 
cyan(Safe 16=aqua Hex3) hsl(180, 100%, 50%)aqua(Safe 16 Hex3) hsl(180, 100%, 50%)
lightcyan hsl(180, 100%, 94%)
 
azure hsl(180, 100%, 97%)darkturquoise hsl(181, 100%, 41%)
cadetblue hsl(182, 25%, 50%)
 
powderblue hsl(187, 52%, 80%)lightblue hsl(195, 53%, 79%)
deepskyblue hsl(195, 100%, 50%)
 
skyblue hsl(197, 71%, 73%)lightskyblue hsl(203, 92%, 75%)
steelblue hsl(207, 44%, 49%)
 
aliceblue hsl(208, 100%, 97%)slategray hsl(210, 13%, 50%)
slategrey hsl(210, 13%, 50%)
 
lightslategrey(Hex3) hsl(210, 14%, 53%)lightslategray(Hex3) hsl(210, 14%, 53%)
dodgerblue hsl(210, 100%, 56%)
 
lightsteelblue hsl(214, 41%, 78%)cornflowerblue hsl(219, 79%, 66%)
royalblue hsl(225, 73%, 57%)
 
midnightblue hsl(240, 64%, 27%)lavender hsl(240, 67%, 94%)
navy(16) hsl(240, 100%, 25%)
 
darkblue hsl(240, 100%, 27%)mediumblue hsl(240, 100%, 40%)
blue(Safe 16 Hex3) hsl(240, 100%, 50%)
 
ghostwhite hsl(240, 100%, 99%)darkslateblue hsl(248, 39%, 39%)
slateblue hsl(248, 53%, 58%)
 
mediumslateblue hsl(249, 80%, 67%)mediumpurple hsl(260, 60%, 65%)
blueviolet hsl(271, 76%, 53%)
 
indigo hsl(275, 100%, 25%)darkorchid hsl(280, 61%, 50%)
darkviolet hsl(282, 100%, 41%)
 
mediumorchid hsl(288, 59%, 58%)thistle hsl(300, 24%, 80%)
plum hsl(300, 47%, 75%)
 
violet hsl(300, 76%, 72%)purple(16) hsl(300, 100%, 25%)
darkmagenta hsl(300, 100%, 27%)
 
fuchsia(Safe 16 Hex3) hsl(300, 100%, 50%)magenta(Safe 16=fuchsia Hex3) hsl(300, 100%, 50%)
orchid hsl(302, 59%, 65%)
 
mediumvioletred hsl(322, 81%, 43%)deeppink hsl(328, 100%, 54%)
hotpink hsl(330, 100%, 71%)
 
palevioletred hsl(340, 60%, 65%)lavenderblush hsl(340, 100%, 97%)
crimson hsl(348, 83%, 47%)
 
pink hsl(350, 100%, 88%)lightpink hsl(351, 100%, 86%)
search Search · star Market
2023-06-19 · John December · Terms © johndecember.com