hsl() CSS Function - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* General styling for the swatches */
.card {
    width: 300px;
    height: 60px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    border-radius: 8px;
}

/* Syntax: hsl(hue, saturation, lightness)
  - Hue: 0 to 360 (0 is red, 120 is green, 240 is blue)
  - Saturation: 0% to 100% (0% is gray, 100% is full color)
  - Lightness: 0% to 100% (0% is black, 100% is white)
*/

.base-color {
    background-color: hsl(210, 100%, 50%); /* A vibrant blue */
}

.lighter-color {
    /* We just increased Lightness from 50% to 80% */
    background-color: hsl(210, 100%, 80%); 
}

.desaturated-color {
    /* We dropped Saturation from 100% to 20% */
    background-color: hsl(210, 20%, 50%);
}

.complementary-color {
    /* We shifted Hue by 180 degrees (210 - 180 = 30) to get Orange */
    background-color: hsl(30, 100%, 50%);
}</style></head><body><h2>CSS hsl() Swatches</h2>

    <div class="card base-color">Base Color (Blue)</div>
    <div class="card lighter-color">Lighter Version</div>
    <div class="card desaturated-color">Desaturated (Grayscale)</div>
    <div class="card complementary-color">Complementary (Orange)</div></body></html>