HTML Colors

The HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Example

<p style="color: orange">Color of the text is Orange</p>
<p style="background:tomato">Background color is Tomato</p>

Try this code ❯

HTML supports 148 standard color names.

Color Values

HTML Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color.

Syntax:

#rrggbb

• The first two digits(rr) represent a red value.
• The next two are a green value(gg) and
• The last are the blue value(bb).

Example

<p style="background: #FF6347">Background color is in hexadecimal code.</p>

Try this code ❯

HTML Colors - RGB Values

This color value is specified using the rgb( ) property.

This property takes three values, one each for red, green, and blue.

The value can be an integer between 0 and 255 or a percentage.

Syntax:

rgba(red, green, blue)

Example:

Example 1, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Example 2, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

Example 3, rgb(0, 0, 255) is displayed as blue, because blue is set to its highest value (255), and the other two (red and green) are set to 0.

Example

<p style="background: rgb(20,200,200)">Background color is in rgb code.</p>

Try this code ❯

HTML Colors - HSL Values

HSL stands for hue, saturation, and lightness.

Syntax:

hsl(hue, saturation, lightness)

Hue: Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation: Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness: Lightness is also a percentage value, 0% is black, and 100% is white.

Example

<p style="background: hsl(230,100%,50%)">Background color is in rgb code.</p>

Try this code ❯

HTML Colors - RGBA Values

RGBA stands for red, green, blue, and alpha.

Alpha channel which specifies the opacity for a color.

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

Syntax:

rgba(red, green, blue, alpha)

Example

<p style="background: rgba(20,200,200,0.5)">Background color is in rgb code.</p>

Try this code ❯

HTML Colors - HSLA Values

HSLA stands for hue, saturation, lightness, and alpha.

Alpha channel which specifies the opacity for a color.

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

Syntax:

hsla(hue, saturation, lightness, alpha)

Example

<p style="background: hsla(230,100%,50%,0.5)">Background color is in rgb code.</p>

Try this code ❯