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
◯
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.
Color Name | Hex Code RGB | Decimal Code RGB |
---|
Maroon | 800000 | 128,0,0 |
Red | FF0000 | 255,0,0 |
Orange | FFA500 | 255,165,0 |
Yellow | FFFF00 | 255,255,0 |
Olive | 808000 | 128,128,0 |
Green | 008000 | 0,128,0 |
Color Name | Hex Code RGB | Decimal Code RGB |
---|
Purple | 800080 | 128,0,128 |
Fuchsia | FF00FF | 255,0,255 |
Lime | 00FF00 | 0,255,0 |
Teal | 008080 | 0,128,128 |
Aqua | 00FFFF | 0,255,255 |
Blue | 0000FF | 0,0,255 |
Color Name | Hex Code RGB | Decimal Code RGB |
---|
Navy | 000080 | 0,0,128 |
Black | 000000 | 0,0,0 |
Gray | 808080 | 128,128,128 |
Silver | C0C0C0 | 192,192,192 |
White | FFFFFF | 255,255,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.
Color Name | Hex Code RGB | Decimal Code RGB |
---|
Reds |
IndianRed | CD5C5C | 205,92,92 |
LightCoral | F08080 | 240,128,128 |
Salmon | FA8072 | 250,128,114 |
DarkSalmon | E9967A | 233,150,122 |
LightSalmon | FFA07A | 255,160,122 |
Crimson | DC143C | 220,20,60 |
Red | FF0000 | 255,0,0 |
FireBrick | B22222 | 178,34,34 |
DarkRed | 8B0000 | 139,0,0 |
Pinks |
Pink | FFC0CB | 255,192,203 |
LightPink | FFB6C1 | 255,182,193 |
HotPink | FF69B4 | 255,105,180 |
DeepPink | FF1493 | 255,20,147 |
MediumVioletRed | C71585 | 199,21,133 |
PaleVioletRed | DB7093 | 219,112,147 |
Oranges |
Coral | FF7F50 | 255,127,80 |
Tomato | FF6347 | 255,99,71 |
OrangeRed | FF4500 | 255,69,0 |
DarkOrange | FF8C00 | 255,140,0 |
Orange | FFA500 | 255,165,0 |
Yellows |
Gold | FFD700 | 255,215,0 |
Yellow | FFFF00 | 255,255,0 |
LightYellow | FFFFE0 | 255,255,224 |
LemonChiffon | FFFACD | 255,250,205 |
LightGoldenrodYellow | FAFAD2 | 250,250,210 |
PapayaWhip | FFEFD5 | 255,239,213 |
Moccasin | FFE4B5 | 255,228,181 |
PeachPuff | FFDAB9 | 255,218,185 |
PaleGoldenrod | EEE8AA | 238,232,170 |
Khaki | F0E68C | 240,230,140 |
DarkKhaki | BDB76B | 189,183,107 |
Purples |
Lavender | E6E6FA | 230,230,250 |
Thistle | D8BFD8 | 216,191,216 |
Plum | DDA0DD | 221,160,221 |
Violet | EE82EE | 238,130,238 |
Orchid | DA70D6 | 218,112,214 |
Fuchsia | FF00FF | 255,0,255 |
Magenta | FF00FF | 255,0,255 |
MediumOrchid | BA55D3 | 186,85,211 |
MediumPurple | 9370DB | 147,112,219 |
BlueViolet | 8A2BE2 | 138,43,226 |
DarkViolet | 9400D3 | 148,0,211 |
DarkOrchid | 9932CC | 153,50,204 |
DarkMagenta | 8B008B | 139,0,139 |
Purple | 800080 | 128,0,128 |
RebeccaPurple | 663399 | 102,51,153 |
Indigo | 4B0082 | 75,0,130 |
MediumSlateBlue | 7B68EE | 123,104,238 |
SlateBlue | 6A5ACD | 106,90,205 |
DarkSlateBlue | 483D8B | 72,61,139 |
Color Name | Hex Code RGB | Decimal Code RGB |
---|
Greens |
GreenYellow | ADFF2F | 173,255,47 |
Chartreuse | 7FFF00 | 127,255,0 |
LawnGreen | 7CFC00 | 124,252,0 |
Lime | 00FF00 | 0,255,0 |
LimeGreen | 32CD32 | 50,205,50 |
PaleGreen | 98FB98 | 152,251,152 |
LightGreen | 90EE90 | 144,238,144 |
MediumSpringGreen | 00FA9A | 0,250,154 |
SpringGreen | 00FF7F | 0,255,127 |
MediumSeaGreen | 3CB371 | 60,179,113 |
SeaGreen | 2E8B57 | 46,139,87 |
ForestGreen | 228B22 | 34,139,34 |
Green | 008000 | 0,128,0 |
DarkGreen | 006400 | 0,100,0 |
YellowGreen | 9ACD32 | 154,205,50 |
OliveDrab | 6B8E23 | 107,142,35 |
Olive | 808000 | 128,128,0 |
DarkOliveGreen | 556B2F | 85,107,47 |
MediumAquamarine | 66CDAA | 102,205,170 |
DarkSeaGreen | 8FBC8F | 143,188,143 |
LightSeaGreen | 20B2AA | 32,178,170 |
DarkCyan | 008B8B | 0,139,139 |
Teal | 008080 | 0,128,128 |
Blues/Cyans |
Aqua | 00FFFF | 0,255,255 |
Cyan | 00FFFF | 0,255,255 |
LightCyan | E0FFFF | 224,255,255 |
PaleTurquoise | AFEEEE | 175,238,238 |
Aquamarine | 7FFFD4 | 127,255,212 |
Turquoise | 40E0D0 | 64,224,208 |
MediumTurquoise | 48D1CC | 72,209,204 |
DarkTurquoise | 00CED1 | 0,206,209 |
CadetBlue | 5F9EA0 | 95,158,160 |
SteelBlue | 4682B4 | 70,130,180 |
LightSteelBlue | B0C4DE | 176,196,222 |
PowderBlue | B0E0E6 | 176,224,230 |
LightBlue | ADD8E6 | 173,216,230 |
SkyBlue | 87CEEB | 135,206,235 |
LightSkyBlue | 87CEFA | 135,206,250 |
DeepSkyBlue | 00BFFF | 0,191,255 |
DodgerBlue | 1E90FF | 30,144,255 |
CornflowerBlue | 6495ED | 100,149,237 |
RoyalBlue | 4169E1 | 65,105,225 |
Blue | 0000FF | 0,0,255 |
MediumBlue | 0000CD | 0,0,205 |
DarkBlue | 00008B | 0,0,139 |
Navy | 000080 | 0,0,128 |
MidnightBlue | 191970 | 25,25,112 |
Color Name | Hex Code RGB | Decimal Code RGB |
---|
Browns |
Cornsilk | FFF8DC | 255,248,220 |
BlanchedAlmond | FFEBCD | 255,235,205 |
Bisque | FFE4C4 | 255,228,196 |
NavajoWhite | FFDEAD | 255,222,173 |
Wheat | F5DEB3 | 245,222,179 |
BurlyWood | DEB887 | 222,184,135 |
Tan | D2B48C | 210,180,140 |
RosyBrown | BC8F8F | 188,143,143 |
SandyBrown | F4A460 | 244,164,96 |
Goldenrod | DAA520 | 218,165,32 |
DarkGoldenrod | B8860B | 184,134,11 |
Peru | CD853F | 205,133,63 |
Chocolate | D2691E | 210,105,30 |
SaddleBrown | 8B4513 | 139,69,19 |
Sienna | A0522D | 160,82,45 |
Brown | A52A2A | 165,42,42 |
Maroon | 800000 | 128,0,0 |
Whites |
White | FFFFFF | 255,255,255 |
Snow | FFFAFA | 255,250,250 |
Honeydew | F0FFF0 | 240,255,240 |
MintCream | F5FFFA | 245,255,250 |
Azure | F0FFFF | 240,255,255 |
AliceBlue | F0F8FF | 240,248,255 |
GhostWhite | F8F8FF | 248,248,255 |
WhiteSmoke | F5F5F5 | 245,245,245 |
Seashell | FFF5EE | 255,245,238 |
Beige | F5F5DC | 245,245,220 |
OldLace | FDF5E6 | 253,245,230 |
FloralWhite | FFFAF0 | 255,250,240 |
Ivory | FFFFF0 | 255,255,240 |
AntiqueWhite | FAEBD7 | 250,235,215 |
Linen | FAF0E6 | 250,240,230 |
LavenderBlush | FFF0F5 | 255,240,245 |
MistyRose | FFE4E1 | 255,228,225 |
Greys |
Gainsboro | DCDCDC | 220,220,220 |
LightGray | D3D3D3 | 211,211,211 |
LightGrey | D3D3D3 | 211,211,211 |
Silver | C0C0C0 | 192,192,192 |
DarkGray | A9A9A9 | 169,169,169 |
DarkGrey | A9A9A9 | 169,169,169 |
Gray | 808080 | 128,128,128 |
Grey | 808080 | 128,128,128 |
DimGray | 696969 | 105,105,105 |
DimGrey | 696969 | 105,105,105 |
LightSlateGray | 778899 | 119,136,153 |
LightSlateGrey | 778899 | 119,136,153 |
SlateGray | 708090 | 112,128,144 |
SlateGrey | 708090 | 112,128,144 |
DarkSlateGray | 2F4F4F | 47,79,79 |
DarkSlateGrey | 2F4F4F | 47,79,79 |
Black | 000000 | 0,0,0 |
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.
Take blue
for example.
Below are quick CSS code examples for applying this color to various HTML elements.
Check out some basic color code examples using color names in the online editor.
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.
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)
.
Check out some basic color code examples using RGB functional notation in the online editor.
Full-Page Example
Here is an example of where CSS color codes can fit into an HTML document.
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.
List of Color Values
Here's a list of color values you can use with CSS.
CSS Named ColorsCSS transparent
KeywordCSS currentcolor
KeywordCSS 3-Digit Hex CodesCSS 4-Digit Hex CodesCSS 6-Digit Hex CodesCSS 8-Digit Hex CodesCSS rgb()
FunctionCSS rgba()
FunctionCSS hsl()
FunctionCSS hsla()
FunctionCSS hwb()
FunctionCSS System ColorsList of Color Properties
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.
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!
FAQs
Basic CSS Colors
Color Name | Hex Code RGB | Decimal Code RGB |
---|
Red | FF0000 | 255,0,0 |
Orange | FFA500 | 255,165,0 |
Yellow | FFFF00 | 255,255,0 |
Olive | 808000 | 128,128,0 |
2 more rows
What are the CSS list of all colors? ›
The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive.
What are the 16 colors in CSS? ›
HTML used to recognize 16 color names ("black", "white", "gray", "silver", "maroon", "red", "purple", "fushsia", "green", "lime", "olive", "yellow", "navy", "blue", "teal", and "aqua"), but new browsers can recognize 147 CSS3 color names. a color number, such as "#FF0000", "#FFFFFF" (those are red and white).
How do you change the color of a CSS code? ›
Simply add the appropriate CSS selector and define the color property with the value you want. For example, say you want to change the color of all paragraphs on your site to navy. Then you'd add p {color: #000080; } to the head section of your HTML file.
What are the CSS codes? ›
CSS (Cascading Style Sheets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout?
What are the CSS specification colors? ›
Color names and sRGB values
Color name | Hex rgb | Decimal |
---|
red | #FF0000 | 255,0,0 |
purple | #800080 | 128,0,128 |
fuchsia | #FF00FF | 255,0,255 |
green | #008000 | 0,128,0 |
12 more rowsJan 18, 2022
How do I find colors in CSS? ›
The most common way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F.
What are the valid CSS color codes? ›
CSS Color Names
Color Name | Color HEX |
---|
Black | #000000 |
BlanchedAlmond | #FFEBCD |
Blue | #0000FF |
BlueViolet | #8A2BE2 |
136 more rows
What are the primary colors in CSS? ›
The three primary colours are specified in the order red, green, blue, prefixed with a # . For example, the colour #f70 indicates a lot of red, a medium amount of green, and no blue (or #F70 : case doesn't matter in these colour codes).
How to name color in CSS? ›
The <named-color> CSS data type is the name of a color, such as red , blue , black , or lightseagreen . Syntactically, a <named-color> is an <ident> . A <named-color> value can be used anywhere a <color> can be used.
#Color names
CSS provides 145 colors names, from the most basic (black, white, orange, yellow, blue…) to the more specific (lawngreen, orchid, crimson…).
How do I change the color of a color in CSS? ›
To change the cursor color, we will use caret-color property. This property is used to set the color of the cursor for input fields, textarea, or other editable areas.
What is the 6 digit color code in CSS? ›
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.
What are the 3 digit colors in CSS? ›
The 3-digit hex code is a shorthand for some 6-digit hex codes. Where r, g, and b represent the red, green, and blue components with values between 0 and f. The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component.
What color is FFFF00 in CSS? ›
The hex code for yellow is #FFFF00.