JAVASCRIPT EXAMPLES Sortable Color Table
VIEW SOURCE

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
swatchColor NameHueSat.Light.HSL valueRedGreenBlueRGB hex
black text white textwhite00100hsl(0,0%,100%)255255255#ffffff
black text white textsilver0075hsl(0,0%,75%)192192192#c0c0c0
black text white textgray0050hsl(0,0%,50%)128128128#808080
black text white textblack000hsl(0,0%,0%)000#000000
black text white textnavy24010025hsl(240,100%,25%)00128#000080
black text white textblue24010050hsl(240,100%,50%)00255#0000ff
black text white textaqua18010050hsl(180,100%,50%)0255255#00ffff
black text white textteal18010025hsl(180,100%,25%)0128128#008080
black text white textgreen12010025hsl(120,100%,25%)01280#008000
black text white textolive6010025hsl(60,100%,25%)1281280#808000
black text white textlime12010050hsl(120,100%,50%)02550#00ff00
black text white textmaroon010025hsl(0,100%,25%)12800#800000
black text white textred010050hsl(0,100%,50%)25500#ff0000
black text white textorange3910050hsl(39,100%,50%)2551650#ffa500
black text white textyellow6010050hsl(60,100%,50%)2552550#ffff00
black text white textpurple30010025hsl(300,100%,25%)1280128#800080
black text white textfuchsia30010050hsl(300,100%,50%)2550255#ff00ff
black text white textaliceblue20810097hsl(208,100%,97%)240248255#f0f8ff
black text white textantiquewhite347891hsl(34,78%,91%)250235215#faebd7
black text white textaquamarine16010075hsl(160,100%,75%)127255212#7fffd4
black text white textazure18010097hsl(180,100%,97%)240255255#f0ffff
black text white textbeige605691hsl(60,56%,91%)245245220#f5f5dc
black text white textbisque3310088hsl(33,100%,88%)255228196#ffe4c4
black text white textblanchedalmond3610090hsl(36,100%,90%)255235205#ffebcd
black text white textblueviolet2717653hsl(271,76%,53%)13843226#8a2be2
black text white textbrown05941hsl(0,59%,41%)1654242#a52a2a
black text white textburlywood345770hsl(34,57%,70%)222184135#deb887
black text white textcadetblue1822550hsl(182,25%,50%)95158160#5f9ea0
black text white textchartreuse9010050hsl(90,100%,50%)1272550#7fff00
black text white textchocolate257547hsl(25,75%,47%)21010530#d2691e
black text white textcoral1610066hsl(16,100%,66%)25512780#ff7f50
black text white textcornflowerblue2197966hsl(219,79%,66%)100149237#6495ed
black text white textcornsilk4810093hsl(48,100%,93%)255248220#fff8dc
black text white textcrimson3488347hsl(348,83%,47%)2202060#dc143c
black text white textcyan18010050hsl(180,100%,50%)0255255#00ffff
black text white textdarkblue24010027hsl(240,100%,27%)00139#00008b
black text white textdarkcyan18010027hsl(180,100%,27%)0139139#008b8b
black text white textdarkgoldenrod438938hsl(43,89%,38%)18413411#b8860b
black text white textdarkgray0066hsl(0,0%,66%)169169169#a9a9a9
black text white textdarkgreen12010020hsl(120,100%,20%)01000#006400
black text white textdarkgrey0066hsl(0,0%,66%)169169169#a9a9a9
black text white textdarkkhaki563858hsl(56,38%,58%)189183107#bdb76b
black text white textdarkmagenta30010027hsl(300,100%,27%)1390139#8b008b
black text white textdarkolivegreen823930hsl(82,39%,30%)8510747#556b2f
black text white textdarkorange3310050hsl(33,100%,50%)2551400#ff8c00
black text white textdarkorchid2806150hsl(280,61%,50%)15350204#9932cc
black text white textdarkred010027hsl(0,100%,27%)13900#8b0000
black text white textdarksalmon157270hsl(15,72%,70%)233150122#e9967a
black text white textdarkseagreen1202565hsl(120,25%,65%)143188143#8fbc8f
black text white textdarkslateblue2483939hsl(248,39%,39%)7261139#483d8b
black text white textdarkslategray1802525hsl(180,25%,25%)477979#2f4f4f
black text white textdarkslategrey1802525hsl(180,25%,25%)477979#2f4f4f
black text white textdarkturquoise18110041hsl(181,100%,41%)0206209#00ced1
black text white textdarkviolet28210041hsl(282,100%,41%)1480211#9400d3
black text white textdeeppink32810054hsl(328,100%,54%)25520147#ff1493
black text white textdeepskyblue19510050hsl(195,100%,50%)0191255#00bfff
black text white textdimgray0041hsl(0,0%,41%)105105105#696969
black text white textdimgrey0041hsl(0,0%,41%)105105105#696969
black text white textdodgerblue21010056hsl(210,100%,56%)30144255#1e90ff
black text white textfirebrick06842hsl(0,68%,42%)1783434#b22222
black text white textfloralwhite4010097hsl(40,100%,97%)255250240#fffaf0
black text white textforestgreen1206134hsl(120,61%,34%)3413934#228b22
black text white textgainsboro0086hsl(0,0%,86%)220220220#dcdcdc
black text white textghostwhite24010099hsl(240,100%,99%)248248255#f8f8ff
black text white textgold5110050hsl(51,100%,50%)2552150#ffd700
black text white textgoldenrod437449hsl(43,74%,49%)21816532#daa520
black text white textgreenyellow8410059hsl(84,100%,59%)17325547#adff2f
black text white textgrey0050hsl(0,0%,50%)128128128#808080
black text white texthoneydew12010097hsl(120,100%,97%)240255240#f0fff0
black text white texthotpink33010071hsl(330,100%,71%)255105180#ff69b4
black text white textindianred05358hsl(0,53%,58%)2059292#cd5c5c
black text white textindigo27510025hsl(275,100%,25%)750130#4b0082
black text white textivory6010097hsl(60,100%,97%)255255240#fffff0
black text white textkhaki547775hsl(54,77%,75%)240230140#f0e68c
black text white textlavender2406794hsl(240,67%,94%)230230250#e6e6fa
black text white textlavenderblush34010097hsl(340,100%,97%)255240245#fff0f5
black text white textlawngreen9010049hsl(90,100%,49%)1242520#7cfc00
black text white textlemonchiffon5410090hsl(54,100%,90%)255250205#fffacd
black text white textlightblue1955379hsl(195,53%,79%)173216230#add8e6
black text white textlightcoral07972hsl(0,79%,72%)240128128#f08080
black text white textlightcyan18010094hsl(180,100%,94%)224255255#e0ffff
black text white textlightgoldenrodyellow608090hsl(60,80%,90%)250250210#fafad2
black text white textlightgray0083hsl(0,0%,83%)211211211#d3d3d3
black text white textlightgreen1207375hsl(120,73%,75%)144238144#90ee90
black text white textlightgrey0083hsl(0,0%,83%)211211211#d3d3d3
black text white textlightpink35110086hsl(351,100%,86%)255182193#ffb6c1
black text white textlightsalmon1710074hsl(17,100%,74%)255160122#ffa07a
black text white textlightseagreen1777041hsl(177,70%,41%)32178170#20b2aa
black text white textlightskyblue2039275hsl(203,92%,75%)135206250#87cefa
black text white textlightslategray2101453hsl(210,14%,53%)119136153#778899
black text white textlightslategrey2101453hsl(210,14%,53%)119136153#778899
black text white textlightsteelblue2144178hsl(214,41%,78%)176196222#b0c4de
black text white textlightyellow6010094hsl(60,100%,94%)255255224#ffffe0
black text white textlimegreen1206150hsl(120,61%,50%)5020550#32cd32
black text white textlinen306794hsl(30,67%,94%)250240230#faf0e6
black text white textmagenta30010050hsl(300,100%,50%)2550255#ff00ff
black text white textmediumaquamarine1605160hsl(160,51%,60%)102205170#66cdaa
black text white textmediumblue24010040hsl(240,100%,40%)00205#0000cd
black text white textmediumorchid2885958hsl(288,59%,58%)18685211#ba55d3
black text white textmediumpurple2606065hsl(260,60%,65%)147112219#9370db
black text white textmediumseagreen1475047hsl(147,50%,47%)60179113#3cb371
black text white textmediumslateblue2498067hsl(249,80%,67%)123104238#7b68ee
black text white textmediumspringgreen15710049hsl(157,100%,49%)0250154#00fa9a
black text white textmediumturquoise1786055hsl(178,60%,55%)72209204#48d1cc
black text white textmediumvioletred3228143hsl(322,81%,43%)19921133#c71585
black text white textmidnightblue2406427hsl(240,64%,27%)2525112#191970
black text white textmintcream15010098hsl(150,100%,98%)245255250#f5fffa
black text white textmistyrose610094hsl(6,100%,94%)255228225#ffe4e1
black text white textmoccasin3810085hsl(38,100%,85%)255228181#ffe4b5
black text white textnavajowhite3610084hsl(36,100%,84%)255222173#ffdead
black text white textoldlace398595hsl(39,85%,95%)253245230#fdf5e6
black text white textolivedrab806035hsl(80,60%,35%)10714235#6b8e23
black text white textorangered1610050hsl(16,100%,50%)255690#ff4500
black text white textorchid3025965hsl(302,59%,65%)218112214#da70d6
black text white textpalegoldenrod556780hsl(55,67%,80%)238232170#eee8aa
black text white textpalegreen1209379hsl(120,93%,79%)152251152#98fb98
black text white textpaleturquoise1806581hsl(180,65%,81%)175238238#afeeee
black text white textpalevioletred3406065hsl(340,60%,65%)219112147#db7093
black text white textpapayawhip3710092hsl(37,100%,92%)255239213#ffefd5
black text white textpeachpuff2810086hsl(28,100%,86%)255218185#ffdab9
black text white textperu305953hsl(30,59%,53%)20513363#cd853f
black text white textpink35010088hsl(350,100%,88%)255192203#ffc0cb
black text white textplum3004775hsl(300,47%,75%)221160221#dda0dd
black text white textpowderblue1875280hsl(187,52%,80%)176224230#b0e0e6
black text white textrosybrown02565hsl(0,25%,65%)188143143#bc8f8f
black text white textroyalblue2257357hsl(225,73%,57%)65105225#4169e1
black text white textsaddlebrown257631hsl(25,76%,31%)1396919#8b4513
black text white textsalmon69371hsl(6,93%,71%)250128114#fa8072
black text white textsandybrown288767hsl(28,87%,67%)24416496#f4a460
black text white textseagreen1465036hsl(146,50%,36%)4613987#2e8b57
black text white textseashell2510097hsl(25,100%,97%)255245238#fff5ee
black text white textsienna195640hsl(19,56%,40%)1608245#a0522d
black text white textskyblue1977173hsl(197,71%,73%)135206235#87ceeb
black text white textslateblue2485358hsl(248,53%,58%)10690205#6a5acd
black text white textslategray2101350hsl(210,13%,50%)112128144#708090
black text white textslategrey2101350hsl(210,13%,50%)112128144#708090
black text white textsnow010099hsl(0,100%,99%)255250250#fffafa
black text white textspringgreen15010050hsl(150,100%,50%)0255127#00ff7f
black text white textsteelblue2074449hsl(207,44%,49%)70130180#4682b4
black text white texttan344469hsl(34,44%,69%)210180140#d2b48c
black text white textthistle3002480hsl(300,24%,80%)216191216#d8bfd8
black text white texttomato910064hsl(9,100%,64%)2559971#ff6347
black text white textturquoise1747256hsl(174,72%,56%)64224208#40e0d0
black text white textviolet3007672hsl(300,76%,72%)238130238#ee82ee
black text white textwheat397783hsl(39,77%,83%)245222179#f5deb3
black text white textwhitesmoke0096hsl(0,0%,96%)245245245#f5f5f5
black text white textyellowgreen806150hsl(80,61%,50%)15420550#9acd32
Share This Using...
Personal E-mail... Facebook... Twitter... StumbleUpon... del.icio.us... Digg... Reddit... FriendFeed... MySpace... Google Bookmarks... LinkedIn... Mixx... Technorati... Posterous... Plurk... Ping.fm... Diigo... Faves... Mister Wong... dzone... Connotea...