HSLA Color Values
HSLA color values are extensions Of HSL color values, with an Alpha Channel added. Where Alpha denotes the Opacity of a color
Syntax:
hsla ( hue, saturation, lightness, alpha)
//example
h1{
color:hsla(9, 100%, 64%, 0.8);
}
Example 1: In this example, we will see the implementation of above color styles with an example.
html
<!DOCTYPE html> < html > < head > < title >w3wiki</ title > < style type = "text/css" > h1 { color: #0FFFF0; background-color: hsl(200, 50%, 20%); color: hsl(200, 20%, 90%); } h4 { color: rgb(0, 255, 0); background-color: hsl(150, 20%, 40%); color: hsl(360, 30%, 90%); } li { color: rgba(11, 99, 150, 1); background-color: hsl(250, 45%, 60%); color: hsl(175, 35%, 87%); } h3 { color: hsla(9, 100%, 64%, 0.8); } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h4 >Programming Languages</ h4 > < ul > < li >Java</ li > < li >C++</ li > < li >C</ li > </ ul > < h3 >Interview Series</ h3 > </ body > </ html > |
Output:
Example2: In this example, we will see the implementation of above color styles with another example.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Color Styles</ title > < style > /* Hexadecimal Style */ #hexColor { color: #e74c3c; } /* RGB Style */ #rgbColor { color: rgb(231, 76, 60); } /* RGBA Style */ #rgbaColor { color: rgba(231, 76, 60, 0.7); } /* HSL Style */ #hslColor { color: hsl(9, 83%, 58%); } /* HSLA Style */ #hslaColor { color: hsla(9, 83%, 58%, 0.7); } </ style > </ head > < body > < h1 id = "rgbColor" >w3wiki</ h1 > < h1 id = "hexColor" >w3wiki</ h1 > < h1 id = "hslColor" >w3wiki</ h1 > < h1 id = "hslaColor" >w3wiki</ h1 > < h1 id = "rgbaColor" >w3wiki</ h1 > </ body > </ html > |
Output:
HTML Color Styles and HSL
HTML color styles offer various ways to specify colors on a webpage. For Example using HSL (Hue, Saturation, Lightness) allows for intuitive color control, where you adjust hue for the type of color, saturation for intensity, and lightness for brightness. Here are the different styles that can be used to create new colors by the combination of different colors.
Table of Content
- Hexadecimal Style
- RGB Style
- RGBA Style
- HSL Color
- HSLA Color