How To Change Background Color In Css

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