Skip to main content

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 #

Complete list of 16 CSS basic color keywords (named colors).
ExampleKeyword(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 #

Complete list of 126 CSS extended color keywords (named colors).
ExampleKeyword(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)

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:

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.

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:

Author

Jonas Jared Jacek • J15k

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.

“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself.”

Donald Arthur Norman, Co-founder of the Nielsen Norman GroupThe Design of Everyday Things, - UX quotes