HTML Colors

❮ Previous Home Next ❯

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>

HTML supports 148 standard color names.

Color Values

Name Value Syntax
HEX hexadecimal code #rrggbb
RGB red, green, and blue. rgba(red, green, blue)
HSL hue, saturation and lightness hsl(hue, saturation, lightness)
RGBA red, green, blue and alpha rgba(red, green, blue, alpha)
HSLA hue, saturation, lightness and alpha hsla(hue, saturation, lightness, alpha)



HTML Colors - Hex Codes

A hexadecimal is a 6 digit representation of a color.

Syntax: #rrggbb

Example

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






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>



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>



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>



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>
❮ Previous Home Next ❯