Using Colors in CSS
Posted on 2010-11-24 by Jan Vantomme
Tags:
teaching, tutorial
When you want to use colors in CSS 2.1, there are a few ways to set the value for the background and color properties. You can use keywords, hexadecimal characters or set the color in RGB. CSS3 adds three new ways to use colors: RGBA, HSL and HSLA.
Colors in CSS 2.1
The methods for setting colors in this part of the article are safe to use. All current browsers will support this.
Color Keywords
You can use one of the seventeen keywords to define the colors for the background and the text. The CSS rule below sets the background color to white and the text color to black. This method isn't used a lot since you only have a limited amount of colors.
body {
background: white;
color: black;
}All color keywords and their hexadecimal representation are listed below.
- maroon (
#800000) - red (
#ff0000) - orange (
#ffa500) - yellow (
#ffff00) - olive (
#808000) - purple (
#800080) - fuchsia (
#ff00ff) - white (
#ffffff) - lime (
#00ff00) - green (
#008000) - navy (
#000080) - blue (
#0000ff) - aqua (
#00ffff) - teal (
#008080) - black (
#000000) - silver (
#c0c0c0) - gray (
#808080)
Hexadecimal Values
Color values in CSS are usually represented by a string of hexadecimal characters with a hash at the front. The string #fde410 represents a yellow color. The first two characters (fd) are the red component of the color, the two in the middle (e4) are for the green component and the last two (10) for the blue component. You can pick the hexadecimal values for a color with the Photoshop color picker.
The CSS Rule below sets the color for the background to the yellow color from Photoshop. The text color is set to the hexadecimal value for black.
body {
background: #fde410;
color: #000000;
}RGB
You can also specify the same color in RGB. The red component woud be 253, the green component would be 228 and the blue one would be 16. This is the syntax if you want to use RGB.
body {
background: rgb(253, 228, 16);
}Colors in CSS3
Most modern browsers also support the new CSS3 methods for setting colors. Older browsers like IE6 don't support rgba, hsl and hsla so you will need to specify a fallback color. If you don't do this, you might get a problem with the legibility of your text.
RGBA
RGBA works the same way as RGB, but has an extra parameter for the alpha channel. The last parameter for rgba() should be a value between 0.0 (fully transparent) and 1.0 (fully opaque). The CSS Rule below sets the background to a 50% transparent black.
body {
background: rgba(0, 0, 0, 0.5);
}Implementing the fallback color for older browsers is easy. Set that color with a hexadecimal value first, right before the declaration with the rgba() color. Older browsers will ignore the second background property because they don't understand rgba(). Newer browsers will overwrite the first color with the rgba() color. The CSS Rule below sets the background color to black for older browsers, people surfing with a more modern browser will see a transparent black background.
body {
background: #000000;
background: rgba(0, 0, 0, 0.5);
}HSL
HSL stands for Hue, Saturation and Lightness. This is not the same as the HSB values you'll find in the Photoshop color picker. HSB (often called HSV) is another color model and stands for Hue, Saturation and Brightness. Wikipedia has a good entry on "HSL and HSV color models":https://en.wikipedia.org/wiki/HSL_and_HSV.
The hsl() method also takes three parameters, just like the rgb() method. The values for these parameters, however, are different. In RGB you would use a value between 0 and 255 for each of the components. In HSL, you'll use a value between 0 and 360 for the first parameter and a value between 0% and 100% for the second and the third parameter.
body {
background: hsl(320, 50%, 75%);
}Below are some lists with useful values for creating HSL colors.
hue
- red: 0
- yellow: 60
- green: 120
- cyan: 180
- blue: 240
- magenta: 300
saturation
- 0%: fullydesaturated
- 50%: neutral
- 100%: fully saturated
lightness
- 0%: black
- 50%: neutral
- 100%: white
HSLA
HSLA is basically the same as HSL, but like RGBA it also has an alpha channel. The fourth value should also be a number between 0.0 and 1.0.
body {
background: hsl(320, 50%, 75%, 0.8);
}
