Gradient Maker

How the second colour is derived

Auto-derive rotates the base hue by 30° and darkens it slightly, rather than simply lightening or darkening the same hue. A gradient between two lightnesses of one colour reads as a shadow; shifting the hue is what makes it read as a designed gradient.

Why the tonal ramp uses HSL

Naive palette generators interpolate straight toward black and white in sRGB, which produces the muddy, desaturated middles you have probably seen. Here only the lightness channel moves — from 0.92 near white down to 0.12 near black — so hue and saturation stay intact across all nine steps. The result is numbered the way a design system does, 900 down to 50.

Readable text on any background

The preview label switches between black and white using the WCAG relative-luminance formula, not an average of the channels. The eye is far more sensitive to green than blue, so a mid green needs dark text while a mid blue with the same naive average needs light text.

Copy it out

• CSS — a ready background: declaration
• Flutter — a LinearGradient or RadialGradient with proper Alignment values
• Tailwind — direction utility plus arbitrary from-[…] and to-[…] stops

Click any swatch in the ramp to copy that single hex value.