CSS Colors
In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value.
CSS Background Color
You can set the background color for HTML elements:
Example
|
1 2 |
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p> |
CSS Text Color
You can set the color of text:
Example
|
1 2 3 |
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p> |
CSS Border Color
You can set the color of borders:
Example
|
1 2 3 |
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1> |
CSS Color Values
In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
RGB Value
An RGB color value represents RED, GREEN, and BLUE light sources.
In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <h1>Specify colors using RGB values</h1> <h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2> <h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2> <h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2> <h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2> <h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2> <h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2> </body> </html> |
HEX Value
A hexadecimal color is specified with: #RRGGBB.
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
To display black, set all values to 00, like this: #000000.
To display white, set all values to ff, like this: #ffffff.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <h1>Specify colors using HEX values</h1> <h2 style="background-color:#ff0000;">#ff0000</h2> <h2 style="background-color:#0000ff;">#0000ff</h2> <h2 style="background-color:#3cb371;">#3cb371</h2> <h2 style="background-color:#ee82ee;">#ee82ee</h2> <h2 style="background-color:#ffa500;">#ffa500</h2> <h2 style="background-color:#6a5acd;">#6a5acd</h2> </body> </html> |
HSL Value
HSL stands for hue, saturation, and lightness.
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel (from 0 to 360):
- 0 (or 360) is red
- 120 is green
- 240 is blue
Saturation is a percentage value: 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage; 0% is black, 50% is neither light or dark, 100% is white.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <h1>Specify colors using HSL values</h1> <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2> <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2> <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2> <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2> <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2> <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2> </body> </html> |
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <h1>Make transparent colors with RGBA</h1> <h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2> <h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2> </body> </html> |
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel – which specifies the opacity for a color.
An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body> <h1>Make transparent colors with HSLA</h1> <h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2> <h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2> </body> </html> |