What are CSS color keywords or named colors?
CSS color keywords, or named colors, are predefined color values that can be used in CSS to set the color of text, backgrounds, borders, and other elements on a webpage.
CSS color keywords
Summary
List of all CSS color names, so called named colors, or color keywords as they are officially called, along with their hexadecimal (HEX), decimal Red-Green-Blue (RGB), and Hue-Saturation-Lightness (HSL) values.
What are CSS color keywords? #
CSS color keywords provide a way to specify colors in a manner that is both easy to read and understand. While more advanced color specifications are available in CSS, these basic color keywords remain a convenient and accessible way to define colors in CSS and HTML. CSS color names are supported by all Web browsers.
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 | #5F9EA05F9EA0FF | 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 | #00BFFF00BFFFFF | 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) |
Important information #
In CSS there are 147 color names, but just 142 named colors.
Several keywords are aliases for each other, e.g. aqua / cyan, fuchsia / magenta, and gray / grey. All colors which contain the color gray can be spelled either a or e.
For example, darkgray can also be spelled darkgrey.
The CSS color names are ASCII case-insensitive, you can use lowercase or uppercase letters.
Usage #
Using color names in CSS #
You can use color names in CSS like this:
p {
color: red; /* Sets the text color to red */
background-color: yellow; /* Sets the background color to yellow */
}
Using color names in HTML #
You can use color names in HTML like this:
<p style="color: red; background-color: yellow;">This is a paragraph with red text on a yellow background.</p>
FAQ's #
Most common questions and brief, easy-to-understand answers on the topic:
How many CSS color keywords are there?
There are 147 CSS color keywords defined in the CSS specification, including colors like "red," "blue," "green," and more.
Can I create my own named colors in CSS?
No, you cannot create your own named colors in CSS. Named colors are predefined and cannot be extended or customized.
Are CSS color keywords case-sensitive?
No, CSS color keywords are not case-sensitive. You can use them in lowercase or uppercase letters, and they will work the same way.
Are CSS color keywords supported in all web browsers?
Generally, CSS color keywords are widely supported across modern web browsers. However, it's always a good practice to check compatibility if you need to support specific browsers.
Can I use CSS color keywords for background gradients?
Yes, you can use CSS color keywords in background gradients in modern browsers that support gradient backgrounds.
Are there any limitations to using CSS color keywords?
CSS color keywords have some limitations in terms of color precision and flexibility compared to using RGB hexadecimal or RGBA values. If you need very specific or custom colors or an alpha channel, you may prefer using other color notations.
Can I use CSS color keywords in print stylesheets?
Yes, you can use CSS color keywords in print stylesheets to control the color of text and other elements when printing web pages.
Further readings #
Sources and recommended, further resources on the topic:
- W3C: CSS Color Module Level 4
- W3C: Basic color keywords
- W3C: Extended color keywords
- W3C: Recognized color keyword names
- W3C: Named Colors
- Can I use: Named Colors
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer and developer since 2001. On top of that, his areas of expertise are in user experience, accessibility, internationalization, and domain names. See: https://www.j15k.com/License
License: CSS color keywords 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.uxgem.com/docs/css-color-keywords">CSS color keywords</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 UXgem legal page.
“Learning from conventions will make your site better.”
