HTML colors HEX, RGB , HSL, RGBA #HTMLhex #HTML_colors #HTMLrgb

<html>
<head>
</head>
<body>
<h1 style=”background-color:Blue;”>Hello World</h1>
<p style=”background-color:red;”>SEE red</p>

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

<br>
<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:rgb(255, 99, 71);”>rgb(255, 99,
71)</h1>
<h1 style=”background-color:rgba(255, 99, 71, 0.6);”>rgba(255,
99, 71, 0.6)</h1>

<h1 style=”background-color:hsl(0, 0%, 20%);”>hsl(0, 0%, 20%)
</h1>
<h1 style=”background-color:hsl(0, 0%, 30%);”>hsl(0, 0%, 30%)
</h1>
<h1 style=”background-color:hsl(0, 0%, 40%);”>hsl(0, 0%, 40%)
</h1>
<h1 style=”background-color:hsl(0, 0%, 60%);”>hsl(0, 0%, 60%)
</h1>

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

<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>
</body>
</html>

see the complete code above and description below-

HTML colors

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

See live demo along with code

see the link in the description to get code

color with color names
<h1 style=”background-color:Blue;”>Hello World</h1>
<p style=”background-color:red;”>SEE red</p>

<h1 style=”color:Tomato;”>Hello World</h1>
<p style=”color:DodgerBlue;”>Lorem ipsum…</p>
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

RGB
rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.
256 x 256 x 256 = 16777216 possible colors

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

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

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

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 value, 0% is black, and 100% is white.

<h1 style=”background-color:hsl(0, 0%, 20%);”>hsl(0, 0%, 20%)</h1>
<h1 style=”background-color:hsl(0, 0%, 30%);”>hsl(0, 0%, 30%)</h1>
<h1 style=”background-color:hsl(0, 0%, 40%);”>hsl(0, 0%, 40%)</h1>
<h1 style=”background-color:hsl(0, 0%, 60%);”>hsl(0, 0%, 60%)</h1>
<h1 style=”background-color:hsl(0, 0%, 70%);”>hsl(0, 0%, 70%)</h1>
<h1 style=”background-color:hsl(0, 0%, 90%);”>hsl(0, 0%, 90%)</h1>

HSLA Color Values
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)

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

hex
<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>

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *