Colors Tutorial
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
Colors Tutorial
❮ Home
Next ❯
Colors are displayed combining RED, GREEN, and BLUE light.
Color Names
With CSS, colors can be set by using color names:
Example
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
Try it Yourself »
CSS Color Values
With CSS, colors can be specified in different ways:
- By color names
- As RGB values
- As hexadecimal values
- As HSL values (CSS3)
- As HWB values (CSS4)
RGB Colors
RGB color values are supported in all browsers.
An RGB color value is specified with: rgb(red, green, blue).
Each parameter (red, green, and
blue) defines the intensity of the color as an integer between 0 and 255.
For example, rgb(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.
Example
Color
RGB
Color
rgb(255,0,0)
Red
rgb(0,255,0)
Green
rgb(0,0,255)
Blue
Try it Yourself »
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
Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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 blue, because 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
Try it Yourself »
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
Try it Yourself »
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 |
❮ Home
Next ❯