totn CSS

CSS: background-color property

This CSS tutorial explains how to use the CSS property called background-color property with syntax and examples.

Description

The CSS background-color property defines the background color of an element.

Syntax

The syntax for the background-color CSS property is:

background-color: value;

Parameters or Arguments

value

The background color of the element. It can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the background color
div { background-color: #FF0000; }
rgb() RGB representation of the background color
div { background-color: rgb(255,0,0); }
color name Name of the background color (ie: red, blue, black, white)
div { background-color: red; }
transparent Indicates that the element shows the background-color of the element behind it.
The default value for CSS background-color is transparent.
div { background-color: transparent; }
inherit Element will inherit the background-color from its parent element
div { background-color: inherit; }

Note

  • The value in the CSS background-color property can be expressed as a hexadecimal value, rgb value, or as a named color.
  • Background-color values can be expressed in hexadecimal values such as #FFFFFF, #000000, and #FF0000.
  • Background-color values can be expressed using rgb such as rgb(255,255,255), rgb(0,0,0), and rgb(255,0,0).
  • Background-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 background-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 background-color property below, exploring examples of how to use this property in CSS.

Using Hexadecimal

Let's look at a CSS background-color example where we have provided a hexadecimal value for the color.

div { background-color: #FFFFFF; }

In this CSS background-color example, we have provided a hexadecimal value of #FFFFFF which would display the background color as white for the <div> tag.

Using RGB

We can also provide the background-color value using rgb.

div { background-color: rgb(255,255,255); }

In this CSS background-color example, rgb(0,0,0) would also display background color as white for the <div> tag.

Using Color Name

Let's look at a CSS background-color example where we have provided the value as a named color.

div { background-color: white; }

In this CSS background-color example, we have provided the name "white" which would also set the background color of the <div> to white.

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