HTML Colors

HTML Tutorial

About Lesson

HTML Colors

In this tutorial, we will learn about colors in HTML with the help of examples.

Colors

Colors are used to design the webpage more attractive. Colors are very important for a webpage to give a better look and feel.
Colors are specified with predefined color names, or HEX, RGB, RGBA, or HLSA values.

Specify Colors

There are five ways to specify color names in HTML :

Predefined Color Names
HEX code
RGB value
RGBA value
HLSA value

Predefined Color Names

Colors can be specified directly by a color name.

There are about 150 color names are predefined in HTML that can be used in our HTML code.

For Example – red, blue, green, pink, yellow, etc.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>Predefined Color Name</title>
  </head>
  <body>
    <p style = "color : violet;">This is violet color paragraph.</p>
  </body>
</html>

Output

This is violet color paragraph.

HEX code

We define the color in 6 digits hexadecimal number(from 0 to f).
In hexadecimal color the first two digits indicate red color, the next two indicate green and the last two blue colors.
For example : Black hex code is #000000, White hex code is #ffffff .

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HEX code</title>
  </head>
  <body>
    <p style = "color : #2225b9;">This is #2225b9 color paragraph.</p>
  </body>
</html>

Output

This is #2225b9 color paragraph.

RGB Value

In RGB, R stands for Red, G stands for Green, and B stands for Blue. In this, we need to define 3 values indicating RGB color.
The range of each color is from 0 to 255.
For example : rgb(0,0,0) is Black color and rgb(255,255,255) is white color.

Syntax :

rgba(red, blue, green)

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>RGB Value</title>
  </head>
  <body>
    <p style = "color : rgb(205, 14, 14);">This is rgb(205, 14, 14) 
color paragraph.</p>
  </body>
</html>

Output

This is rgb(205, 14, 14) color paragraph.

RGBA Value

In RGBA, R stands for Red, G stands for Green, B stands for Blue, and A stands for Alpha (opacity).
Alpha property allows us to make the color transparent. Alpha represents the degree of transparency. In this, we need to define 4 values indicating RGBA color. The range of red, green, and blue color is from 0 to 255 and that of alpha is from 0 to 1.

For example : rgba(0,0,0,1) is Black color and rgba(255,255,255,1) is white color.

Syntax :

rgba(red, blue, green, alpha)

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>RGBA Value</title>
  </head>
  <body>
    <p style = "color : rgba(213, 224, 0, 1);">This is
 rgba(213, 224, 0, 1) color paragraph.</p>
  </body>
</html>

Output

This is rgba(213, 224, 0, 1) color paragraph.

HSL Value

In HSL, H stands for hue, S stands for saturation, and L stands for lightness.

Syntax :

hsl(hue, saturation, lightness)

HSL Color values

Hue : Hue is the color of the image. Its range is from 0 to 360. Here, 0 is for red, 120 is for green, and 240 is for blue.
Saturation : Saturation is the intensity/clarity of the hue. Here, 0% is for a light shade of gray and 100% is for gray color. When color is fully saturated, the color is considered is in the full version.
Lightness : Lightness is the color space’s brightness. Here, 0% is for Black, and 100% is for white.

Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HSL Value</title>
  </head>
  <body>
    <p style = "color : hsla(308, 100%, 44%, 1)">This is
 hsla(308, 100%, 44%, 1) color paragraph.</p>
  </body>
</html>

Output

This is hsla(308, 100%, 44%, 1) color paragraph.