CSS Colors Tutorial
1. Color Names:
2. Hexadecimal Notation:
3. RGB and RGBA Notation:
4. HSL and HSLA Color Model:
HSL stands for Hue, Saturation, and Lightness, and it is a color model used in CSS to define colors. Here’s how HSL works:
Hue (H):
The hue represents the color itself and is measured in degrees on a color wheel. It ranges from 0 to 360, where 0 and 360 represent red, 120 represents green, and 240 represents blue. The hues in between create different colors.
Saturation (S):
The saturation represents the intensity or purity of the color. It is measured as a percentage from 0% to 100%. A saturation of 0% results in grayscale, while 100% provides full color intensity.
Lightness (L):
The lightness determines the overall lightness or darkness of the color. It is also measured as a percentage, ranging from 0% (black) to 100% (white). A lightness of 50% represents the color at its normal level of brightness.
Alpha value (A):
It represents the color’s transparency and it is specified as a number between 0 and 1, where 0 is fully transparent (completely see-through) and 1 is fully opaque (completely solid). By adjusting the alpha value, you can control the level of transparency for the color.