Skip to content
yutils
Example

Input (base color)

#5b21b6 (Iris)

Output

Shades: #1a0a39, #2e1273, ... (5 darker steps)
Tints: #7d40d5, #a677e2, ... (5 lighter steps)
Complement: #87b621
Analogous: #4521b6, #5b6db6
Triad: #21b65b, #b6215b
Tetrad: #21b65b, #87b621, #b65b21

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 →