Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
17 views3 pages

2 Color

The document provides examples of how to use different color properties in HTML, including background color, text color, and border color. It explains color values in various formats such as RGB, RGBA, HSL, HSLA, and HEX. Additionally, it describes the significance of the alpha channel in color opacity and provides examples of each color format in HTML code.

Uploaded by

Mani Baluchamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views3 pages

2 Color

The document provides examples of how to use different color properties in HTML, including background color, text color, and border color. It explains color values in various formats such as RGB, RGBA, HSL, HSLA, and HEX. Additionally, it describes the significance of the alpha channel in color opacity and provides examples of each color format in HTML code.

Uploaded by

Mani Baluchamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Color

Example : Background Color

<!DOCTYPE html>
<html>
<body>

<body style="background-color:red;">
<!-- <body style="background-color:powderblue;"> -->

Example : Text - Color

<!DOCTYPE html>
<html>

<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Example : Border Color

<!DOCTYPE html>
<html>

<body>

<h1 style="border:2px solid Tomato;">Hello World</h1>


<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

</body>
</html>

Example : Color : rgb - rgba - hsl - hsla - HEX Color Values

RGB stands for Red Green and Blue


HSL stands for hue, saturation, and lightness

A stands for Alpha channel - which specifies the opacity for a color.

<!DOCTYPE html>
<html>

<body>

<!-- RGBA color values are an extension of RGB color values with an Alpha channel - which
specifies the opacity for a color. -->
<!-- rgba(red, green, blue) -->
<!-- rgba(red, green, blue, alpha) -->

<h1 style="background-color:rgb(255, 99, 71);">...</h1>


<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

</body>
</html>

Example : HEX Color Values

<!DOCTYPE html>
<html>

<body>
<h2 style="background-color:#FFA07A;">#FFA07A</h2>

<!--
HEX Color Values
#rrggbb
Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other
two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and
the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.
To display white, set all color parameters to ff, like this: #ffffff.

-->

</body>
</html>

Example : HSL - HSLA

<!DOCTYPE html>
<html>

<body>
<!--
HSLA Color Values
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)
hsl(0, 100%, 50%)
hsla(0, 100%, 50%, 0.5)
-->

<h2 style="background-color:hsl(0, 100%, 50%);">Example of HSL Color</h2>


<h2 style="background-color:hsl(0, 100%, 50%, 0.5);">Example of HSL Color</h2>

</body>
</html>

You might also like