CSS named colors
Summary
A comprehensive guide to all 147 CSS color keywords, including their 142 unique named colors. Contains a list of all CSS Color Module Level 4 named colors — listed with hex, RGB, and HSL values.
What are CSS named colors #
In Cascading Style Sheets (CSS), named colors are a set of 147 defined keywords that represent 142 colors values. They are defined in the CSS Color Module specification maintained by the World Wide Web Consortium (W3C).
CSS named colors simplify the process of styling elements by providing readable and intuitive color names. You can use these names directly in your style rules with any CSS property that accepts a color value, such as color, background-color, and border-color. Also see usage.
List of CSS color names #
Several keywords are aliases for each other, e.g. aqua / cyan, fuchsia / magenta, and gray / grey. Colors which contain the color gray can be spelled with either a or e, e.g. darkgray or darkgrey.
Basic color keywords #
| Example | Keyword(s) | HEX(A) | RGB(A) | HSL(A) |
|---|---|---|---|---|
black | #000000 #000000FF | rgb(0,0,0) rgba(0,0,0,1) | hsl(0,0%,0%) hsla(0,0%,0%,1) | |
silver | #C0C0C0 #C0C0C0FF | rgb(192,192,192) rgba(192,192,192,1) | hsl(0,0%,75.29%) hsla(0,0%,75.29%,1) | |
gray / grey | #808080 #808080FF | rgb(128,128,128) rgba(128,128,128,1) | hsl(0,0%,50.2%) hsla(0,0%,50.2%,1) | |
white | #FFFFFF #FFFFFFFF | rgb(255,255,255) rgba(255,255,255,1) | hsl(0,0%,100%) hsla(0,0%,100%,1) | |
maroon | #800000 #800000FF | rgb(128,0,0) rgba(128,0,0,1) | hsl(0,100%,25.1%) hsla(0,100%,25.1%,1) | |
red | #FF0000 #FF0000FF | rgb(255,0,0) rgba(255,0,0,1) | hsl(0,100%,50%) hsla(0,100%,50%,1) | |
purple | #800080 #800080FF | rgb(128,0,128) rgba(128,0,128,1) | hsl(300,100%,25.1%) hsla(300,100%,25.1%,1) | |
fuchsia / magenta | #FF00FF #FF00FFFF | rgb(255,0,255) rgba(255,0,255,1) | hsl(300,100%,50%) hsla(300,100%,50%,1) | |
green | #008000 #008000FF | rgb(0,128,0) rgba(0,128,0,1) | hsl(120,100%,25.1%) hsla(120,100%,25.1%,1) | |
lime | #00FF00 #00FF00FF | rgb(0,255,0) rgba(0,255,0,1) | hsl(120,100%,50%) hsla(120,100%,50%,1) | |
olive | #808000 #808000FF | rgb(128,128,0) rgba(128,128,0,1) | hsl(60,100%,25.1%) hsla(60,100%,25.1%,1) | |
yellow | #FFFF00 #FFFF00FF | rgb(255,255,0) rgba(255,255,0,1) | hsl(60,100%,50%) hsla(60,100%,50%,1) | |
navy | #000080 #000080FF | rgb(0,0,128) rgba(0,0,128,1) | hsl(240,100%,25.1%) hsla(240,100%,25.1%,1) | |
blue | #0000FF #0000FFFF | rgb(0,0,255) rgba(0,0,255,1) | hsl(240,100%,50%) hsla(240,100%,50%,1) | |
teal | #008080 #008080FF | rgb(0,128,128) rgba(0,128,128,1) | hsl(180,100%,25.1%) hsla(180,100%,25.1%,1) | |
aqua / cyan | #00FFFF #00FFFFFF | rgb(0,255,255) rgba(0,255,255,1) | hsl(180,100%,50%) hsla(180,100%,50%,1) |
Extended color keywords #
| Example | Keyword(s) | HEX(A) | RGB(A) | HSL(A) |
|---|---|---|---|---|
aliceblue | #F0F8FF #F0F8FFFF | rgb(240,248,255) rgba(240,248,255,1) | hsl(208,100%,97.06%) hsla(208,100%,97.06%,1) | |
antiquewhite | #FAEBD7 #FAEBD7FF | rgb(250,235,215) rgba(250,235,215,1) | hsl(34.29,77.78%,91.18%) hsla(34.29,77.78%,91.18%,1) | |
aquamarine | #7FFFD4 #7FFFD4FF | rgb(127,255,212) rgba(127,255,212,1) | hsl(159.84,100%,74.9%) hsla(159.84,100%,74.9%,1) | |
azure | #F0FFFF #F0FFFFFF | rgb(240,255,255) rgba(240,255,255,1) | hsl(180,100%,97.06%) hsla(180,100%,97.06%,1) | |
beige | #F5F5DC #F5F5DCFF | rgb(245,245,220) rgba(245,245,220,1) | hsl(60,55.56%,91.18%) hsla(60,55.56%,91.18%,1) | |
bisque | #FFE4C4 #FFE4C4FF | rgb(255,228,196) rgba(255,228,196,1) | hsl(32.54,100%,88.43%) hsla(32.54,100%,88.43%,1) | |
blanchedalmond | #FFEBCD #FFEBCDFF | rgb(255,235,205) rgba(255,235,205,1) | hsl(36,100%,90.2%) hsla(36,100%,90.2%,1) | |
blueviolet | #8A2BE2 #8A2BE2FF | rgb(138,43,226) rgba(138,43,226,1) | hsl(271.15,75.93%,52.75%) hsla(271.15,75.93%,52.75%,1) | |
brown | #A52A2A #A52A2AFF | rgb(165,42,42) rgba(165,42,42,1) | hsl(0,59.42%,40.59%) hsla(0,59.42%,40.59%,1) | |
burlywood | #DED887 #DED887FF | rgb(222,184,135) rgba(222,184,135,1) | hsl(33.79,56.86%,70%) hsla(33.79,56.86%,70%,1) | |
cadetblue | #5F9EA0 5F9EA0FF | rgb(95,158,160) rgba(95,158,160,1) | hsl(181.85,25.49%,50%) hsla(181.85,25.49%,50%,1) | |
chartreuse | #7FFF00 #7FFF00FF | rgb(127,255,0) rgba(127,255,0,1) | hsl(90.12,100%,50%) hsla(90.12,100%,50%,1) | |
chocolate | #D2691E #D2691EFF | rgb(210,105,30) rgba(210,105,30,1) | hsl(25,75%,47.06%) hsla(25,75%,47.06%,1) | |
coral | #FF7F50 #FF7F50FF | rgb(255,127,80) rgba(255,127,80,1) | hsl(16.11,100%,65.69%) hsla(16.11,100%,65.69%,1) | |
cornflowerblue | #6495ED #6495EDFF | rgb(100,149,237) rgba(100,149,237,1) | hsl(218.54,79.19%,66.08%) hsla(218.54,79.19%,66.08%,1) | |
cornsilk | #FFF8DC #FFF8DCFF | rgb(255,248,220) rgba(255,248,220,1) | hsl(48,100%,93.14%) hsla(48,100%,93.14%,1) | |
crimson | #DC143C #DC143CFF | rgb(220,20,60) rgba(220,20,60,1) | hsl(348,83.33%,47.06%) hsla(348,83.33%,47.06%,1) | |
darkblue | #00008B #00008BFF | rgb(0,0,139) rgba(0,0,139,1) | hsl(240,100%,27.25%) hsla(240,100%,27.25%,1) | |
darkcyan | #008B8B #008B8BFF | rgb(0,139,139) rgba(0,139,139,1) | hsl(180,100%,27.25%) hsla(180,100%,27.25%,1) | |
darkgoldenrod | #B8860B #B8860BFF | rgb(184,134,11) rgba(184,134,11,1) | hsl(42.66,88.72%,38.24%) hsla(42.66,88.72%,38.24%,1) | |
darkgray / darkgrey | #A9A9A9 #A9A9A9FF | rgb(169,169,169) rgba(169,169,169,1) | hsl(0,0%,66.27%) hsla(0,0%,66.27%,1) | |
darkgreen | #006400 #006400FF | rgb(0,100,0) rgba(0,100,0,1) | hsl(120,100%,19.61%) hsla(120,100%,19.61%,1) | |
darkkhaki | #BDB76B #BDB76BFF | rgb(189,183,107) rgba(189,183,107,1) | hsl(55.61,38.32%,58.04%) hsla(55.61,38.32%,58.04%,1) | |
darkmagenta | #8B008B #8B008BFF | rgb(139,0,139) rgba(139,0,139,1) | hsl(300,100%,27.25%) hsla(300,100%,27.25%,1) | |
darkolivegreen | #556B2F #556B2F | rgb(85,107,47) rgba(85,107,47,1) | hsl(82,38.96%,30.2%) hsla(82,38.96%,30.2%,1) | |
darkorange | #FF8C00 #FF8C00FF | rgb(255,140,0) rgba(255,140,0,1) | hsl(32.94,100%,50%) hsla(32.94,100%,50%,1) | |
darkorchid | #9932CC #9932CCFF | rgb(153,50,204) rgba(153,50,204,1) | hsl(280.13,60.63%,49.8%) hsla(280.13,60.63%,49.8%,1) | |
darkred | #8B0000 #8B0000FF | rgb(139,0,0) rgba(139,0,0,1) | hsl(0,100%,27.25%) hsla(0,100%,27.25%,1) | |
darksalmon | #E9967A #E9967AFF | rgb(233,150,122) rgba(233,150,122,1) | hsl(15.14,71.61%,69.61%) hsla(15.14,71.61%,69.61%,1) | |
darkseagreen | #8FBC8F #8FBC8FFF | rgb(143,188,143) rgba(143,188,143,1) | hsl(120,25.14%,64.9%) hsla(120,25.14%,64.9%,1) | |
darkslateblue | #483D8B #483D8BFF | rgb(72,61,139) rgba(72,61,139,1) | hsl(248.46,39%,39.22%) hsla(248.46,39%,39.22%,1) | |
darkslategray / darkslategrey | #2F4F4F #2F4F4FFF | rgb(47,79,79) rgba(47,79,79,1) | hsl(180,25.4%,24.71%) hsla(180,25.4%,24.71%,1) | |
darkturquoise | #00CED1 #00CED1FF | rgb(0,206,209) rgba(0,206,209,1) | hsl(180.86,100%,40.98%) hsla(180.86,100%,40.98%,1) | |
darkviolet | #9400D3 #9400D3FF | rgb(148,0,211) rgba(148,0,211,1) | hsl(282.09,100%,41.37%) hsla(282.09,100%,41.37%,1) | |
deeppink | #FF1493 #FF1493FF | rgb(255,20,147) rgba(255,20,147,1) | hsl(327.57,100%,53.92%) hsla(327.57,100%,53.92%,1) | |
deepskyblue | #00BFFF 00BFFFFF | rgb(0,191,255) rgba(0,191,255,1) | hsl(195.06,100%,50%) hsla(195.06,100%,50%,1) | |
dimgray / dimgrey | #696969 #696969FF | rgb(105,105,105) rgba(105,105,105,1) | hsl(0,0%,41.18%) hsla(0,0%,41.18%,1) | |
dodgerblue | #1E90FF #1E90FFFF | rgb(30,144,255) rgba(30,144,255,1) | hsl(209.6,100%,55.88%) hsla(209.6,100%,55.88%,1) | |
firebrick | #B22222 #B22222FF | rgb(178,34,34) rgba(178,34,34,1) | hsl(0,67.92%,41.57%) hsla(0,67.92%,41.57%,1) | |
floralwhite | #FFFAF0 #FFFAF0FF | rgb(255,250,240) rgba(255,250,240,1) | hsl(40,100%,97.06%) hsla(40,100%,97.06%,1) | |
forestgreen | #228B22 #228B22FF | rgb(34,139,34) rgba(34,139,34,1) | hsl(120,60.69%,33.92%) hsla(120,60.69%,33.92%,1) | |
gainsboro | #DCDCDC #DCDCDCFF | rgb(220,220,220) rgba(220,220,220,1) | hsl(0,0%,86.27%) hsla(0,0%,86.27%,1) | |
ghostwhite | #F8F8FF #F8F8FFFF | rgb(248,248,255) rgba(248,248,255,1) | hsl(0,0%,0%) hsla(0,0%,0%,1) | |
gold | #FFD700 #FFD700FF | rgb(255,215,0) rgba(255,215,0,1) | hsl(50.59,100%,50%) hsla(50.59,100%,50%,1) | |
goldenrod | #DAA520 #DAA520FF | rgb(218,165,32) rgba(218,165,32,1) | hsl(42.9,74.4%,49.02%) hsla(42.9,74.4%,49.02%,1) | |
greenyellow | #ADFF2F #ADFF2FFF | rgb(173,255,47) rgba(173,255,47,1) | hsl(83.65,100%,59.22%) hsla(83.65,100%,59.22%,1) | |
honeydew | #F0FFF0 #F0FFF0FF | rgb(240,255,240) rgba(240,255,240,1) | hsl(120,100%,97.06%) hsla(120,100%,97.06%,1) | |
hotpink | #FF69B4 #FF69B4FF | rgb(255,105,180) rgba(255,105,180,1) | hsl(330,100%,70.59%) hsla(330,100%,70.59%,1) | |
indianred | #CD5C5C #CD5C5CFF | rgb(205,92,92) rgba(205,92,92,1) | hsl(0,53.05%,58.24%) hsla(0,53.05%,58.24%,1) | |
indigo | #4B0082 #4B0082FF | rgb(75,0,130) rgba(75,0,130,1) | hsl(274.62,100%,25.49%) hsla(274.62,100%,25.49%,1) | |
ivory | #FFFFF0 #FFFFF0FF | rgb(255,255,240) rgba(255,255,240,1) | hsl(60,100%,97.06%) hsla(60,100%,97.06%,1) | |
khaki | #F0E68C #F0E68CFF | rgb(240,230,140) rgba(240,230,140,1) | hsl(54,76.92%,74.51%) hsla(54,76.92%,74.51%,1) | |
lavender | #E6E6FA #E6E6FAFF | rgb(230,230,250) rgba(230,230,250,1) | hsl(240,66.67%,94.12%) hsla(240,66.67%,94.12%,1) | |
lavenderblush | #FFF0F5 #FFF0F5FF | rgb(255,240,245) rgba(255,240,245,1) | hsl(340,100%,97.06%) hsla(340,100%,97.06%,1) | |
lawngreen | #7CFC00 #7CFC00FF | rgb(124,252,0) rgba(124,252,0,1) | hsl(90.48,100%,49.41%) hsla(90.48,100%,49.41%,1) | |
lemonchiffon | #FFFACD #FFFACDFF | rgb(255,250,205) rgba(255,250,205,1) | hsl(54,100%,90.2%) hsla(54,100%,90.2%,1) | |
lightblue | #ADD8E6 #ADD8E6FF | rgb(173,216,230) rgba(173,216,230,1) | hsl(194.74,53.27%,79.02%) hsla(194.74,53.27%,79.02%,1) | |
lightcoral | #F08080 #F08080FF | rgb(240,128,128) rgba(240,128,128,1) | hsl(0,78.87%,72.16%) hsla(0,78.87%,72.16%,1) | |
lightcyan | #E0FFFF #E0FFFFFF | rgb(224,255,255) rgba(224,255,255,1) | hsl(180,100%,93.92%) hsla(180,100%,93.92%,1) | |
lightgoldenrodyellow | #FAFAD2 #FAFAD2FF | rgb(250,250,210) rgba(250,250,210,1) | hsl(60,80%,90.2%) hsla(60,80%,90.2%,1) | |
lightgray / lightgrey | #D3D3D3 #D3D3D3FF | rgb(211,211,211) rgba(211,211,211,1) | hsl(0,0%,82.75%) hsla(0,0%,82.75%,1) | |
lightgreen | #90EE90 #90EE90FF | rgb(144,238,144) rgba(144,238,144,1) | hsl(120,73.44%,74.9%) hsla(120,73.44%,74.9%,1) | |
lightpink | #FFB6C1 #FFB6C1FF | rgb(255,182,193) rgba(255,182,193,1) | hsl(350.96,100%,85.69%) hsla(350.96,100%,85.69%,1) | |
lightsalmon | #FFA07A #FFA07AFF | rgb(255,160,122) rgba(255,160,122,1) | hsl(17.14,100%,73.92%) hsla(17.14,100%,73.92%,1) | |
lightseagreen | #20B2AA #20B2AAFF | rgb(32,178,170) rgba(32,178,170,1) | hsl(176.71,69.52%,41.18%) hsla(176.71,69.52%,41.18%,1) | |
lightskyblue | #87CEFA #87CEFAFF | rgb(135,206,250) rgba(135,206,250,1) | hsl(202.96,92%,75.49%) hsla(202.96,92%,75.49%,1) | |
lightslategray / lightslategrey | #778899 #778899FF | rgb(119,136,153) rgba(119,136,153,1) | hsl(210,14.29%,53.33%) hsla(210,14.29%,53.33%,1) | |
lightsteelblue | #B0C4DE #B0C4DEFF | rgb(176,196,222) rgba(176,196,222,1) | hsl(213.91,41.07%,78.04%) hsla(213.91,41.07%,78.04%,1) | |
lightyellow | #FFFFE0 #FFFFE0FF | rgb(255,255,224) rgba(255,255,224,1) | hsl(60,100%,93.92%) hsla(60,100%,93.92%,1) | |
lime | #00FF00 #00FF00FF | rgb(0,255,0) rgba(0,255,0,1) | hsl(120,100%,50%) hsla(120,100%,50%,1) | |
limegreen | #32CD32 #32CD32FF | rgb(50,205,50) rgba(50,205,50,1) | hsl(120,60.78%,50%) hsla(120,60.78%,50%,1) | |
linen | #FAF0E6 #FAF0E6FF | rgb(250,240,230) rgba(250,240,230,1) | hsl(30,66.67%,94.12%) hsla(30,66.67%,94.12%,1) | |
maroon | #800000 #800000FF | rgb(128,0,0) rgba(128,0,0,1) | hsl(0,100%,25.1%) hsla(0,100%,25.1%,1) | |
mediumaquamarine | #66CDAA #66CDAAFF | rgb(102,205,170) rgba(102,205,170,1) | hsl(159.61,50.74%,60.2%) hsla(159.61,50.74%,60.2%,1) | |
mediumblue | #0000CD #0000CDFF | rgb(0,0,205) rgba(0,0,205,1) | hsl(240,100%,40.2%) hsla(240,100%,40.2%,1) | |
mediumorchid | #BA55D3 #BA55D3FF | rgb(186,85,211) rgba(186,85,211,1) | hsl(288.1,58.88%,58.04%) hsla(288.1,58.88%,58.04%,1) | |
mediumpurple | #9370DB #9370DBFF | rgb(147,112,219) rgba(147,112,219,1) | hsl(259.63,59.78%,64.9%) hsla(259.63,59.78%,64.9%,1) | |
mediumseagreen | #3CB371 #3CB371 | rgb(60,179,113) rgba(60,179,113,1) | hsl(146.72,49.79%,46.86%) hsla(146.72,49.79%,46.86%,1) | |
mediumslateblue | #7B68EE #7B68EEFF | rgb(123,104,238) rgba(123,104,238,1) | hsl(248.51,79.76%,67.06%) hsla(248.51,79.76%,67.06%,1) | |
mediumspringgreen | #00FA9A #00FA9AFF | rgb(0,250,154) rgba(0,250,154,1) | hsl(156.96,100%,49.02%) hsla(156.96,100%,49.02%,1) | |
mediumturquoise | #48D1CC #48D1CCFF | rgb(72,209,204) rgba(72,209,204,1) | hsl(177.81,59.83%,55.1%) hsla(177.81,59.83%,55.1%,1) | |
mediumvioletred | #C71585 #C71585FF | rgb(199,21,133) rgba(199,21,133,1) | hsl(322.25,80.91%,43.14%) hsla(322.25,80.91%,43.14%,1) | |
midnightblue | #191970 #191970FF | rgb(25,25,112) rgba(25,25,112,1) | hsl(240,63.5%,26.86%) hsla(240,63.5%,26.86%,1) | |
mintcream | #F5FFFA #F5FFFAFF | rgb(245,255,250) rgba(245,255,250,1) | hsl(150,100%,98.04%) hsla(150,100%,98.04%,1) | |
mistyrose | #FFE4E1 #FFE4E1FF | rgb(255,228,225) rgba(255,228,225,1) | hsl(6,100%,94.12%) hsla(6,100%,94.12%,1) | |
moccasin | #FFE4B5 #FFE4B5FF | rgb(255,228,181) rgba(255,228,181,1) | hsl(38.11,100%,85.49%) hsla(38.11,100%,85.49%,1) | |
navajowhite | #FFDEAD #FFDEADFF | rgb(255,222,173) rgba(255,222,173,1) | hsl(35.85,100%,83.92%) hsla(35.85,100%,83.92%,1) | |
oldlace | #FDF5E6 #FDF5E6FF | rgb(253,245,230) rgba(253,245,230,1) | hsl(39.13,85.19%,94.71%) hsla(39.13,85.19%,94.71%,1) | |
olivedrab | #6B8E23 #6B8E23FF | rgb(107,142,35) rgba(107,142,35,1) | hsl(79.63,60.45%,34.71%) hsla(79.63,60.45%,34.71%,1) | |
orange | #FFA500 #FFA500FF | rgb(255,165,0) rgba(255,165,0,1) | hsl(38.82,100%,50%) hsla(38.82,100%,50%,1) | |
orangered | #FF4500 #FF4500FF | rgb(255,69,0) rgba(255,69,0,1) | hsl(16.24,100%,50%) hsla(16.24,100%,50%,1) | |
orchid | #DA70D6 #DA70D6FF | rgb(218,112,214) rgba(218,112,214,1) | hsl(302.26,58.89%,64.71%) hsla(302.26,58.89%,64.71%,1) | |
palegoldenrod | #EEE8AA #EEE8AAFF | rgb(238,232,170) rgba(238,232,170,1) | hsl(54.71,66.67%,80%) hsla(54.71,66.67%,80%,1) | |
palegreen | #98FB98 #98FB98FF | rgb(152,251,152) rgba(152,251,152,1) | hsl(120,92.52%,79.02%) hsla(120,92.52%,79.02%,1) | |
paleturquoise | #AFEEEE #AFEEEEFF | rgb(175,238,238) rgba(175,238,238,1) | hsl(180,64.95%,80.98%) hsla(180,64.95%,80.98%,1) | |
palevioletred | #DB7093 #DB7093FF | rgb(219,112,147) rgba(219,112,147,1) | hsl(340.37,59.78%,64.9%) hsla(340.37,59.78%,64.9%,1) | |
papayawhip | #FFEFD5 #FFEFD5FF | rgb(255,239,213) rgba(255,239,213,1) | hsl(37.14,100%,91.76%) hsla(37.14,100%,91.76%,1) | |
peachpuff | #FFDAB9 #FFDAB9FF | rgb(255,218,185) rgba(255,218,185,1) | hsl(28.29,100%,86.27%) hsla(28.29,100%,86.27%,1) | |
peru | #CD853F #CD853FFF | rgb(205,133,63) rgba(205,133,63,1) | hsl(29.58,58.68%,52.55%) hsla(29.58,58.68%,52.55%,1) | |
pink | #FFC0CB #FFC0CBFF | rgb(255,192,203) rgba(255,192,203,1) | hsl(349.52,100%,87.65%) hsla(349.52,100%,87.65%,1) | |
plum | #DDA0DD #DDA0DDFF | rgb(221,160,221) rgba(221,160,221,1) | hsl(300,47.29%,74.71%) hsla(300,47.29%,74.71%,1) | |
powderblue | #B0E0E6 #B0E0E6FF | rgb(176,224,230) rgba(176,224,230,1) | hsl(186.67,51.92%,79.61%) hsla(186.67,51.92%,79.61%,1) | |
rebeccapurple | #663399 #663399FF | rgb(102,51,153) rgba(102,51,153,1) | hsl(270,50%,40%) hsla(270,50%,40%,1) | |
rosybrown | #BC8F8F #BC8F8F | rgb(188,143,143) rgba(188,143,143,1) | hsl(0,25.14%,64.9%) hsla(0,25.14%,64.9%,1) | |
royalblue | #4169E1 #4169E1FF | rgb(65,105,225) rgba(65,105,225,1) | hsl(225,72.73%,56.86%) hsla(225,72.73%,56.86%,1) | |
saddlebrown | #8B4513 #8B4513FF | rgb(139,69,19) rgba(139,69,19,1) | hsl(25,75.95%,30.98%) hsla(25,75.95%,30.98%,1) | |
salmon | #FA8072 #FA8072FF | rgb(250,128,114) rgba(250,128,114,1) | hsl(6.18,93.15%,71.37%) hsla(6.18,93.15%,71.37%,1) | |
sandybrown | #F4A460 #F4A460FF | rgb(244,164,96) rgba(244,164,96,1) | hsl(27.57,87.06%,66.67%) hsla(27.57,87.06%,66.67%,1) | |
seagreen | #2E8B57 #2E8B57FF | rgb(46,139,87) rgba(46,139,87,1) | hsl(146.45,50.27%,36.27%) hsla(146.45,50.27%,36.27%,1) | |
seashell | #FFF5EE #FFF5EEFF | rgb(255,245,238) rgba(255,245,238,1) | hsl(24.71,100%,96.67%) hsla(24.71,100%,96.67%,1) | |
sienna | #A0522D #A0522DFF | rgb(160,82,45) rgba(160,82,45,1) | hsl(19.3,56.1%,40.2%) hsla(19.3,56.1%,40.2%,1) | |
skyblue | #87CEEB #87CEEBFF | rgb(135,206,235) rgba(135,206,235,1) | hsl(197.4,71.43%,72.55%) hsla(197.4,71.43%,72.55%,1) | |
slateblue | #6A5ACD #6A5ACDFF | rgb(106,90,205) rgba(106,90,205,1) | hsl(248.35,53.49%,57.84%) hsla(248.35,53.49%,57.84%,1) | |
slategray / slategray | #708090 #708090FF | rgb(112,128,144) rgba(112,128,144,1) | hsl(210,12.6%,50.2%) hsla(210,12.6%,50.2%,1) | |
snow | #FFFAFA #FFFAFAFF | rgb(255,250,250) rgba(255,250,250,1) | hsl(0,100%,99.02%) hsla(0,100%,99.02%,1) | |
springgreen | #00FF7F #00FF7FFF | rgb(0,255,127) rgba(0,255,127,1) | hsl(149.88,100%,50%) hsla(149.88,100%,50%,1) | |
steelblue | #4682B4 #4682B4FF | rgb(70,130,180) rgba(70,130,180,1) | hsl(207.27,44%,49.02%) hsla(207.27,44%,49.02%,1) | |
tan | #D2B48C #D2B48CFF | rgb(210,180,140) rgba(210,180,140,1) | hsl(34.29,43.75%,68.63%) hsla(34.29,43.75%,68.63%,1) | |
thistle | #D8BFD8 #D8BFD8FF | rgb(216,191,216) rgba(216,191,216,1) | hsl(300,24.27%,79.8%) hsla(300,24.27%,79.8%,1) | |
tomato | #FF6347 #FF6347FF | rgb(255,99,71) rgba(255,99,71,1) | hsl(9.13,100%,63.92%) hsla(9.13,100%,63.92%,1) | |
transparent | N/A #00000000 | rgb(n/a) rgba(0,0,0,0) | hsl(n/a) hsla(0,0%,0%,0) | |
turquoise | #40E0D0 #40E0D0FF | rgb(64,224,208) rgba(64,224,208,1) | hsl(174,72.07%,56.47%) hsla(174,72.07%,56.47%,1) | |
violet | #EE82EE #EE82EEFF | rgb(238,130,238) rgba(238,130,238,1) | hsl(300,76.06%,72.16%) hsla(300,76.06%,72.16%,1) | |
wheat | #F5DEB3 #F5DEB3FF | rgb(245,222,179) rgba(245,222,179,1) | hsl(39.09,76.74%,83.14%) hsla(39.09,76.74%,83.14%,1) | |
whitesmoke | #F5F5F5 #F5F5F5FF | rgb(245,245,245) rgba(245,245,245,1) | hsl(0,0%,96.08%) hsla(0,0%,96.08%,1) | |
yellowgreen | #9ACD32 #9ACD32FF | rgb(154,205,50) rgba(154,205,50,1) | hsl(79.74,60.78%,50%) hsla(79.74,60.78%,50%,1) |
The CSS color names are ASCII case-insensitive, you can use lowercase or uppercase letters.
Usage #
In both examples, the heading text color will be steelblue, and its background will be lightgray.
CSS #
Here is an example of how named colors can be used in a CSS rule:
h1 {
color: steelblue;
background-color: lightgray;
}
HTML #
Here is an example of how named colors can be used in a CSS rule in HTML:
<h1 style="color: steelblue; background-color: lightgray;">Heading</h1>
FAQ's #
Most common questions and brief, easy-to-understand answers on the topic:
What are CSS named colors?
CSS named colors are predefined color keywords that can be used directly in Cascading Style Sheets (CSS) without needing to specify a color code.
How many named colors are defined in CSS?
There are 147 named colors defined in the CSS Color Module Level 4, which includes legacy colors and additional standardized names.
Are named colors case-sensitive?
No, CSS named colors are not case-sensitive. You can use upper case, lower case, or mixed case and the result will be the same.
Do named colors work in all browsers?
Yes, all modern web browsers support the full set of CSS named colors defined in the standard.
Further readings #
Sources and recommended, further resources on the topic:
- W3C: CSS Color Module Level 4
- W3C: CSS Color Module Level 4 - named colors
- W3C: Basic color keywords
- W3C: Extended color keywords
- W3C: Recognized color keyword names
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/License
CSS named colors by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/css-named-colors">CSS named colors</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the Ditig legal page.
