is coming soon...
ado.xyz

What are CSS Named Colors and How to Use Them

March 24, 2021

CSS can be thanked for making our web pages look good. Choosing the right color can sometimes be a challenge, especially if you’re not a graphic designer. With the three primary colors of red, green, and blue, we can come up with 16,777,216 million unique colors.

If you’ve worked with CSS colors to change the text or background color of an element on a page you’ve likely used hexadecimal or rgb values that represent a specific color. For example, to set the text color on a page to black you might do something like:

body {
  color: #000000;
}

or perhaps:

body {
  color: rgb(0, 0, 0);
}

But did you know that practically all browsers support a list of named colors that you can use in your CSS? That’s right, there are 147 named CSS colors that you can safely use to style your pages. The full list of named colors, alongside their accompanying HEX and RGB values, are provided below.

How to use Named Colors in CSS

To use a named color in CSS, you simply replace the HEX or RGB value with the named value. For example, if you wanted the text color to be the color green, you could do:

body {
  color: green;
}

Or mix it up with one of the many named green variations like:

body {
  color: darkseagreen;
}

body {
  color: forestgreen;
}

body {
  color: seagreen;
}

Here is a list of all 147 named CSS colors. Note that while there are 147 unique names, some colors like gray and grey act as aliases and represent the same underlying RGB color code.

Aliceblue

KeywordHEXRGBOutput
aliceblue
#F0F8FF
rgb(240, 248, 255)

Antiquewhite

KeywordHEXRGBOutput
antiquewhite
#FAEBD7
rgb(250, 235, 215)

Aqua / Cyan

KeywordHEXRGBOutput
aqua
#00FFFF
rgb(0, 255, 255)
cyan
#00FFFF
rgb(0, 255, 255)

Aquamarine

KeywordHEXRGBOutput
aquamarine
#7FFFD4
rgb(127, 255, 212)

Azure

KeywordHEXRGBOutput
azure
#F0FFFF
rgb(240, 255, 255)

Beige

KeywordHEXRGBOutput
beige
#F5F5DC
rgb(245, 245, 220)

Bisque

KeywordHEXRGBOutput
bisque
#FFE4C4
rgb(255, 228, 196)

Black

KeywordHEXRGBOutput
black
#000000
rgb(0, 0, 0)

Blanchedalmond

KeywordHEXRGBOutput
blanchedalmond
#FFEBCD
rgb(255, 235, 205)

Blue

KeywordHEXRGBOutput
blue
#0000FF
rgb(0, 0, 255)

Blueviolet

KeywordHEXRGBOutput
blueviolet
#8A2BE2
rgb(138, 43, 226)

Brown

KeywordHEXRGBOutput
brown
#A52A2A
rgb(165, 42, 42)

Burlywood

KeywordHEXRGBOutput
burlywood
#DEB887
rgb(222, 184, 135)

Cadetblue

KeywordHEXRGBOutput
cadetblue
#5F9EA0
rgb(95, 158, 160)

Chartreuse

KeywordHEXRGBOutput
chartreuse
#7FFF00
rgb(127, 255, 0)

Chocolate

KeywordHEXRGBOutput
chocolate
#D2691E
rgb(210, 105, 30)

Coral

KeywordHEXRGBOutput
coral
#FF7F50
rgb(255, 127, 80)

Cornflowerblue

KeywordHEXRGBOutput
cornflowerblue
#6495ED
rgb(100, 149, 237)

Cornsilk

KeywordHEXRGBOutput
cornsilk
#FFF8DC
rgb(255, 248, 220)

Crimson

KeywordHEXRGBOutput
crimson
#DC143C
rgb(220, 20, 60)

Darkblue

KeywordHEXRGBOutput
darkblue
#00008B
rgb(0, 0, 139)

Darkcyan

KeywordHEXRGBOutput
darkcyan
#008B8B
rgb(0, 139, 139)

Darkgoldenrod

KeywordHEXRGBOutput
darkgoldenrod
#B8860B
rgb(184, 134, 11)

Darkgray / Darkgrey

KeywordHEXRGBOutput
darkgray
#A9A9A9
rgb(169, 169, 169)
darkgrey
#A9A9A9
rgb(169, 169, 169)

Darkgreen

KeywordHEXRGBOutput
darkgreen
#006400
rgb(0, 100, 0)

Darkkhaki

KeywordHEXRGBOutput
darkkhaki
#BDB76B
rgb(189, 183, 107)

Darkmagenta

KeywordHEXRGBOutput
darkmagenta
#8B008B
rgb(139, 0, 139)

Darkolivegreen

KeywordHEXRGBOutput
darkolivegreen
#556B2F
rgb(85, 107, 47)

Darkorange

KeywordHEXRGBOutput
darkorange
#FF8C00
rgb(255, 140, 0)

Darkorchid

KeywordHEXRGBOutput
darkorchid
#9932CC
rgb(153, 50, 204)

Darkred

KeywordHEXRGBOutput
darkred
#8B0000
rgb(139, 0, 0)

Darksalmon

KeywordHEXRGBOutput
darksalmon
#E9967A
rgb(233, 150, 122)

Darkseagreen

KeywordHEXRGBOutput
darkseagreen
#8FBC8F
rgb(143, 188, 143)

Darkslateblue

KeywordHEXRGBOutput
darkslateblue
#483D8B
rgb(72, 61, 139)

Darkslategray / Darkslategrey

KeywordHEXRGBOutput
darkslategray
#2F4F4F
rgb(47, 79, 79)
darkslategrey
#2F4F4F
rgb(47, 79, 79)

Darkturquoise

KeywordHEXRGBOutput
darkturquoise
#00CED1
rgb(0, 206, 209)

Darkviolet

KeywordHEXRGBOutput
darkviolet
#9400D3
rgb(148, 0, 211)

Deeppink

KeywordHEXRGBOutput
deeppink
#FF1493
rgb(255, 20, 147)

Deepskyblue

KeywordHEXRGBOutput
deepskyblue
#00BFFF
rgb(0, 191, 255)

Dimgray / Dimgrey

KeywordHEXRGBOutput
dimgray
#696969
rgb(105, 105, 105)
dimgrey
#696969
rgb(105, 105, 105)

Dodgerblue

KeywordHEXRGBOutput
dodgerblue
#1E90FF
rgb(30, 144, 255)

Firebrick

KeywordHEXRGBOutput
firebrick
#B22222
rgb(178, 34, 34)

Floralwhite

KeywordHEXRGBOutput
floralwhite
#FFFAF0
rgb(255, 250, 240)

Forestgreen

KeywordHEXRGBOutput
forestgreen
#228B22
rgb(34, 139, 34)

Fuchsia / Magenta

KeywordHEXRGBOutput
fuchsia
#FF00FF
rgb(255, 0, 255)
magenta
#FF00FF
rgb(255, 0, 255)

Gainsboro

KeywordHEXRGBOutput
gainsboro
#DCDCDC
rgb(220, 220, 220)

Ghostwhite

KeywordHEXRGBOutput
ghostwhite
#F8F8FF
rgb(248, 248, 255)

Gold

KeywordHEXRGBOutput
gold
#FFD700
rgb(255, 215, 0)

Goldenrod

KeywordHEXRGBOutput
goldenrod
#DAA520
rgb(218, 165, 32)

Greenyellow

KeywordHEXRGBOutput
greenyellow
#ADFF2F
rgb(173, 255, 47)

Gray / Grey

KeywordHEXRGBOutput
gray
#808080
rgb(128, 128, 128)
grey
#808080
rgb(128, 128, 128)

Green

KeywordHEXRGBOutput
green
#008000
rgb(0, 128, 0)

Honeydew

KeywordHEXRGBOutput
honeydew
#F0FFF0
rgb(240, 255, 240)

Hotpink

KeywordHEXRGBOutput
hotpink
#FF69B4
rgb(255, 105, 180)

Indianred

KeywordHEXRGBOutput
indianred
#CD5C5C
rgb(205, 92, 92)

Indigo

KeywordHEXRGBOutput
indigo
#4B0082
rgb(75, 0, 130)

Ivory

KeywordHEXRGBOutput
ivory
#FFFFF0
rgb(255, 255, 240)

Khaki

KeywordHEXRGBOutput
khaki
#F0E68C
rgb(240, 230, 140)

Lavender

KeywordHEXRGBOutput
lavender
#E6E6FA
rgb(230, 230, 250)

Lavenderblush

KeywordHEXRGBOutput
lavenderblush
#FFF0F5
rgb(255, 240, 245)

Lawngreen

KeywordHEXRGBOutput
lawngreen
#7CFC00
rgb(124, 252, 0)

Lemonchiffon

KeywordHEXRGBOutput
lemonchiffon
#FFFACD
rgb(255, 250, 205)

Lightblue

KeywordHEXRGBOutput
lightblue
#ADD8E6
rgb(173, 216, 230)

Lightcoral

KeywordHEXRGBOutput
lightcoral
#F08080
rgb(240, 128, 128)

Lightcyan

KeywordHEXRGBOutput
lightcyan
#E0FFFF
rgb(224, 255, 255)

Lightgoldenrodyellow

KeywordHEXRGBOutput
lightgoldenrodyellow
#FAFAD2
rgb(250, 250, 210)

Lightgray / Lightgrey

KeywordHEXRGBOutput
lightgray
#D3D3D3
rgb(211, 211, 211)
lightgrey
#D3D3D3
rgb(211, 211, 211)

Lightgreen

KeywordHEXRGBOutput
lightgreen
#90EE90
rgb(144, 238, 144)

Lightpink

KeywordHEXRGBOutput
lightpink
#FFB6C1
rgb(255, 182, 193)

Lightsalmon

KeywordHEXRGBOutput
lightsalmon
#FFA07A
rgb(255, 160, 122)

Lightseagreen

KeywordHEXRGBOutput
lightseagreen
#20B2AA
rgb(32, 178, 170)

Lightskyblue

KeywordHEXRGBOutput
lightskyblue
#87CEFA
rgb(135, 206, 250)

Lightslategray / Lightslategrey

KeywordHEXRGBOutput
lightslategray
#778899
rgb(119, 136, 153)
lightslategrey
#778899
rgb(119, 136, 153)

Lightyellow

KeywordHEXRGBOutput
lightyellow
#FFFFE0
rgb(255, 255, 224)

Lime

KeywordHEXRGBOutput
lime
#00FF00
rgb(0, 255, 0)

Limegreen

KeywordHEXRGBOutput
limegreen
#32CD32
rgb(50, 205, 50)

Linen

KeywordHEXRGBOutput
linen
#FAF0E6
rgb(250, 240, 230)

Maroon

KeywordHEXRGBOutput
maroon
#800000
rgb(128, 0, 0)

Mediumaquamarine

KeywordHEXRGBOutput
mediumaquamarine
#66CDAA
rgb(102, 205, 170)

Mediumblue

KeywordHEXRGBOutput
mediumblue
#0000CD
rgb(0, 0, 205)

Mediumorchid

KeywordHEXRGBOutput
mediumorchid
#BA55D3
rgb(186, 85, 211)

Mediumpurple

KeywordHEXRGBOutput
mediumpurple
#9370DB
rgb(147, 112, 219)

Mediumseagreen

KeywordHEXRGBOutput
mediumseagreen
#3CB371
rgb(60, 179, 113)

Mediumslateblue

KeywordHEXRGBOutput
mediumslateblue
#7B68EE
rgb(123, 104, 238)

Mediumspringgreen

KeywordHEXRGBOutput
mediumspringgreen
#00FA9A
rgb(0, 250, 154)

Mediumturquoise

KeywordHEXRGBOutput
mediumturquoise
#48D1CC
rgb(72, 209, 204)

Mediumvioletred

KeywordHEXRGBOutput
mediumvioletred
#C71585
rgb(199, 21, 133)

Midnightblue

KeywordHEXRGBOutput
midnightblue
#191970
rgb(25, 25, 112)

Mintcream

KeywordHEXRGBOutput
mintcream
#F5FFFA
rgb(245, 255, 250)

Mistyrose

KeywordHEXRGBOutput
mistyrose
#FFE4E1
rgb(255, 228, 225)

Moccasin

KeywordHEXRGBOutput
moccasin
#FFE4B5
rgb(255, 228, 181)
KeywordHEXRGBOutput
navajowhite
#FFDEAD
rgb(255, 222, 173)
KeywordHEXRGBOutput
navy
#000080
rgb(0, 0, 128)

Oldlace

KeywordHEXRGBOutput
oldlace
#FDF5E6
rgb(253, 245, 230)

Olive

KeywordHEXRGBOutput
olive
#808000
rgb(128, 128, 0)

Olivedrab

KeywordHEXRGBOutput
olivedrab
#6B8E23
rgb(107, 142, 35)

Orange

KeywordHEXRGBOutput
orange
#FFA500
rgb(255, 165, 0)

Orangered

KeywordHEXRGBOutput
orangered
#FF4500
rgb(255, 69, 0)

Orchid

KeywordHEXRGBOutput
orchid
#DA70D6
rgb(218, 112, 214)

Palegoldenrod

KeywordHEXRGBOutput
palegoldenrod
#EEE8AA
rgb(238, 232, 170)

Palegreen

KeywordHEXRGBOutput
palegreen
#98FB98
rgb(152, 251, 152)

Paleturquoise

KeywordHEXRGBOutput
paleturquoise
#AFEEEE
rgb(175, 238, 238)

Palevioletred

KeywordHEXRGBOutput
palevioletred
#DB7093
rgb(219, 112, 147)

Papayawhip

KeywordHEXRGBOutput
papayawhip
#FFEFD5
rgb(255, 239, 213)

Peachpuff

KeywordHEXRGBOutput
peachpuff
#FFDAB9
rgb(255, 218, 185)

Peru

KeywordHEXRGBOutput
peru
#CD853F
rgb(205, 133, 63)

Pink

KeywordHEXRGBOutput
pink
#FFC0CB
rgb(255, 192, 203)

Plum

KeywordHEXRGBOutput
plum
#DDA0DD
rgb(221, 160, 221)

Powderblue

KeywordHEXRGBOutput
powderblue
#B0E0E6
rgb(176, 224, 230)

Purple

KeywordHEXRGBOutput
purple
#800080
rgb(128, 0, 128)

Rebeccapurple

KeywordHEXRGBOutput
rebeccapurple
#663399
rgb(102, 51, 153)

Red

KeywordHEXRGBOutput
red
#FF0000
rgb(255, 0, 0)

Rosybrown

KeywordHEXRGBOutput
rosybrown
#BC8F8F
rgb(188, 143, 143)

Royalblue

KeywordHEXRGBOutput
royalblue
#4169E1
rgb(65, 105, 225)

Saddlebrown

KeywordHEXRGBOutput
saddlebrown
#8B4513
rgb(139, 69, 19)

Salmon

KeywordHEXRGBOutput
salmon
#FA8072
rgb(250, 128, 114)

Sandybrown

KeywordHEXRGBOutput
sandybrown
#F4A460
rgb(244, 164, 96)

Seagreen

KeywordHEXRGBOutput
seagreen
#2E8B57
rgb(46, 139, 87)

Seashell

KeywordHEXRGBOutput
seashell
#FFF5EE
rgb(255, 245, 238)

Sienna

KeywordHEXRGBOutput
sienna
#A0522D
rgb(160, 82, 45)

Silver

KeywordHEXRGBOutput
silver
#C0C0C0
rgb(192, 192, 192)

Skyblue

KeywordHEXRGBOutput
skyblue
#87CEEB
rgb(135, 206, 235)

Slateblue

KeywordHEXRGBOutput
slateblue
#6A5ACD
rgb(106, 90, 205)

Slategray / Slategrey

KeywordHEXRGBOutput
slategray
#708090
rgb(112, 128, 144)
slategrey
#708090
rgb(112, 128, 144)

Snow

KeywordHEXRGBOutput
snow
#FFFAFA
rgb(255, 250, 250)

Springgreen

KeywordHEXRGBOutput
springgreen
#00FF7F
rgb(0, 255, 127)

Steelblue

KeywordHEXRGBOutput
steelblue
#4682B4
rgb(70, 130, 180)

Tan

KeywordHEXRGBOutput
tan
#D2B48C
rgb(210, 180, 140)

Teal

KeywordHEXRGBOutput
teal
#008080
rgb(0, 128, 128)

Thistle

KeywordHEXRGBOutput
thistle
#D8BFD8
rgb(216, 191, 216)

Tomato

KeywordHEXRGBOutput
tomato
#FF6347
rgb(255, 99, 71)

Turquoise

KeywordHEXRGBOutput
turquoise
#40E0D0
rgb(64, 224, 208)

Violet

KeywordHEXRGBOutput
violet
#EE82EE
rgb(238, 130, 238)

Wheat

KeywordHEXRGBOutput
wheat
#F5DEB3
rgb(245, 222, 179)

White

KeywordHEXRGBOutput
white
#FFFFFF
rgb(255, 255, 255)

Whitesmoke

KeywordHEXRGBOutput
whitesmoke
#F5F5F5
rgb(245, 245, 245)

Yellow

KeywordHEXRGBOutput
yellow
#FFFF00
rgb(255, 255, 0)

Yellowgreen

KeywordHEXRGBOutput
yellowgreen
#9ACD32
rgb(154, 205, 50)

Summary

There we have it, all 147 named CSS colors in on one handy page. Remember that for each of the named colors you can use its HEX or RGB equivalent to get the same exact color. What you decide to use is totally up to you.

Personally, I prefer to use HEX codes across my entire app to keep everything consistent, but if you’re not a designer and just want a good ballpark color scheme, using many of the named CSS colors is a great alternative.

Happy hacking.

Newsletter

Subscribe to the newsletter and be the first to know when I publish new content. No Spam.