HSL Color value Properties
- HSL representation defines colors based on Hue, Saturation, and Lightness components, offering a more intuitive way to specify colors.
- Hue represents the color type, ranging from 0 to 360 degrees.
- Saturation determines the intensity or purity of the color, from 0% (grayscale) to 100% (full color).
- Lightness controls the brightness of the color, ranging from 0% (black) to 100% (white), with 50% representing normal.
HSL Color value Syntax
// Golden Background
<div style="background-color: hsl(45, 100%, 50%);">
This div has a golden background using HSL
</div>
HSL color value Example:
The example shows the HSL color values.
<!DOCTYPE html>
<html>
<head>
<title>HSL Color Value</title>
<style>
center {
width: 50%;
margin: 0 auto;
}
h2, div, p, span {
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<center>
<h2 style="background-color: hsla(120, 100%, 50%, 0.5);">
Heading with semi-transparent
Green Background color
(HSL: hsla(120, 100%, 50%, 0.5))
</h2>
<div style="border: 2px solid hsla(240, 100%, 50%, 0.7);">
Div with semi-transparent
Blue Border color
(HSL: hsla(240, 100%, 50%, 0.7))
</div>
<span>
<a href="#" style="color: hsla(30, 100%, 50%, 0.8);">
Link has a semi-transparent
Orange color
(HSL: hsla(30, 100%, 50%, 0.8))
</a>
</span>
<p style="color: hsla(0, 100%, 25%, 0.6);">
Paragraph with semi-transparent
Red Text color
(HSL: hsla(0, 100%, 25%, 0.6))
</p>
</center>
</body>
</html>
Output:
hsl color value
HSL Color value Explanation:
- In this example HSLA(120, 100%, 50%, 0.5) creates a semi-transparent green background for the heading with 50% opacity.
- HSLA(240, 100%, 50%, 0.7) sets a semi-transparent blue border for the div with 70% opacity.
- HSLA(30, 100%, 50%, 0.8) defines a semi-transparent orange color for the link with 80% opacity.
- HSLA(270, 100%, 25%, 0.6) specifies semi-transparent purple text for the paragraph with 60% opacity.
HTML Colors
HTML Colors can be applied to text, backgrounds, borders, links, forms, tables, etc. This article provides an in-depth look at how colors can be applied to various elements such as text, backgrounds, borders, links, forms, and tables in HTML. We will explore different color formats including hexadecimal, RGB, RGBA, HSL, and named colors, offering you precise control over the color presentation on your web pages.
Similar Reads
Div with magenta background
Text ColorText color in HTML specifies the color of the text content, similar to font color.Pink color is used
Border ColorHTML Border Color refers to the color of borders around elements like, ![]()
, etc. It defines the color of the border lines.
This div has a green border
Link ColorHTML Link Color specifies the color of the anchor tag within a webpage, allowing us to define the color of clickable text, and making user navigation more visual.Link has a blue color...