Skip to content
yutils
Example

Input (base color)

#5b21b6 (Iris)

Output

Shades: #45198b, #301160, #1a0a34, #0b0416, #0b0416
Tints: #7230da, #905ce1, #ad87e9, #cbb2f1, #e8ddf9
Complement: #7cb621
Analogous: #2132b6, #a521b6
Triad: #b65b21, #21b65b
Tetrad: #b62132, #7cb621, #21b6a5

Note

Click any swatch to copy its HEX. Shades/tints adjust L only; hue rotation drives complement / analogous / triad / tetrad.

Usage / FAQ

When to use

  • Derive light/dark variants from a brand color for a design system
  • Seed Tailwind / shadcn-style 50/100/200/.../900 tokens
  • Quickly explore complementary / analogous palettes for supporting colors
  • Pick chart palettes from triad / tetrad schemes for data viz
  • Pair with Color Converter and Color Contrast in a design workflow

FAQ

Q.Shades vs tints?
A.Shades darken (add black, decrease L); tints lighten (add white, increase L). This tool adjusts HSL's L directly in ±10% steps × 5.
Q.How are complement / analogous / triad / tetrad computed?
A.Hue rotation only: complement +180°, analogous ±30°, triad ±120°, tetrad ±90° + 180°. Saturation and lightness stay the same as the base.
Q.What about more accurate color spaces like OKLCH?
A.Currently HSL-based — simple and fast. Perceptual spaces like OKLCH match human vision better but use different rotation conventions. Under consideration.
Fun facts

  • The HSL (Hue / Saturation / Lightness) color space was introduced in 1978 by Alvy Ray Smith. It decomposes RGB — which is machine-friendly but cognitively opaque — into a hue angle (0–360°) plus saturation and lightness. That's why every color picker UI ended up using it.

    Wikipedia — HSL/HSV

  • Color-harmony rules — complementary, triadic, tetradic — trace back to Goethe's 1810 'Theory of Colours' and the color wheel he popularized. The reason a 200-year-old palette idea still drives digital UI design: the afterimage response in the human eye hasn't changed.

    Wikipedia — Color wheel

  • CSS Color 4 (2024) added oklch / oklab, fixing HSL's hidden flaw — same lightness values look visibly different across hues. oklch corrects for the eye's non-linear response, so 'lightness 50%' actually feels equally bright across the wheel.

    W3C — CSS Color 4

Related guides

Related tools

See all in this category →