CSS Colors

HSL

The HSL (hue, saturation and lightness) color model was designed in the 1970s with a goal of a more human intuitive color model which is more in line with how our eyes work.

Functional notation

HSL colors have only one notation: the functional notation. The functional notation uses the numbers between 0 and 360 to specify the angle of the color circle followed by two percentages between 0 and 100 for level of saturation and lightness.

h1 {
  color: hsl(120, 50%, 100%);
}

We can also specify an optional alpha component that represents the color's transparency.

h1 {
  color: hsla(120, 50%, 100%, 75%);
}

Copy
hsla(60, 75%, 50%, 0.9)

<div class="movie-quote">
  <p>
    What we do in life echoes in eternity.
  </p>
  <footer>
    -- Maximus, <em>The Gladiator</em>
  </footer>
</div>

.movie-quote {
  background-color: rgb(55, 0, 100);
  padding: 1em;
  border-radius: 1em;
}

.movie-quote footer {
  text-align: right;
}