Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
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.

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!