The table shown below represents the named colors that form part of CSS Color Module Level 3, derived from the SVG 1.0 specification. Each color is depicted in a row, with a 1) color swatch, 2) its standardized name, 3) its hue, saturation, and lightness (according to the HSL color space), 4) its representation as an HSL-formatted CSS style property value, 5) its red, green, and blue channel levels (according to the sRGB color space), and 6) its hex formatted RGB value.
What
makes the table most compelling is that it is sortable by any one of
the colors' properties, so you can get a sense of how properties such
as hue, saturation, lightness, red level, etc. relate to different
colors by sorting on those properties - in either ascending or
descending order. Indicators alongside the column values also provide
cues for visual reference. Click on one of the column headings to see.
The indicator for hue values is a color of that hue, with saturation at
max value, and lightness at center value. The indicators for saturation
and lightness are a grayscale, where black represents min value and
white represents max value. Indicators for red, green, and blue are
various shades of pure red, green, and blue, respectively. The table is
generated with the help of the Uize.Color
module and the named colors defined in the Uize.Color.xSvgColors
extension. The table is made sortable with the help of the Uize.Widget.TableSort
module.
Sortable Table of SVG 1.0 / CSS 3 Named Colors | |||||||||
swatch | Color Name | Hue | Sat. | Light. | HSL value | Red | Green | Blue | RGB hex |
black text white text | white | 0 | 0 | 100 | hsl(0,0%,100%) | 255 | 255 | 255 | #ffffff |
black text white text | silver | 0 | 0 | 75 | hsl(0,0%,75%) | 192 | 192 | 192 | #c0c0c0 |
black text white text | gray | 0 | 0 | 50 | hsl(0,0%,50%) | 128 | 128 | 128 | #808080 |
black text white text | black | 0 | 0 | 0 | hsl(0,0%,0%) | 0 | 0 | 0 | #000000 |
black text white text | navy | 240 | 100 | 25 | hsl(240,100%,25%) | 0 | 0 | 128 | #000080 |
black text white text | blue | 240 | 100 | 50 | hsl(240,100%,50%) | 0 | 0 | 255 | #0000ff |
black text white text | aqua | 180 | 100 | 50 | hsl(180,100%,50%) | 0 | 255 | 255 | #00ffff |
black text white text | teal | 180 | 100 | 25 | hsl(180,100%,25%) | 0 | 128 | 128 | #008080 |
black text white text | green | 120 | 100 | 25 | hsl(120,100%,25%) | 0 | 128 | 0 | #008000 |
black text white text | olive | 60 | 100 | 25 | hsl(60,100%,25%) | 128 | 128 | 0 | #808000 |
black text white text | lime | 120 | 100 | 50 | hsl(120,100%,50%) | 0 | 255 | 0 | #00ff00 |
black text white text | maroon | 0 | 100 | 25 | hsl(0,100%,25%) | 128 | 0 | 0 | #800000 |
black text white text | red | 0 | 100 | 50 | hsl(0,100%,50%) | 255 | 0 | 0 | #ff0000 |
black text white text | orange | 39 | 100 | 50 | hsl(39,100%,50%) | 255 | 165 | 0 | #ffa500 |
black text white text | yellow | 60 | 100 | 50 | hsl(60,100%,50%) | 255 | 255 | 0 | #ffff00 |
black text white text | purple | 300 | 100 | 25 | hsl(300,100%,25%) | 128 | 0 | 128 | #800080 |
black text white text | fuchsia | 300 | 100 | 50 | hsl(300,100%,50%) | 255 | 0 | 255 | #ff00ff |
black text white text | aliceblue | 208 | 100 | 97 | hsl(208,100%,97%) | 240 | 248 | 255 | #f0f8ff |
black text white text | antiquewhite | 34 | 78 | 91 | hsl(34,78%,91%) | 250 | 235 | 215 | #faebd7 |
black text white text | aquamarine | 160 | 100 | 75 | hsl(160,100%,75%) | 127 | 255 | 212 | #7fffd4 |
black text white text | azure | 180 | 100 | 97 | hsl(180,100%,97%) | 240 | 255 | 255 | #f0ffff |
black text white text | beige | 60 | 56 | 91 | hsl(60,56%,91%) | 245 | 245 | 220 | #f5f5dc |
black text white text | bisque | 33 | 100 | 88 | hsl(33,100%,88%) | 255 | 228 | 196 | #ffe4c4 |
black text white text | blanchedalmond | 36 | 100 | 90 | hsl(36,100%,90%) | 255 | 235 | 205 | #ffebcd |
black text white text | blueviolet | 271 | 76 | 53 | hsl(271,76%,53%) | 138 | 43 | 226 | #8a2be2 |
black text white text | brown | 0 | 59 | 41 | hsl(0,59%,41%) | 165 | 42 | 42 | #a52a2a |
black text white text | burlywood | 34 | 57 | 70 | hsl(34,57%,70%) | 222 | 184 | 135 | #deb887 |
black text white text | cadetblue | 182 | 25 | 50 | hsl(182,25%,50%) | 95 | 158 | 160 | #5f9ea0 |
black text white text | chartreuse | 90 | 100 | 50 | hsl(90,100%,50%) | 127 | 255 | 0 | #7fff00 |
black text white text | chocolate | 25 | 75 | 47 | hsl(25,75%,47%) | 210 | 105 | 30 | #d2691e |
black text white text | coral | 16 | 100 | 66 | hsl(16,100%,66%) | 255 | 127 | 80 | #ff7f50 |
black text white text | cornflowerblue | 219 | 79 | 66 | hsl(219,79%,66%) | 100 | 149 | 237 | #6495ed |
black text white text | cornsilk | 48 | 100 | 93 | hsl(48,100%,93%) | 255 | 248 | 220 | #fff8dc |
black text white text | crimson | 348 | 83 | 47 | hsl(348,83%,47%) | 220 | 20 | 60 | #dc143c |
black text white text | cyan | 180 | 100 | 50 | hsl(180,100%,50%) | 0 | 255 | 255 | #00ffff |
black text white text | darkblue | 240 | 100 | 27 | hsl(240,100%,27%) | 0 | 0 | 139 | #00008b |
black text white text | darkcyan | 180 | 100 | 27 | hsl(180,100%,27%) | 0 | 139 | 139 | #008b8b |
black text white text | darkgoldenrod | 43 | 89 | 38 | hsl(43,89%,38%) | 184 | 134 | 11 | #b8860b |
black text white text | darkgray | 0 | 0 | 66 | hsl(0,0%,66%) | 169 | 169 | 169 | #a9a9a9 |
black text white text | darkgreen | 120 | 100 | 20 | hsl(120,100%,20%) | 0 | 100 | 0 | #006400 |
black text white text | darkgrey | 0 | 0 | 66 | hsl(0,0%,66%) | 169 | 169 | 169 | #a9a9a9 |
black text white text | darkkhaki | 56 | 38 | 58 | hsl(56,38%,58%) | 189 | 183 | 107 | #bdb76b |
black text white text | darkmagenta | 300 | 100 | 27 | hsl(300,100%,27%) | 139 | 0 | 139 | #8b008b |
black text white text | darkolivegreen | 82 | 39 | 30 | hsl(82,39%,30%) | 85 | 107 | 47 | #556b2f |
black text white text | darkorange | 33 | 100 | 50 | hsl(33,100%,50%) | 255 | 140 | 0 | #ff8c00 |
black text white text | darkorchid | 280 | 61 | 50 | hsl(280,61%,50%) | 153 | 50 | 204 | #9932cc |
black text white text | darkred | 0 | 100 | 27 | hsl(0,100%,27%) | 139 | 0 | 0 | #8b0000 |
black text white text | darksalmon | 15 | 72 | 70 | hsl(15,72%,70%) | 233 | 150 | 122 | #e9967a |
black text white text | darkseagreen | 120 | 25 | 65 | hsl(120,25%,65%) | 143 | 188 | 143 | #8fbc8f |
black text white text | darkslateblue | 248 | 39 | 39 | hsl(248,39%,39%) | 72 | 61 | 139 | #483d8b |
black text white text | darkslategray | 180 | 25 | 25 | hsl(180,25%,25%) | 47 | 79 | 79 | #2f4f4f |
black text white text | darkslategrey | 180 | 25 | 25 | hsl(180,25%,25%) | 47 | 79 | 79 | #2f4f4f |
black text white text | darkturquoise | 181 | 100 | 41 | hsl(181,100%,41%) | 0 | 206 | 209 | #00ced1 |
black text white text | darkviolet | 282 | 100 | 41 | hsl(282,100%,41%) | 148 | 0 | 211 | #9400d3 |
black text white text | deeppink | 328 | 100 | 54 | hsl(328,100%,54%) | 255 | 20 | 147 | #ff1493 |
black text white text | deepskyblue | 195 | 100 | 50 | hsl(195,100%,50%) | 0 | 191 | 255 | #00bfff |
black text white text | dimgray | 0 | 0 | 41 | hsl(0,0%,41%) | 105 | 105 | 105 | #696969 |
black text white text | dimgrey | 0 | 0 | 41 | hsl(0,0%,41%) | 105 | 105 | 105 | #696969 |
black text white text | dodgerblue | 210 | 100 | 56 | hsl(210,100%,56%) | 30 | 144 | 255 | #1e90ff |
black text white text | firebrick | 0 | 68 | 42 | hsl(0,68%,42%) | 178 | 34 | 34 | #b22222 |
black text white text | floralwhite | 40 | 100 | 97 | hsl(40,100%,97%) | 255 | 250 | 240 | #fffaf0 |
black text white text | forestgreen | 120 | 61 | 34 | hsl(120,61%,34%) | 34 | 139 | 34 | #228b22 |
black text white text | gainsboro | 0 | 0 | 86 | hsl(0,0%,86%) | 220 | 220 | 220 | #dcdcdc |
black text white text | ghostwhite | 240 | 100 | 99 | hsl(240,100%,99%) | 248 | 248 | 255 | #f8f8ff |
black text white text | gold | 51 | 100 | 50 | hsl(51,100%,50%) | 255 | 215 | 0 | #ffd700 |
black text white text | goldenrod | 43 | 74 | 49 | hsl(43,74%,49%) | 218 | 165 | 32 | #daa520 |
black text white text | greenyellow | 84 | 100 | 59 | hsl(84,100%,59%) | 173 | 255 | 47 | #adff2f |
black text white text | grey | 0 | 0 | 50 | hsl(0,0%,50%) | 128 | 128 | 128 | #808080 |
black text white text | honeydew | 120 | 100 | 97 | hsl(120,100%,97%) | 240 | 255 | 240 | #f0fff0 |
black text white text | hotpink | 330 | 100 | 71 | hsl(330,100%,71%) | 255 | 105 | 180 | #ff69b4 |
black text white text | indianred | 0 | 53 | 58 | hsl(0,53%,58%) | 205 | 92 | 92 | #cd5c5c |
black text white text | indigo | 275 | 100 | 25 | hsl(275,100%,25%) | 75 | 0 | 130 | #4b0082 |
black text white text | ivory | 60 | 100 | 97 | hsl(60,100%,97%) | 255 | 255 | 240 | #fffff0 |
black text white text | khaki | 54 | 77 | 75 | hsl(54,77%,75%) | 240 | 230 | 140 | #f0e68c |
black text white text | lavender | 240 | 67 | 94 | hsl(240,67%,94%) | 230 | 230 | 250 | #e6e6fa |
black text white text | lavenderblush | 340 | 100 | 97 | hsl(340,100%,97%) | 255 | 240 | 245 | #fff0f5 |
black text white text | lawngreen | 90 | 100 | 49 | hsl(90,100%,49%) | 124 | 252 | 0 | #7cfc00 |
black text white text | lemonchiffon | 54 | 100 | 90 | hsl(54,100%,90%) | 255 | 250 | 205 | #fffacd |
black text white text | lightblue | 195 | 53 | 79 | hsl(195,53%,79%) | 173 | 216 | 230 | #add8e6 |
black text white text | lightcoral | 0 | 79 | 72 | hsl(0,79%,72%) | 240 | 128 | 128 | #f08080 |
black text white text | lightcyan | 180 | 100 | 94 | hsl(180,100%,94%) | 224 | 255 | 255 | #e0ffff |
black text white text | lightgoldenrodyellow | 60 | 80 | 90 | hsl(60,80%,90%) | 250 | 250 | 210 | #fafad2 |
black text white text | lightgray | 0 | 0 | 83 | hsl(0,0%,83%) | 211 | 211 | 211 | #d3d3d3 |
black text white text | lightgreen | 120 | 73 | 75 | hsl(120,73%,75%) | 144 | 238 | 144 | #90ee90 |
black text white text | lightgrey | 0 | 0 | 83 | hsl(0,0%,83%) | 211 | 211 | 211 | #d3d3d3 |
black text white text | lightpink | 351 | 100 | 86 | hsl(351,100%,86%) | 255 | 182 | 193 | #ffb6c1 |
black text white text | lightsalmon | 17 | 100 | 74 | hsl(17,100%,74%) | 255 | 160 | 122 | #ffa07a |
black text white text | lightseagreen | 177 | 70 | 41 | hsl(177,70%,41%) | 32 | 178 | 170 | #20b2aa |
black text white text | lightskyblue | 203 | 92 | 75 | hsl(203,92%,75%) | 135 | 206 | 250 | #87cefa |
black text white text | lightslategray | 210 | 14 | 53 | hsl(210,14%,53%) | 119 | 136 | 153 | #778899 |
black text white text | lightslategrey | 210 | 14 | 53 | hsl(210,14%,53%) | 119 | 136 | 153 | #778899 |
black text white text | lightsteelblue | 214 | 41 | 78 | hsl(214,41%,78%) | 176 | 196 | 222 | #b0c4de |
black text white text | lightyellow | 60 | 100 | 94 | hsl(60,100%,94%) | 255 | 255 | 224 | #ffffe0 |
black text white text | limegreen | 120 | 61 | 50 | hsl(120,61%,50%) | 50 | 205 | 50 | #32cd32 |
black text white text | linen | 30 | 67 | 94 | hsl(30,67%,94%) | 250 | 240 | 230 | #faf0e6 |
black text white text | magenta | 300 | 100 | 50 | hsl(300,100%,50%) | 255 | 0 | 255 | #ff00ff |
black text white text | mediumaquamarine | 160 | 51 | 60 | hsl(160,51%,60%) | 102 | 205 | 170 | #66cdaa |
black text white text | mediumblue | 240 | 100 | 40 | hsl(240,100%,40%) | 0 | 0 | 205 | #0000cd |
black text white text | mediumorchid | 288 | 59 | 58 | hsl(288,59%,58%) | 186 | 85 | 211 | #ba55d3 |
black text white text | mediumpurple | 260 | 60 | 65 | hsl(260,60%,65%) | 147 | 112 | 219 | #9370db |
black text white text | mediumseagreen | 147 | 50 | 47 | hsl(147,50%,47%) | 60 | 179 | 113 | #3cb371 |
black text white text | mediumslateblue | 249 | 80 | 67 | hsl(249,80%,67%) | 123 | 104 | 238 | #7b68ee |
black text white text | mediumspringgreen | 157 | 100 | 49 | hsl(157,100%,49%) | 0 | 250 | 154 | #00fa9a |
black text white text | mediumturquoise | 178 | 60 | 55 | hsl(178,60%,55%) | 72 | 209 | 204 | #48d1cc |
black text white text | mediumvioletred | 322 | 81 | 43 | hsl(322,81%,43%) | 199 | 21 | 133 | #c71585 |
black text white text | midnightblue | 240 | 64 | 27 | hsl(240,64%,27%) | 25 | 25 | 112 | #191970 |
black text white text | mintcream | 150 | 100 | 98 | hsl(150,100%,98%) | 245 | 255 | 250 | #f5fffa |
black text white text | mistyrose | 6 | 100 | 94 | hsl(6,100%,94%) | 255 | 228 | 225 | #ffe4e1 |
black text white text | moccasin | 38 | 100 | 85 | hsl(38,100%,85%) | 255 | 228 | 181 | #ffe4b5 |
black text white text | navajowhite | 36 | 100 | 84 | hsl(36,100%,84%) | 255 | 222 | 173 | #ffdead |
black text white text | oldlace | 39 | 85 | 95 | hsl(39,85%,95%) | 253 | 245 | 230 | #fdf5e6 |
black text white text | olivedrab | 80 | 60 | 35 | hsl(80,60%,35%) | 107 | 142 | 35 | #6b8e23 |
black text white text | orangered | 16 | 100 | 50 | hsl(16,100%,50%) | 255 | 69 | 0 | #ff4500 |
black text white text | orchid | 302 | 59 | 65 | hsl(302,59%,65%) | 218 | 112 | 214 | #da70d6 |
black text white text | palegoldenrod | 55 | 67 | 80 | hsl(55,67%,80%) | 238 | 232 | 170 | #eee8aa |
black text white text | palegreen | 120 | 93 | 79 | hsl(120,93%,79%) | 152 | 251 | 152 | #98fb98 |
black text white text | paleturquoise | 180 | 65 | 81 | hsl(180,65%,81%) | 175 | 238 | 238 | #afeeee |
black text white text | palevioletred | 340 | 60 | 65 | hsl(340,60%,65%) | 219 | 112 | 147 | #db7093 |
black text white text | papayawhip | 37 | 100 | 92 | hsl(37,100%,92%) | 255 | 239 | 213 | #ffefd5 |
black text white text | peachpuff | 28 | 100 | 86 | hsl(28,100%,86%) | 255 | 218 | 185 | #ffdab9 |
black text white text | peru | 30 | 59 | 53 | hsl(30,59%,53%) | 205 | 133 | 63 | #cd853f |
black text white text | pink | 350 | 100 | 88 | hsl(350,100%,88%) | 255 | 192 | 203 | #ffc0cb |
black text white text | plum | 300 | 47 | 75 | hsl(300,47%,75%) | 221 | 160 | 221 | #dda0dd |
black text white text | powderblue | 187 | 52 | 80 | hsl(187,52%,80%) | 176 | 224 | 230 | #b0e0e6 |
black text white text | rosybrown | 0 | 25 | 65 | hsl(0,25%,65%) | 188 | 143 | 143 | #bc8f8f |
black text white text | royalblue | 225 | 73 | 57 | hsl(225,73%,57%) | 65 | 105 | 225 | #4169e1 |
black text white text | saddlebrown | 25 | 76 | 31 | hsl(25,76%,31%) | 139 | 69 | 19 | #8b4513 |
black text white text | salmon | 6 | 93 | 71 | hsl(6,93%,71%) | 250 | 128 | 114 | #fa8072 |
black text white text | sandybrown | 28 | 87 | 67 | hsl(28,87%,67%) | 244 | 164 | 96 | #f4a460 |
black text white text | seagreen | 146 | 50 | 36 | hsl(146,50%,36%) | 46 | 139 | 87 | #2e8b57 |
black text white text | seashell | 25 | 100 | 97 | hsl(25,100%,97%) | 255 | 245 | 238 | #fff5ee |
black text white text | sienna | 19 | 56 | 40 | hsl(19,56%,40%) | 160 | 82 | 45 | #a0522d |
black text white text | skyblue | 197 | 71 | 73 | hsl(197,71%,73%) | 135 | 206 | 235 | #87ceeb |
black text white text | slateblue | 248 | 53 | 58 | hsl(248,53%,58%) | 106 | 90 | 205 | #6a5acd |
black text white text | slategray | 210 | 13 | 50 | hsl(210,13%,50%) | 112 | 128 | 144 | #708090 |
black text white text | slategrey | 210 | 13 | 50 | hsl(210,13%,50%) | 112 | 128 | 144 | #708090 |
black text white text | snow | 0 | 100 | 99 | hsl(0,100%,99%) | 255 | 250 | 250 | #fffafa |
black text white text | springgreen | 150 | 100 | 50 | hsl(150,100%,50%) | 0 | 255 | 127 | #00ff7f |
black text white text | steelblue | 207 | 44 | 49 | hsl(207,44%,49%) | 70 | 130 | 180 | #4682b4 |
black text white text | tan | 34 | 44 | 69 | hsl(34,44%,69%) | 210 | 180 | 140 | #d2b48c |
black text white text | thistle | 300 | 24 | 80 | hsl(300,24%,80%) | 216 | 191 | 216 | #d8bfd8 |
black text white text | tomato | 9 | 100 | 64 | hsl(9,100%,64%) | 255 | 99 | 71 | #ff6347 |
black text white text | turquoise | 174 | 72 | 56 | hsl(174,72%,56%) | 64 | 224 | 208 | #40e0d0 |
black text white text | violet | 300 | 76 | 72 | hsl(300,76%,72%) | 238 | 130 | 238 | #ee82ee |
black text white text | wheat | 39 | 77 | 83 | hsl(39,77%,83%) | 245 | 222 | 179 | #f5deb3 |
black text white text | whitesmoke | 0 | 0 | 96 | hsl(0,0%,96%) | 245 | 245 | 245 | #f5f5f5 |
black text white text | yellowgreen | 80 | 61 | 50 | hsl(80,61%,50%) | 154 | 205 | 50 | #9acd32 |