CSS HSL Colors
HSL Color Picker
HSL: hsl(0, 100%, 50%)
In CSS, colors can be defined using the HSL (Hue, Saturation, Lightness) format:
HSL Syntax:
color: hsl(H, S%, L%);
- H (Hue) → A degree (0-360) on the color wheel (0 = red, 120 = green, 240 = blue).
- S (Saturation) → A percentage (0% = gray, 100% = full color).
- L (Lightness) → A percentage (0% = black, 100% = white).
Examples of HSL Colors:
color: hsl(0, 100%, 50%); /* Red */
color: hsl(120, 100%, 50%); /* Green */
color: hsl(240, 100%, 50%); /* Blue */
color: hsl(60, 100%, 50%); /* Yellow */
color: hsl(180, 100%, 50%); /* Cyan */
color: hsl(300, 100%, 50%); /* Magenta */
color: hsl(30, 100%, 50%); /* Orange */
HSL with Transparency (HSLA)
You can also add an alpha (opacity) value using HSLA:
color: hsla(0, 100%, 50%, 0.5); /* Red with 50% transparency */
HSL Color Boxes
HSL Background Colors Table
| HSL Value | Color Preview |
|---|