Colors Tutorial
Colors
Colors are displayed combining REDGREENand BLUE light.
Color Names
With CSScolors can be set by using color names:
CSS Color Values
With CSScolors can be specified in different ways:
- By color names
- As RGB values
- As hexadecimal values
- As HSL values (CSS3)
- As HWB values (CSS4)
- With the
currentcolorkeyword
RGB Colors
RGB color values are supported in all browsers.
An RGB color value is specified with: rgb( RED , GREEN , BLUE ).
Each parameter defines the intensity of the color as an integer between 0 and 255.
For examplergb(0,0,255) is rendered as blue because the blue parameter is set to its highest value (255) and the others are set to 0.
Shades of gray are often defined using equal values for all the 3 light sources:
Example
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Hexadecimal Colors
Hexadecimal color values are also supported in all browsers.
A hexadecimal color is specified with: #RRGGBB.
RR (red)GG (green) and BB (blue) are hexadecimal integers between 00 and FF specifying the intensity of the color.
For example#0000FF is displayed as bluebecause the blue component is set to its highest value (FF) and the others are set to 00.
Example
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Shades of gray are often defined using equal values for all the 3 light sources:
Example
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Upper Case or Lower Case?
You can use upper case or lower case letters to specify hexadecimal values.
Lower case are easier to write. Upper case are easier to read.
Color Names
CSS supports 140 standard color names.
In the next chapter you will find a complete alphabetical list of color names with hexadecimal values:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
The currentcolor Keyword
The currentcolor keyword refers to the value of the color property of an element.
Example
The border color of the following <div> element will be bluebecause the text color of the <div> element is blue:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}
Try it Yourself »
