Explore HSL hue relationships and lightness steps, record labeled HEX swatches and check actual text/background contrast for a digital color worksheet.
Use a digital sRGB/HSL worksheet for the tools linked here. Record a base color as a 3- or 6-digit HEX value. If you are studying an artist’s red–yellow–blue wheel or mixing physical pigments, label that separate model rather than treating these digital coordinates as its mixing rules.
Enter the base HEX in Complementary Color Finder. It preserves HSL saturation and lightness while rotating hue: 180° for a complementary candidate, 120° and 240° for a triad, and ±30° for analogous candidates. Copy the labeled output into your worksheet.
Enter the same HEX into Color Shade Generator. It keeps HSL hue and saturation and outputs ten lightness values from 95% down to 5% in steps of 10 percentage points. Record the values separately from the hue relationships so you know what changed.
Build a worksheet with a text label and HEX value beside each swatch, plus the model and transformation used. For a digital interface, check the actual text/background pair in Color Contrast Checker; a harmony relationship alone says nothing about readable contrast. Keep an example of where you intend to use the candidate.
Generate labeled complementary, triadic and analogous candidates by rotating hue in HSL.
Generate ten digital HSL lightness candidates at 95%, 85%, …, 5% while preserving base hue and saturation.
Check an actual digital text/background pair; HSL harmony does not establish readable contrast.
Loading your checklist…
W3C defines HSL in terms of hue, saturation and lightness, resolving to sRGB. The circle places red at 0°, green at 120° and blue at 240°. Zero saturation is gray. HSL lightness is not perceptually uniform; use the values as model coordinates.
These are outputs of the linked digital tools, not physical pigment recipes or recommended text/background pairs.
| Transformation | Digital result |
|---|---|
| Base | #ff0000 — HSL 0°, 100%, 50% |
| Complement, +180° | #00ffff |
| Triad, +120° and +240° | #00ff00; #0000ff |
| Analogous, −30° and +30° | #ff0080; #ff8000 |
| Lightness series endpoints | 95%: #ffe5e5; 5%: #1a0000 |
Repeat the candidate row for each result you want to keep. Give every swatch a readable text label.
| Record | Your note |
|---|---|
| Model and base | [sRGB/HSL; base HEX] |
| Candidate | [name, HEX and hue rotation or lightness value] |
| Intended use | [component, illustration or other digital use] |
| Text and background if applicable | [actual pair; contrast check result] |
| Decision | [keep, revise or reject; reason] |
A candidate can work as decoration while failing as small text. Record the actual text/background pair and its context instead of approving an entire palette with one check.