HTML Colors

(Image Source: HTML.com)

In now days colors are the most important things without this we can't imagine anything. HTML also needed colors to make a website beautiful. So how do we use colors in HTML? so today you will learn about colors and how and where to use.

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. so we will cover all these with an example so that you can understand.

Color Names:

We can't display all color names in one page for that visit this link: Click Here
Here are some Example of color names
Red,green,Blue, etc.

Background Color:

So how to use color in the background?
It's kind of simple just add background-color:color name/code; in an inline style or css.
Example:

<h1 style="background-color:red;">Hello World</h1>
<p style="background-color:green;">we are good at what we do</p>

Result:

Hello World

we are good at what we do.

Text Color:

Now you know how to color background so let's move to how to color your text.

It's simple then coloring background just add color:color name/code; in an inline style or css.

Example:

<h1 style="color:red;">Hello World</h1>
<p style="color:green;">We are good at what we do.</p>
<p style="color:blue;">Now you will learn how to do.</p>

Result:

Hello World

We are good at what we do.

Now you will learn how to do.

Border Color:

You also can set the color of borders.
Example:

<h1 style="border:2px solid red;">Hello World</h1>
<h1 style="border:2px solid blue;">Hello World</h1>
<h1 style="border:2px solid green;">Hello World</h1>

Result:

Hello World

Hello World

Hello World

Color Values:

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. Don't worry i will go through all these values to make you understand about HTML colours.

so let's get to the point.

RGB Value:

RGB stands for Red Green Blue. we can define a color by using RGB value or Formula.

rbg(red, green, blue)

* Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
Example: rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
* To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).
*To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

Result:

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

HEX Value:

In HTML, a color can be specified using a hexadecimal value in the form below.

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). 

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).

Example:

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

Result:

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd

HSL Value:

HSL stands for Hue Saturation lightness. We can define a color by using HSL value in the form below.

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.

Example Of Hue:

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

Result:

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

hsl(300, 76%, 72%)

hsl(39, 100%, 50%)

hsl(248, 53%, 58%)

Example Of Saturation:

* Saturation can be described as the intensity of a 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.
Example:

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

Result:

hsl(0, 100%, 50%)

hsl(0, 80%, 50%)

hsl(0, 60%, 50%)

hsl(0, 40%, 50%)

hsl(0, 20%, 50%)

hsl(0, 0%, 50%)

Example Of Lightness:

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
Example:

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

Result:

hsl(0, 100%, 0%)

hsl(0, 100%, 25%)

hsl(0, 100%, 50%)

hsl(0, 100%, 75%)

hsl(0, 100%, 90%)

hsl(0, 100%, 100%)

RGBA Value:

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color. 

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

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

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

Result:

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 0.4)

rgba(255, 99, 71, 0.6)

rgba(255, 99, 71, 0.8)

rgba(255, 99, 71, 1)

HSLA Value:

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. 

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

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

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

Result:

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

Hope i helped you to understand HTML colors. If you still have any problem or question just comment below and make sure you subscribed our blog for more posts like this.
Thank you.