HTML Colors

We can change the color of an element using predefined color names or RGB, HEX, HSL, RGBA, HSLA values.

Color Names

A color of an element can be changed using the color name.

Background Color

If it's the background color you want to change, use the background-color property.

Text Color

If it's the text color you want to change, use the color property.

Border Color

You can change the borders color using the border property.

Color Values

To have more choices of colors, we can use RGB values, HEX values, HSL values, RGBA values, and HSLA values.

RGB Value

RGB value can be specified using this formula: rgb(red, green, blue).
The parameter (red, green, and blue) defines the intensity of the color. Use between 0 and 255 as the value of the parameter.

Here are some examples so you can understand more the RGB value:

rgb(255, 0, 0) will result to red, because red is set to its highest value (255) and the others are set to 0. Red is the only one who has a value. Therefore, it will display red.
rgb(0, 0, 0) will result to black because all parameters are set to 0.
rgb(255, 255, 255) will result to white because all parameters are set to 255.

Try to experiment by setting different values.

Shades of gray are often defined using equal values for all the 3 light sources.

HEX Value

We can also use hexadecimal as value of the color. The hexadecimal value looks like this: #rrggbb. rr (red), gg (green) and bb (blue) are the parameters. Use between 00 and ff as the value of the parameter. It's just the same as decimal 0-255 but since this is a hexadecimal 255 is equal to f.

Here's an 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).

Shades of gray are often defined using equal values for all the 3 light sources.

HSL Value

We can also use HSL (hue, saturation, and lightness) value for changing the colors. HSL value should be written in this form: hsl(hue, saturation, lightness).

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 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

Saturation

Saturation is the intensity of the color.

100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.

Lightness

Lightness is the amount of light you want to give to the color.

0% means no light (black)
50% means 50% light (neither dark nor light)
100% means full lightness (white).

Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades.

RGBA Value

Another way of changing the color is using the RGBA value. It is almost the same with the RGB value but this one has an alpha channel which specifies the opacity for a color. RGBA is written like this: rgba(red, green, blue, alpha).

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

HSLA Value

The last form we can use for the colors is the HSLA value. It is almost the same as HSL value but it has an alpha channel which specifies the opacity for a color. This is the form for HSLA value: hsla(hue, saturation, lightness, alpha).

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).