Prev Next

HTML Colors - HSL

HSL stands for Hue, Saturation, and Lightness. Hue is expressed in degrees (0 to 360), while saturation and lightness are percentages (0% to 100%). HSL is often more intuitive for designers, as it allows you to adjust how colorful and how bright the color is, rather than mixing numeric values of red, green, and blue.

Key Topics

Basic HSL Usage

Example: Using HSL like hsl(0,100%,50%) for a pure red.

<p style="color:hsl(0,100%,50%);">This text is pure red.</p>

Example: Applying a background color using HSL, e.g., hsl(120,100%,50%) for green.

<div style="background:hsl(120,100%,50%); padding:10px;">Green background</div>

An HSL-Themed Page

This example shows how HSL values can be used throughout a webpage. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>HSL Color Page</title>
</head>
<body style="background:hsl(60,20%,90%);">
    <h1 style="color:hsl(200,100%,30%);">Welcome to the HSL Spectrum</h1>
    <p style="color:hsl(100,50%,40%);">This paragraph uses HSL for a subdued green tone.</p>
    <div style="background:hsl(300,50%,50%); padding:10px;">
        <h2 style="color:hsl(0,0%,100%);">A Muted Purple Section</h2>
        <p>HSL makes it easier to adjust hue, saturation, and lightness for precise control.</p>
    </div>
</body>
</html>

Explanation: By manipulating hue, saturation, and lightness, you can achieve subtle color variations that are often more intuitive for design work, compared to RGB or HEX.

Applying HSL in Tables

This demonstration applies HSL values to a table for a unique color scheme. Another full code sample is provided below.

<h2 style="color:hsl(240,50%,30%);">HSL Data Table</h2>
<table border="1" style="border-collapse:collapse; width:50%;">
    <tr style="background:hsl(0,0%,80%);">
        <th style="color:hsl(0,0%,0%); padding:10px;">Item</th>
        <th style="color:hsl(0,0%,0%); padding:10px;">Quantity</th>
    </tr>
    <tr>
        <td style="color:hsl(120,60%,20%); text-align:center;">Apples</td>
        <td style="color:hsl(120,60%,20%); text-align:center;">25</td>
    </tr>
    <tr>
        <td style="color:hsl(0,60%,20%); text-align:center;">Cherries</td>
        <td style="color:hsl(0,60%,20%); text-align:center;">40</td>
    </tr>
</table>

Explanation: Using HSL in tables lets you fine-tune color intensity and brightness. Adjusting saturation and lightness can create a subtle, elegant palette.

Key Takeaways

  • HSL allows a more natural approach to choosing colors by adjusting hue, saturation, and lightness.
  • Designers often find HSL more intuitive than RGB or HEX for selecting just the right shade.
  • HSL can create harmonious color palettes with consistent lightness and saturation levels.
  • Use HSL to easily tweak the mood of your design by changing hue or adjusting brightness.
  • Combine HSL with other color models as needed for maximum flexibility and control.
Prev Next