147 CSS Color Names, Web Development : Hex Codes cheatsheet Complete Guide to

Details: Category: Tech Articles; Hits: 87

Every browser understands a standard set of CSS color names

No need to memorize hex codes.

Below are all 10 color families & 147 colors, ready to use directly with the site's utility classes background or color. Design faster !!

Pinks

Pink
#FFC0CB
rgb(255, 192, 203)
hsl(350, 100%, 88%)

LightPink
#FFB6C1
rgb(255, 182, 193)
hsl(351, 100%, 86%)

HotPink
#FF69B4
rgb(255, 105, 180)
hsl(330, 100%, 71%)

DeepPink
#FF1493
rgb(255, 20, 147)
hsl(328, 100%, 54%)

MediumVioletRed
#C71585
rgb(199, 21, 133)
hsl(322, 81%, 43%)

PaleVioletRed
#DB7093
rgb(219, 112, 147)
hsl(340, 60%, 65%)

Reds

IndianRed
#CD5C5C
rgb(205, 92, 92)
hsl(0, 53%, 58%)

LightCoral
#F08080
rgb(240, 128, 128)
hsl(0, 79%, 72%)

Salmon
#FA8072
rgb(250, 128, 114)
hsl(6, 93%, 71%)

DarkSalmon
#E9967A
rgb(233, 150, 122)
hsl(15, 72%, 70%)

LightSalmon
#FFA07A
rgb(255, 160, 122)
hsl(17, 100%, 74%)

Crimson
#DC143C
rgb(220, 20, 60)
hsl(348, 83%, 47%)

Red
#FF0000
rgb(255, 0, 0)
hsl(0, 100%, 50%)

FireBrick
#B22222
rgb(178, 34, 34)
hsl(0, 68%, 42%)

DarkRed
#8B0000
rgb(139, 0, 0)
hsl(0, 100%, 27%)

Oranges

Coral
#FF7F50
rgb(255, 127, 80)
hsl(16, 100%, 66%)

Tomato
#FF6347
rgb(255, 99, 71)
hsl(9, 100%, 64%)

OrangeRed
#FF4500
rgb(255, 69, 0)
hsl(16, 100%, 50%)

DarkOrange
#FF8C00
rgb(255, 140, 0)
hsl(33, 100%, 50%)

Orange
#FFA500
rgb(255, 165, 0)
hsl(39, 100%, 50%)

Yellows

Gold
#FFD700
rgb(255, 215, 0)
hsl(51, 100%, 50%)

Yellow
#FFFF00
rgb(255, 255, 0)
hsl(60, 100%, 50%)

LightYellow
#FFFFE0
rgb(255, 255, 224)
hsl(60, 100%, 94%)

LemonChiffon
#FFFACD
rgb(255, 250, 205)
hsl(54, 100%, 90%)

LightGoldenrodYellow
#FAFAD2
rgb(250, 250, 210)
hsl(60, 80%, 90%)

PapayaWhip
#FFEFD5
rgb(255, 239, 213)
hsl(37, 100%, 92%)

Moccasin
#FFE4B5
rgb(255, 228, 181)
hsl(38, 100%, 85%)

PeachPuff
#FFDAB9
rgb(255, 218, 185)
hsl(28, 100%, 86%)

PaleGoldenrod
#EEE8AA
rgb(238, 232, 170)
hsl(55, 67%, 80%)

Khaki
#F0E68C
rgb(240, 230, 140)
hsl(54, 77%, 75%)

DarkKhaki
#BDB76B
rgb(189, 183, 107)
hsl(56, 38%, 58%)

Purples

Lavender
#E6E6FA
rgb(230, 230, 250)
hsl(240, 67%, 94%)

Thistle
#D8BFD8
rgb(216, 191, 216)
hsl(300, 24%, 80%)

Plum
#DDA0DD
rgb(221, 160, 221)
hsl(300, 47%, 75%)

Violet
#EE82EE
rgb(238, 130, 238)
hsl(300, 76%, 72%)

Orchid
#DA70D6
rgb(218, 112, 214)
hsl(302, 59%, 65%)

Fuchsia
#FF00FF
rgb(255, 0, 255)
hsl(300, 100%, 50%)

Magenta
#FF00FF
rgb(255, 0, 255)
hsl(300, 100%, 50%)

MediumOrchid
#BA55D3
rgb(186, 85, 211)
hsl(288, 59%, 58%)

MediumPurple
#9370DB
rgb(147, 112, 219)
hsl(260, 60%, 65%)

BlueViolet
#8A2BE2
rgb(138, 43, 226)
hsl(271, 76%, 53%)

DarkViolet
#9400D3
rgb(148, 0, 211)
hsl(282, 100%, 41%)

DarkOrchid
#9932CC
rgb(153, 50, 204)
hsl(280, 61%, 50%)

DarkMagenta
#8B008B
rgb(139, 0, 139)
hsl(300, 100%, 27%)

Purple
#800080
rgb(128, 0, 128)
hsl(300, 100%, 25%)

RebeccaPurple
#663399
rgb(102, 51, 153)
hsl(270, 50%, 40%)

Indigo
#4B0082
rgb(75, 0, 130)
hsl(275, 100%, 25%)

MediumSlateBlue
#7B68EE
rgb(123, 104, 238)
hsl(249, 80%, 67%)

SlateBlue
#6A5ACD
rgb(106, 90, 205)
hsl(248, 53%, 58%)

DarkSlateBlue
#483D8B
rgb(72, 61, 139)
hsl(248, 39%, 39%)

Greens

GreenYellow
#ADFF2F
rgb(173, 255, 47)
hsl(84, 100%, 59%)

Chartreuse
#7FFF00
rgb(127, 255, 0)
hsl(90, 100%, 50%)

LawnGreen
#7CFC00
rgb(124, 252, 0)
hsl(90, 100%, 49%)

Lime
#00FF00
rgb(0, 255, 0)
hsl(120, 100%, 50%)

LimeGreen
#32CD32
rgb(50, 205, 50)
hsl(120, 61%, 50%)

PaleGreen
#98FB98
rgb(152, 251, 152)
hsl(120, 93%, 79%)

LightGreen
#90EE90
rgb(144, 238, 144)
hsl(120, 73%, 75%)

MediumSpringGreen
#00FA9A
rgb(0, 250, 154)
hsl(157, 100%, 49%)

SpringGreen
#00FF7F
rgb(0, 255, 127)
hsl(150, 100%, 50%)

MediumSeaGreen
#3CB371
rgb(60, 179, 113)
hsl(147, 50%, 47%)

SeaGreen
#2E8B57
rgb(46, 139, 87)
hsl(146, 50%, 36%)

ForestGreen
#228B22
rgb(34, 139, 34)
hsl(120, 61%, 34%)

Green
#008000
rgb(0, 128, 0)
hsl(120, 100%, 25%)

DarkGreen
#006400
rgb(0, 100, 0)
hsl(120, 100%, 20%)

YellowGreen
#9ACD32
rgb(154, 205, 50)
hsl(80, 61%, 50%)

OliveDrab
#6B8E23
rgb(107, 142, 35)
hsl(80, 60%, 35%)

Olive
#808000
rgb(128, 128, 0)
hsl(60, 100%, 25%)

DarkOliveGreen
#556B2F
rgb(85, 107, 47)
hsl(82, 39%, 30%)

MediumAquamarine
#66CDAA
rgb(102, 205, 170)
hsl(160, 51%, 60%)

DarkSeaGreen
#8FBC8F
rgb(143, 188, 139)
hsl(115, 27%, 64%)

LightSeaGreen
#20B2AA
rgb(32, 178, 170)
hsl(177, 70%, 41%)

Blues / Cyans

DarkCyan
#008B8B
rgb(0, 139, 139)
hsl(180, 100%, 27%)

Teal
#008080
rgb(0, 128, 128)
hsl(180, 100%, 25%)

Aqua
#00FFFF
rgb(0, 255, 255)
hsl(180, 100%, 50%)

Cyan
#00FFFF
rgb(0, 255, 255)
hsl(180, 100%, 50%)

LightCyan
#E0FFFF
rgb(224, 255, 255)
hsl(180, 100%, 94%)

PaleTurquoise
#AFEEEE
rgb(175, 238, 238)
hsl(180, 65%, 81%)

Aquamarine
#7FFFD4
rgb(127, 255, 212)
hsl(160, 100%, 75%)

Turquoise
#40E0D0
rgb(64, 224, 208)
hsl(174, 72%, 56%)

MediumTurquoise
#48D1CC
rgb(72, 209, 204)
hsl(178, 60%, 55%)

DarkTurquoise
#00CED1
rgb(0, 206, 209)
hsl(181, 100%, 41%)

CadetBlue
#5F9EA0
rgb(95, 158, 160)
hsl(182, 25%, 50%)

SteelBlue
#4682B4
rgb(70, 130, 180)
hsl(207, 44%, 49%)

LightSteelBlue
#B0C4DE
rgb(176, 196, 222)
hsl(214, 41%, 78%)

PowderBlue
#B0E0E6
rgb(176, 224, 230)
hsl(187, 52%, 80%)

LightBlue
#ADD8E6
rgb(173, 216, 230)
hsl(195, 53%, 79%)

SkyBlue
#87CEEB
rgb(135, 206, 235)
hsl(197, 71%, 73%)

LightSkyBlue
#87CEFA
rgb(135, 206, 250)
hsl(203, 92%, 75%)

DeepSkyBlue
#00BFFF
rgb(0, 191, 255)
hsl(195, 100%, 50%)

DodgerBlue
#1E90FF
rgb(30, 144, 255)
hsl(210, 100%, 56%)

CornflowerBlue
#6495ED
rgb(100, 149, 237)
hsl(219, 79%, 66%)

RoyalBlue
#4169E1
rgb(65, 105, 225)
hsl(225, 73%, 57%)

Blue
#0000FF
rgb(0, 0, 255)
hsl(240, 100%, 50%)

MediumBlue
#0000CD
rgb(0, 0, 205)
hsl(240, 100%, 40%)

DarkBlue
#00008B
rgb(0, 0, 139)
hsl(240, 100%, 27%)

Navy
#000080
rgb(0, 0, 128)
hsl(240, 100%, 25%)

MidnightBlue
#191970
rgb(25, 25, 112)
hsl(240, 64%, 27%)

Browns

Cornsilk
#FFF8DC
rgb(255, 248, 220)
hsl(48, 100%, 93%)

BlanchedAlmond
#FFEBCD
rgb(255, 235, 205)
hsl(36, 100%, 90%)

Bisque
#FFE4C4
rgb(255, 228, 196)
hsl(33, 100%, 88%)

NavajoWhite
#FFDEAD
rgb(255, 222, 173)
hsl(36, 100%, 84%)

Wheat
#F5DEB3
rgb(245, 222, 179)
hsl(39, 77%, 83%)

BurlyWood
#DEB887
rgb(222, 184, 135)
hsl(34, 57%, 70%)

Tan
#D2B48C
rgb(210, 180, 140)
hsl(34, 44%, 69%)

RosyBrown
#BC8F8F
rgb(188, 143, 143)
hsl(0, 25%, 65%)

SandyBrown
#F4A460
rgb(244, 164, 96)
hsl(28, 87%, 67%)

Goldenrod
#DAA520
rgb(218, 165, 32)
hsl(43, 74%, 49%)

DarkGoldenrod
#B8860B
rgb(184, 134, 11)
hsl(43, 89%, 38%)

Peru
#CD853F
rgb(205, 133, 63)
hsl(30, 59%, 53%)

Chocolate
#D2691E
rgb(210, 105, 30)
hsl(25, 75%, 47%)

SaddleBrown
#8B4513
rgb(139, 69, 19)
hsl(25, 76%, 31%)

Sienna
#A0522D
rgb(160, 82, 45)
hsl(19, 56%, 40%)

Brown
#A52A2A
rgb(165, 42, 42)
hsl(0, 59%, 41%)

Maroon
#800000
rgb(128, 0, 0)
hsl(0, 100%, 25%)

Whites

White
#FFFFFF
rgb(255, 255, 255)
hsl(0, 0%, 100%)

Snow
#FFFAFA
rgb(255, 250, 250)
hsl(0, 100%, 99%)

Honeydew
#F0FFF0
rgb(240, 255, 240)
hsl(120, 100%, 97%)

MintCream
#F5FFFA
rgb(245, 255, 250)
hsl(150, 100%, 98%)

Azure
#F0FFFF
rgb(240, 255, 255)
hsl(180, 100%, 97%)

AliceBlue
#F0F8FF
rgb(240, 248, 255)
hsl(208, 100%, 97%)

GhostWhite
#F8F8FF
rgb(248, 248, 255)
hsl(240, 100%, 99%)

WhiteSmoke
#F5F5F5
rgb(245, 245, 245)
hsl(0, 0%, 96%)

Seashell
#FFF5EE
rgb(255, 245, 238)
hsl(25, 100%, 97%)

Beige
#F5F5DC
rgb(245, 245, 220)
hsl(60, 56%, 91%)

OldLace
#FDF5E6
rgb(253, 245, 230)
hsl(39, 85%, 95%)

FloralWhite
#FFFAF0
rgb(255, 250, 240)
hsl(40, 100%, 97%)

Ivory
#FFFFF0
rgb(255, 255, 240)
hsl(60, 100%, 97%)

AntiqueWhite
#FAEBD7
rgb(250, 235, 215)
hsl(34, 78%, 91%)

Linen
#FAF0E6
rgb(250, 240, 230)
hsl(30, 67%, 94%)

LavenderBlush
#FFF0F5
rgb(255, 240, 245)
hsl(340, 100%, 97%)

MistyRose
#FFE4E1
rgb(255, 228, 225)
hsl(6, 100%, 94%)

Greys

Gainsboro
#DCDCDC
rgb(220, 220, 220)
hsl(0, 0%, 86%)

LightGray
#D3D3D3
rgb(211, 211, 211)
hsl(0, 0%, 83%)

Silver
#C0C0C0
rgb(192, 192, 192)
hsl(0, 0%, 75%)

DarkGray
#A9A9A9
rgb(169, 169, 169)
hsl(0, 0%, 66%)

Gray
#808080
rgb(128, 128, 128)
hsl(0, 0%, 50%)

DimGray
#696969
rgb(105, 105, 105)
hsl(0, 0%, 41%)

LightSlateGray
#778899
rgb(119, 136, 153)
hsl(210, 14%, 53%)

SlateGray
#708090
rgb(112, 128, 144)
hsl(210, 13%, 50%)

DarkSlateGray
#2F4F4F
rgb(47, 79, 79)
hsl(180, 25%, 25%)

Black
#000000
rgb(0, 0, 0)
hsl(0, 0%, 0%)

These families cover the standard CSS3/X11 named colors, ready to use as color: ColorName; or via the site's utility classes.

Claire Jones

Cloud Engineer / Technical Writer
eBits Tech Platform @ ebits.icu