What Is HSL? How to Think About Web Colors Using Hue, Saturation, and Lightness

When adjusting colors for a website, you might want to make a blue lighter or reduce how vivid it looks. HEX and RGB describe colors through red, green, and blue components. HSL instead lets you think in terms of hue, saturation, and lightness. Understanding these three values can make it easier to explain a change and refine a color scheme for an information card or button. However, an HSL lightness value alone cannot tell you whether text will be readable.

What do H, S, and L control?

HSL stands for Hue, Saturation, and Lightness. Hue (H) identifies the color family using an angle: around 0 degrees is red, around 120 degrees is green, and around 240 degrees is blue. Saturation (S) controls how much color is present; at 0% the result is grayscale, while 100% is the maximum saturation for that combination. Lightness (L) ranges from black at 0% to white at 100%, allowing you to explore darker and lighter versions of a hue.

For example, the CSS value hsl(210 100% 40%) produces blue ■#0066CC. Keep the hue and saturation unchanged, but raise lightness to 80%, and hsl(210 100% 80%) gives you pale blue ■#99CCFF. If you keep hue and lightness but reduce saturation to zero, hsl(210 0% 40%) produces gray ■#666666. This separation makes it easier to describe which part of a color you are changing.

HSL’s lightness is not the same as perceived brightness or the relative luminance used for WCAG contrast calculations. Blue ■#0066CC and yellow ■#CCCC00 can both have 100% saturation and 40% HSL lightness, yet look very different. Equal lightness numbers do not guarantee equally readable text colors.

Example: use HSL for the background, text, and button of an information card

Imagine an event information card. Use white ■#FFFFFF outside the card and pale blue ■#99CCFF for the card itself. Set its heading and description in dark gray ■#333333. The link to event details has a solid blue ■#0066CC background with white ■#FFFFFF lettering and an underline. Reuse blue ■#0066CC for the card border, and show a dark-gray ■#333333 outline when the link receives keyboard focus. This keeps the main action prominent without assigning a new color to every element.

In this combination, dark-gray text against the pale-blue card has a contrast ratio of approximately 7.48:1. White text on the blue link has about 5.57:1. Contrast ratio measures the relative brightness difference between two colors. The blue card border contrasts with the white surroundings at about 5.57:1 and with the pale-blue interior at about 3.30:1. The pale-blue surface by itself contrasts with white at only about 1.69:1, so a visible border and spacing help define the card.

The following HTML (HyperText Markup Language, which describes webpage content and structure) and CSS (Cascading Style Sheets, which controls appearance) show how to build the example. CSS writes an HSL value in the order hsl(hue saturation lightness). This code uses HSL directly rather than putting HEX color codes into the CSS declarations.

<div class="hsl-page">
  <section class="hsl-card" aria-label="Event information">
    <h3>Weekend workshop</h3>
    <p>Check the activities and scheduled time.</p>
    <a class="hsl-card__button" href="/sample/event/">
      View event details
    </a>
  </section>
</div>

.hsl-page {
  padding: 24px;
  background-color: hsl(0 0% 100%);
}
.hsl-card {
  padding: 24px;
  background-color: hsl(210 100% 80%);
  color: hsl(0 0% 20%);
  border: 2px solid hsl(210 100% 40%);
  border-radius: 10px;
}
.hsl-card h3 { margin-top: 0; }
.hsl-card__button {
  display: inline-block;
  padding: 12px 18px;
  background-color: hsl(210 100% 40%);
  color: hsl(0 0% 100%);
  border-radius: 6px;
  text-decoration: underline;
}
.hsl-card__button:focus-visible {
  outline: 3px solid hsl(0 0% 20%);
  outline-offset: 3px;
}

The /sample/event/ address is a placeholder; replace it with a real destination when implementing the design. The corresponding HEX colors are shown above with colored squares. The CSS example itself is ready to copy without having to remove square symbols.

Equal HSL lightness does not mean equal text contrast

Consider the same blue ■#0066CC on white ■#FFFFFF: its contrast ratio is about 5.57:1. Yellow ■#CCCC00 on white, even though its HSL lightness is also 40%, reaches only about 1.72:1. The blue combination exceeds the 4.5:1 contrast generally required for normal-sized text, but the yellow combination falls short. A lightness percentage cannot replace a contrast calculation.

Background choice matters too. Gray ■#666666 against white ■#FFFFFF has about 5.74:1 contrast, but the same gray against pale blue ■#99CCFF has only about 3.40:1. That is why the example uses darker gray ■#333333 for the card’s normal-sized description. Under the Web Content Accessibility Guidelines (WCAG) 2.2, normal text generally needs at least 4.5:1 contrast, while essential non-text boundaries and visual control indicators generally need 3:1 against adjacent colors.

After changing hue, saturation, or lightness, check the actual pairs where text, backgrounds, and borders touch. HueRoll displays HSL values for a selected color, while color adjustments can be made through HEX input or its color picker. HueRoll’s contrast comparison is limited to the selected color against white and black; it does not automatically compare arbitrary color pairs or determine WCAG conformance.