2/12/2018 CSS Color Codes

CSS Color
Codes
Use the following color picker or
color charts to pick a color that you
can use within your CSS code. The
color picker provides the color
values in hexadecimal and RGB.
The color chart provides them in
hexadecimal, RGB, and their color
names.

Color Picker

◯ ◯

# FFFFFF
R 255 H 0
G 255 S 0
B 255 V 100

Hex #FFFFFF

RGB rgb(255, 255, 255)

HSL hsl(0, 0%, 100%)

HSV hsv(0, 0%, 100%)

HWB hwb(0, 100%, 0%)

https://www.quackit.com/css/css_color_codes.cfm 1/13
2/12/2018 CSS Color Codes

CMYK cmyk(0%, 0%, 0%, 0%)

Choose Multiple Colors

Compare up to 3 colors. Click in a

field below, then select a color from
the color picker... Try it!

Color 1

Color 2

Color 3

More Color Tools 

Basic CSS Colors

Here is a table of the basic color
names that have been in CSS since
CSS1 (except orange, which was
added in CSS 2.1).

Try clicking on a value. This will

open the color in Quackit's online
editor so you can see how it looks
(and grab the code). There's also a
link to a color tester where you can
get another preview of the color.

Hex Decimal Hex Decimal Hex Decimal

Color Color Color
Code Code Code Code Code Code
Name Name Name
RGB RGB RGB RGB RGB RGB

Maroon 800000 128,0,0

Purple 800080 128,0,128
Navy 000080 0,0,128

Red FF0000 255,0,0

FuchsiaFF00FF255,0,255
Black 000000 0,0,0

https://www.quackit.com/css/css_color_codes.cfm 2/13
2/12/2018 CSS Color Codes

Orange FFA500255,165,0
Lime 00FF00 0,255,0
Gray 808080 128,128,128

Yellow FFFF00255,255,0
Teal 008080 0,128,128
Silver C0C0C0192,192,192

Olive 808000 128,128,0

Aqua 00FFFF0,255,255
White FFFFFF 255,255,255

Green 008000 0,128,0Blue 0000FF 0,0,255

CSS Color Names

Here is a full list of the CSS named
colors as specified in CSS3 (CSS
Color Module Level 4). These are
based on the X11 color set. The
above basic colors are also included
in this chart.

Try clicking on a value. This will

open the color in Quackit's online
editor so you can see how it looks
(and grab the code). There's also a
link to a color tester where you can
get another preview of the color.

Hex Decimal Hex Decimal Hex Decimal

Color Name Code
Color Name
Code Code
Color Name
Code Code Code
RGB RGB RGB RGB RGB RGB

Reds Greens Browns

IndianRed CD5C5C
GreenYellow
205,92,92 ADFF2F
Cornsilk
173,255,47
FFF8DC 255,248,220

LightCoral F08080
Chartreuse
240,128,1287FFF00
BlanchedAlmond
127,255,0FFEBCD 255,235,205

Salmon FA8072
LawnGreen
250,128,1147CFC00
Bisque
124,252,0FFE4C4 255,228,196

DarkSalmon E9967ALime
233,150,122 00FF00
NavajoWhite
0,255,0 FFDEAD 255,222,173

LightSalmon FFA07A
LimeGreen
255,160,12232CD32
Wheat
50,205,50F5DEB3 245,222,179

Crimson DC143C
PaleGreen
220,20,60 98FB98
BurlyWood
152,251,152
DEB887 222,184,135

Red FF0000
LightGreen
255,0,0 90EE90Tan
144,238,144
D2B48C 210,180,140

FireBrick MediumSpringGreen
B22222 178,34,34 00FA9A
RosyBrown
0,250,154BC8F8F 188,143,143

DarkRed 8B0000
SpringGreen
139,0,0 00FF7F
SandyBrown
0,255,127F4A460 244,164,96

MediumSeaGreen 3CB371
Pinks Goldenrod
60,179,113
DAA520 218,165,32

Pink SeaGreen
FFC0CB 255,192,2032E8B57
DarkGoldenrod
46,139,87B8860B 184,134,11

ForestGreen 228B22Peru
34,139,34CD853F 205,133,63
https://www.quackit.com/css/css_color_codes.cfm 3/13
2/12/2018 CSS Color Codes

LightPink FFB6C1 255,182,193

Green 008000
Chocolate
0,128,0 D2691E 210,105,30
HotPink FF69B4 255,105,180
DarkGreen 006400
SaddleBrown
0,100,0 8B4513 139,69,19
DeepPink FF1493 255,20,147
YellowGreen 9ACD32
Sienna
154,205,50
A0522D 160,82,45
MediumVioletRed C71585 199,21,133
OliveDrab 6B8E23
Brown
107,142,35
A52A2A 165,42,42
PaleVioletRed DB7093 219,112,147
Olive 808000
Maroon
128,128,0800000 128,0,0
Oranges
DarkOliveGreen 556B2F 85,107,47
Whites
Coral FF7F50 255,127,80
MediumAquamarine 66CDAA102,205,170
White FFFFFF 255,255,255
Tomato FF6347 255,99,71
DarkSeaGreen 8FBC8F 143,188,143
Snow FFFAFA 255,250,250
OrangeRed FF4500 255,69,0
LightSeaGreen 20B2AA 32,178,170
Honeydew F0FFF0 240,255,240
DarkOrange FF8C00 255,140,0
DarkCyan 008B8B 0,139,139F5FFFA 245,255,250
MintCream
Orange FFA500 255,165,0
Teal 008080Azure
0,128,128F0FFFF 240,255,255
Yellows
Blues/Cyans
AliceBlue F0F8FF 240,248,255
Gold FFD700 255,215,0
Aqua 00FFFF
GhostWhite
0,255,255F8F8FF 248,248,255
Yellow FFFF00 255,255,0
Cyan 00FFFF
WhiteSmoke
0,255,255F5F5F5 245,245,245
LightYellow FFFFE0 255,255,224
LightCyan E0FFFF
Seashell
224,255,255
FFF5EE 255,245,238
LemonChiffon FFFACD 255,250,205
PaleTurquoise AFEEEE175,238,238
Beige F5F5DC 245,245,220
LightGoldenrodYellow FAFAD2 250,250,210
Aquamarine 7FFFD4
OldLace
127,255,212
FDF5E6 253,245,230
PapayaWhip FFEFD5 255,239,213
Turquoise 40E0D0
FloralWhite
64,224,208
FFFAF0 255,250,240
Moccasin FFE4B5 255,228,181
MediumTurquoise 48D1CCIvory
72,209,204
FFFFF0 255,255,240
PeachPuff FFDAB9 255,218,185
DarkTurquoise 00CED1
AntiqueWhite
0,206,209FAEBD7 250,235,215
PaleGoldenrod EEE8AA 238,232,170
CadetBlue 5F9EA0Linen
95,158,160
FAF0E6 250,240,230
Khaki F0E68C 240,230,140
SteelBlue 4682B4
LavenderBlush
70,130,180
FFF0F5 255,240,245
DarkKhaki BDB76B 189,183,107
LightSteelBlue B0C4DE176,196,222
MistyRose FFE4E1 255,228,225
Purples
PowderBlue B0E0E6 176,224,230
Greys
Lavender E6E6FA 230,230,250
LightBlue ADD8E6173,216,230
Gainsboro DCDCDC220,220,220
Thistle D8BFD8 216,191,216
SkyBlue 87CEEB 135,206,235
LightGray D3D3D3 211,211,211
Plum DDA0DD221,160,221
LightSkyBlue 87CEFA 135,206,250
LightGrey D3D3D3 211,211,211
Violet EE82EE 238,130,238
DeepSkyBlue 00BFFF 0,191,255C0C0C0 192,192,192
Silver
Orchid DA70D6 218,112,214
DodgerBlue 1E90FF 30,144,255
DarkGray A9A9A9 169,169,169
Fuchsia FF00FF 255,0,255
CornflowerBlue 6495ED 100,149,237
DarkGrey A9A9A9 169,169,169
Magenta FF00FF 255,0,255
RoyalBlue 4169E1Gray
65,105,225808080 128,128,128
MediumOrchid BA55D3 186,85,211
Blue 0000FFGrey0,0,255 808080 128,128,128
MediumPurple 9370DB 147,112,219
MediumBlue 0000CD 0,0,205 696969 105,105,105
DimGray
BlueViolet 8A2BE2 138,43,226
DarkBlue 00008B 0,0,139 696969 105,105,105
DimGrey
DarkViolet 9400D3 148,0,211
Navy 000080 0,0,128 778899 119,136,153
LightSlateGray
DarkOrchid 9932CC 153,50,204
MidnightBlue 191970 25,25,112778899 119,136,153
LightSlateGrey
DarkMagenta 8B008B 139,0,139
SlateGray 708090 112,128,144
Purple 800080 128,0,128
SlateGrey 708090 112,128,144

https://www.quackit.com/css/css_color_codes.cfm 4/13
2/12/2018 CSS Color Codes

RebeccaPurple 663399 102,51,153 DarkSlateGray 2F4F4F 47,79,79

Indigo 4B0082 75,0,130 DarkSlateGrey 2F4F4F 47,79,79

MediumSlateBlue 7B68EE 123,104,238 Black 000000 0,0,0

SlateBlue 6A5ACD 106,90,205

DarkSlateBlue 483D8B 72,61,139

More Color Charts 

How to use these

Colors
Each color can be represented in
many different ways. For example
blue can also be represented as
#0000ff , #00f , rgb(0,0,255) and
many other ways. It doesn't matter
which one you choose as long as it's
a valid <color>.

You can apply any of these colors to

a website or blog by using the
relevant CSS code.

To set a background color, use

background-color .

To set the text color, use color

To set a border color, use
border-color .

Take blue for example.

Below are quick CSS code

examples for applying this color to
https://www.quackit.com/css/css_color_codes.cfm 5/13
2/12/2018 CSS Color Codes

various HTML elements.

/* Set a background color to the

'body' element */
body {
background-color: blue;
}

/* Same as above, but using the

CSS 'background' property
instead */
body {
background: blue;
}

/* Setting the text color for

the 'h1' element */
h1 {
color: blue;
}

/* Setting a border color on the

'article' element */
article {
border-color: blue;
}

/* Same as previous, but using

the 'border' property instead
(also sets border width and
style) */
article {
border: 1px solid blue;
}

Check out some basic color code

examples using color names in the
online editor.

https://www.quackit.com/css/css_color_codes.cfm 6/13
2/12/2018 CSS Color Codes


Color names are case-
insensitive (it doesn't matter
whether you use
UPPERCASE or lowercase).

So blue , Blue , and BLUE all

display the same color.

In Hexadecimal Notation
Here is the same color, but this time
using hexadecimal notation instead
of the color name.

So the color code is now 0000ff .

This needs to be prefixed with a

hash symbol, so it will become
#0000ff when written in the code.

Check out some basic color code

examples using hexadecimal values
in the online editor.


Hex colors are case-
insensitive (it doesn't matter
whether you use
UPPERCASE or lowercase).

https://www.quackit.com/css/css_color_codes.cfm 7/13
2/12/2018 CSS Color Codes

So 0000ff and 0000FF both

display the same color.

In RGB Functional
Notation
Here is the same color, but this time
using RGB functional notation.

So the color code is now 0,0,255 .

This needs to be placed inside the
rgb() function, so it will look like this
rgb(0,0,255) .

body {
background-color:
rgb(0,0,255);
}
body {
background: rgb(0,0,255);
}
h1 {
color: rgb(0,0,255);
}
article {
border-color: rgb(0,0,255);
}
article {
border: 1px solid
rgb(0,0,255);
}

Check out some basic color code

examples using RGB functional
notation in the online editor.

https://www.quackit.com/css/css_color_codes.cfm 8/13
2/12/2018 CSS Color Codes

Full-Page Example
Here is an example of where CSS
color codes can fit into an HTML
document.

 Try it

This example uses embedded style

sheets. You can also move the
styles to an external style sheet so
that you can apply the styles across
the whole site from one file.

Transparent Colors
CSS also enables us to add
transparent colors to our HTML
elements. This means that you can
add a color that's semi-transparent
— so that you can see the element
behind it.

Here's an example of adding

transparency to a color using the
rgba() function.

<!DOCTYPE html>
<title>Example</title>
<style>
body {
background:
url('/pix/samples/bg2.png') beige;
color: rgba(0, 0, 0, 1);
font-size: 2em;
https://www.quackit.com/css/css_color_codes.cfm 9/13
2/12/2018 CSS Color Codes

}
article {
background-color: rgba(30, 255, 50,
0.5);
border: 5px solid olive;
margin: 20px;
text-align: center;
}
</style>
<article>

List of Color Values

Here's a list of color values you can
use with CSS.

CSS Named Colors

CSS transparent Keyword
CSS currentcolor Keyword
CSS 3-Digit Hex Codes
CSS 4-Digit Hex Codes
CSS 6-Digit Hex Codes
CSS 8-Digit Hex Codes
CSS rgb() Function
CSS rgba() Function
CSS hsl() Function
CSS hsla() Function
CSS hwb() Function
CSS System Colors

List of Color
Properties

https://www.quackit.com/css/css_color_codes.cfm 10/13
2/12/2018 CSS Color Codes

Here's a list of color-related

properties you can use with CSS.

background-color

background

border

border-bottom-color

border-color

border-left-color

border-right-color

border-top-color

box-shadow

caret-color

color

column-rule

column-rule-color

filter

opacity

outline-color

outline

text-decoration

text-decoration-color

text-shadow

Web Safe Colors

This chart displays the 216 "web
safe" colors. Click on a color to
display it in a new page.

https://www.quackit.com/css/css_color_codes.cfm 11/13
2/12/2018 CSS Color Codes

With current day monitors being able

to display millions of colors, there's
little need to use the web safe colors
any more. But it's a great way to pick
some basic colors nice and quickly.
And hey, it's still a nice looking chart!

#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00

#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00

#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900

#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600

#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300

#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000

#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00

#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00

#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900

#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600

#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300

#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000

#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00

#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00

#9999FF #9999CC #999999 #999966 #999933 #999900

#9966FF #9966CC #996699 #996666 #996633 #996600

#9933FF #9933CC #993399 #993366 #993333 #993300

#9900FF #9900CC #990099 #990066 #990033 #990000

#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00

#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00

#6699FF #6699CC #669999 #669966 #669933 #669900

#6666FF #6666CC #666699 #666666 #666633 #666600

#6633FF #6633CC #663399 #663366 #663333 #663300

#6600FF #6600CC #660099 #660066 #660033 #660000

#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00

#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00

#3399FF #3399CC #339999 #339966 #339933 #339900

#3366FF #3366CC #336699 #336666 #336633 #336600

#3333FF #3333CC #333399 #333366 #333333 #333300

#3300FF #3300CC #330099 #330066 #330033 #330000

#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00

https://www.quackit.com/css/css_color_codes.cfm 12/13
2/12/2018 CSS Color Codes

#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00

#0099FF #0099CC #009999 #009966 #009933 #009900

#0066FF #0066CC #006699 #006666 #006633 #006600

#0033FF #0033CC #003399 #003366 #003333 #003300

#0000FF #0000CC #000099 #000066 #000033 #000000

 Quackit on Facebook

© Copyright 2000 - 2018 Quackit.com

https://www.quackit.com/css/css_color_codes.cfm 13/13