CSS: color property
This CSS tutorial explains how to use the CSS property called color with syntax and examples.
Description
The CSS color property defines the foreground color of the text content for an element.
Syntax
The syntax for the color CSS property is:
color: value;
Parameters or Arguments
- value
The foreground color of the element's text content. It can be one of the following:
Value Description #RRGGBB Hexadecimal representation of the color
p { color: #FF0000; }rgb() RGB representation of the color
p { color: rgb(255,0,0); }name Name of the color (ie: red, blue, black, white)
p { color: red; }inherit Element will inherit the color from its parent element
p { color: inherit; }
Note
- The value in the CSS color property can be expressed as a hexadecimal value, rgb value, or as a named color.
- Color values can be expressed in hexadecimal values such as #FFFFFF, #000000, and #FF0000.
- Color values can be expressed using rgb such as rgb(255,255,255), rgb(0,0,0), and rgb(255,0,0).
- Color values can be expressed as named colors such as white, black, and red.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
Browser Compatibility
The CSS color property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the color property below, exploring examples of how to use this property in CSS.
Using Hexadecimal
Let's look at a CSS color example where we have provided a hexadecimal value for the color.
p { color: #000000; }
In this CSS color example, we have provided a hexadecimal value of #000000 which would display the text for the <p> tag in black.
Using RGB
We can also provide the color value using rgb.
p { color: rgb(0,0,0); }
In this CSS color example, rgb(0,0,0) would also display the text for the <p> tag in black.
Using Color Name
Let's look at a CSS color example where we have provided the value as a named color.
p { color: black; }
In this CSS color example, we have provided the name "black" which would also set the foreground color of the text to black.
Color Names
Below is a list of the color names to choose from:
Color Name | Hex Value | Swatch |
---|---|---|
aliceblue | #F0F8FF | |
antiquewhite | #FAEBD7 | |
aqua | #00FFFF | |
aquamarine | #7FFFD4 | |
azure | #F0FFFF | |
beige | #F5F5DC | |
bisque | #FFE4C4 | |
black | #000000 | |
blanchedalmond | #FFEBCD | |
blue | #0000FF | |
blueviolet | #8A2BE2 | |
brown | #A52A2A | |
burlywood | #DEB887 | |
cadetblue | #5F9EA0 | |
chartreuse | #7FFF00 | |
chocolate | #D2691E | |
coral | #FF7F50 | |
cornflowerblue | #6495ED | |
cornsilk | #FFF8DC | |
crimson | #DC143C | |
cyan | #00FFFF | |
darkblue | #00008B | |
darkcyan | #008B8B | |
darkgoldenrod | #B8860B | |
darkgray | #A9A9A9 | |
darkgrey | #A9A9A9 | |
darkgreen | #006400 | |
darkkhaki | #BDB76B | |
darkmagenta | #8B008B | |
darkolivegreen | #556B2F | |
darkorange | #FF8C00 | |
darkorchid | #9932CC | |
darkred | #8B0000 | |
darksalmon | #E9967A | |
darkseagreen | #8FBC8F | |
darkslateblue | #483D8B | |
darkslategray | #2F4F4F | |
darkslategrey | #2F4F4F | |
darkturquoise | #00CED1 | |
darkviolet | #9400D3 | |
deeppink | #FF1493 | |
deepskyblue | #00BFFF | |
dimgray | #696969 | |
dimgrey | #696969 | |
dodgerblue | #1E90FF | |
firebrick | #B22222 | |
floralwhite | #FFFAF0 | |
forestgreen | #228B22 | |
fuchsia | #FF00FF | |
gainsboro | #DCDCDC | |
ghostwhite | #F8F8FF | |
gold | #FFD700 | |
goldenrod | #DAA520 | |
gray | #808080 | |
grey | #808080 | |
green | #008000 | |
greenyellow | #ADFF2F | |
honeydew | #F0FFF0 | |
hotpink | #FF69B4 | |
indianred | #CD5C5C | |
indigo | #4B0082 | |
ivory | #FFFFF0 | |
khaki | #F0E68C | |
lavender | #E6E6FA | |
lavenderblush | #FFF0F5 | |
lawngreen | #7CFC00 | |
lemonchiffon | #FFFACD | |
lightblue | #ADD8E6 | |
lightcoral | #F08080 | |
lightcyan | #E0FFFF | |
lightgoldenrodyellow | #FAFAD2 | |
lightgray | #D3D3D3 | |
lightgrey | #D3D3D3 | |
lightgreen | #90EE90 |
Color Name | Hex Value | Swatch |
---|---|---|
lightpink | #FFB6C1 | |
lightsalmon | #FFA07A | |
lightseagreen | #20B2AA | |
lightskyblue | #87CEFA | |
lightslategray | #778899 | |
lightslategrey | #778899 | |
lightsteelblue | #B0C4DE | |
lightyellow | #FFFFE0 | |
lime | #00FF00 | |
limegreen | #32CD32 | |
linen | #FAF0E6 | |
magenta | #FF00FF | |
maroon | #800000 | |
mediumaquamarine | #66CDAA | |
mediumblue | #0000CD | |
mediumorchid | #BA55D3 | |
mediumpurple | #9370D8 | |
mediumseagreen | #3CB371 | |
mediumslateblue | #7B68EE | |
mediumspringgreen | #00FA9A | |
mediumturquoise | #48D1CC | |
mediumvioletred | #C71585 | |
midnightblue | #191970 | |
mintcream | #F5FFFA | |
mistyrose | #FFE4E1 | |
moccasin | #FFE4B5 | |
navajowhite | #FFDEAD | |
navy | #000080 | |
oldlace | #FDF5E6 | |
olive | #808000 | |
olivedrab | #6B8E23 | |
orange | #FFA500 | |
orangered | #FF4500 | |
orchid | #DA70D6 | |
palegoldenrod | #EEE8AA | |
palegreen | #98FB98 | |
paleturquoise | #AFEEEE | |
palevioletred | #D87093 | |
papayawhip | #FFEFD5 | |
peachpuff | #FFDAB9 | |
peru | #CD853F | |
pink | #FFC0CB | |
plum | #DDA0DD | |
powderblue | #B0E0E6 | |
purple | #800080 | |
red | #FF0000 | |
rosybrown | #BC8F8F | |
royalblue | #4169E1 | |
saddlebrown | #8B4513 | |
salmon | #FA8072 | |
sandybrown | #F4A460 | |
seagreen | #2E8B57 | |
seashell | #FFF5EE | |
sienna | #A0522D | |
silver | #C0C0C0 | |
skyblue | #87CEEB | |
slateblue | #6A5ACD | |
slategray | #708090 | |
slategrey | #708090 | |
snow | #FFFAFA | |
springgreen | #00FF7F | |
steelblue | #4682B4 | |
tan | #D2B48C | |
teal | #008080 | |
thistle | #D8BFD8 | |
tomato | #FF6347 | |
turquoise | #40E0D0 | |
violet | #EE82EE | |
wheat | #F5DEB3 | |
white | #FFFFFF | |
whitesmoke | #F5F5F5 | |
yellow | #FFFF00 | |
yellowgreen | #9ACD32 |
Advertisements