Cascading Style Sheets/Color
< Cascading Style SheetsColors can be specified for various objects. These include text ("color: white"), background ("background-color: white"), and borders ("border-color: gray").
An example CSS rule that sets all h1 elements to have white text on a red background:
h1 { color: white; background-color: red; }
Methods of specification of colors, an overview:
- English name, such as
color: white - Hexadecimal RGB value, such as
color: #ff0000 - Soft colours in hexadecimal RGB value like
color: #f00 - Decimal RGB value, such as
color: rgb(255, 0, 0) - Decimal RGBA value, such as
color: rgba(255, 0, 0, 0.2) - HSL value, such as
color: hsl(120, 100%, 50%) - HSLA value, such as
color: hsla(0, 100%, 50%, 0.5)
Specification of colors is detailed in the following sections.
If you set any colors in your web page, you should set both the background and text color for the body element of the page. Imagine if you set the text color to black and did not set the background color. A user has their preferred colors set to yellow text on a black background, a fairly common combination for users with low vision. The page is rendered with your black text on their black background and is unusable.
Using English names
The following 16 values are defined:
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
yellow
white
CSS does not define the exact shade that should be used for the named colours. Use RGB-values if the exact shade is important.
Hexadecimal RGB value
| Hex | Bin | Dec |
|---|---|---|
| 0 | 0000 | 0 |
| 1 | 0001 | 1 |
| 2 | 0010 | 2 |
| 3 | 0011 | 3 |
| 4 | 0100 | 4 |
| 5 | 0101 | 5 |
| 6 | 0110 | 6 |
| 7 | 0111 | 7 |
| 8 | 1000 | 8 |
| 9 | 1001 | 9 |
| A | 1010 | 10 |
| B | 1011 | 11 |
| C | 1100 | 12 |
| D | 1101 | 13 |
| E | 1110 | 14 |
| F | 1111 | 15 |
The mixture ratio of a color to be displayed is specified in hexadecimal notation. That is, they are written in base-16 as opposed to the more familiar base 10. A reference table is included, courtesy Wikipedia.
The two first hexadecimal digits specify the amount of red in the color[1], the third and fourth specify the amount of green and the last two figures specify the amount of blue.
h1 { color: #ff0000; } /* All h1 headings are printed in bright red. */
A short-hand notation is permitted: #rgb is equivalent to #rrggbb, e.g. #3cf is equivalent to #33ccff.
Note that the range of values possible is hexadecimal 00 (= decimal 0) to hexadecimal ff (= decimal 255). This is the same range that is available using the rgb notation from the next section.
RGB value
RGB is a abbreviation for red, green and blue – the three colors that are mixed to create all the other colors on a computer screen.
The basic syntax is rgb(red-value, green-value, blue-value).
The different values can be set using two different approaches.
A number from 0 to 255
h1 { color: rgb(255, 0, 0); } /* All h1 headings are printed in bright red. */
A decimal figure from 0% to 100%
h1 { color: rgb(100%, 0, 0); } /* All h1 headings are printed in bright red. */
Note that you can use either integer (0-255) or percentage (0-100%) values, you cannot mix them.
RGBA value
RGBA is RGB with an added alpha channel as its 4th argument. The alpha channel is a value between 0 (fully transparent) and 1 (opaque). RGBA is part of CSS3.
div { background-color: rgba(255, 0, 0, 0.5); } /* All divs are in bright red with 50% opacity. */
Please note that MediaWiki blocks the use of the background-image property, so you must copy the code used below to a file or your snippet editor to see the full effect.
<div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');">
<div style="background-color: rgba(255, 0, 0, 0); padding: .25em;">background-color: rgba(255, 0, 0, 0);</div>
<div style="background-color: rgba(255, 0, 0, 0.1); padding: .25em;">background-color: rgba(255, 0, 0, 0.1);</div>
<div style="background-color: rgba(255, 0, 0, 0.2); padding: .25em;">background-color: rgba(255, 0, 0, 0.2);</div>
<div style="background-color: rgba(255, 0, 0, 0.3); padding: .25em;">background-color: rgba(255, 0, 0, 0.3);</div>
<div style="background-color: rgba(255, 0, 0, 0.4); padding: .25em;">background-color: rgba(255, 0, 0, 0.4);</div>
<div style="background-color: rgba(255, 0, 0, 0.5); padding: .25em;">background-color: rgba(255, 0, 0, 0.5);</div>
<div style="background-color: rgba(255, 0, 0, 0.6); padding: .25em;">background-color: rgba(255, 0, 0, 0.6);</div>
<div style="background-color: rgba(255, 0, 0, 0.7); padding: .25em;">background-color: rgba(255, 0, 0, 0.7);</div>
<div style="background-color: rgba(255, 0, 0, 0.8); padding: .25em;">background-color: rgba(255, 0, 0, 0.8);</div>
<div style="background-color: rgba(255, 0, 0, 0.9); padding: .25em;">background-color: rgba(255, 0, 0, 0.9);</div>
<div style="background-color: rgba(255, 0, 0, 1); padding: .25em;">background-color: rgba(255, 0, 0, 1);</div>
</div>
Here is the example again, with a silver background:
HSL value
HSL stands for hue, saturation and lightness. It is the color value system used by many cathode-ray tube devices. HSL is part of CSS3.
- hsl(color-angle, saturation%, lightness%);
div.red { background-color: hsl(0, 100%, 50%); } /* red in HSL */
div.green { background-color: hsl(120, 100%, 50%); } /* green in HSL */
div.blue { background-color: hsl(240, 100%, 50%); } /* blue in HSL */
Red:
Green:
Blue:
HSLA value
HSLA is the HSL color with an alpha channel. Like RGBA, the 4th argument is a value between 0 and 1. HSLA is part of CSS3.
div.red { background-color: hsla(0, 100%, 50%, 0.5); } /* red in HSL with 50% opacity*/
div { background-color: hsla(0, 100%, 50%, 0.5); } /* All divs are in bright red with 50% opacity. */
Please note that MediaWiki blocks the use of the background-image property, so you must copy the code used below a file or your snippet editor to see the full effect.
<div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');">
<div style="background-color: hsla(0, 100%, 50%, 0); padding: .25em;">background-color: hsla(0, 100%, 50%, 0);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.1); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.1);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.2); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.2);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.3); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.3);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.4); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.4);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.5); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.5);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.6); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.6);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.7); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.7);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.8); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.8);</div>
<div style="background-color: hsla(0, 100%, 50%, 0.9); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.9);</div>
<div style="background-color: hsla(0, 100%, 50%, 1); padding: .25em;">background-color: hsla(0, 100%, 50%, 1);</div>
</div>
Here is the example again, with a silver background: