Design palettes by drawing a curve
Instead of nudging lightness values one by one, you sketch a single curve across a color field — and a smooth, sequential palette is sampled right off it.
Open the tool →
Instead of nudging lightness values one by one, you sketch a single curve across a color field — and a smooth, sequential palette is sampled right off it.
Open the tool →
The whole screen is a color field: saturation runs left→right, lightness runs top→bottom. Your palette is simply the colors the curve passes through.
Flip between the two modes with this toggle at the top-left of the tool.
Single hue keeps one color family and moves through saturation & lightness — perfect for UI shade ramps (50 → 900).
Multi hue turns the horizontal axis into a hue range, so one curve can sweep across many colors at once — great for data-viz and categorical scales. Set the hue range and saturation, and the same curve tools apply.
Spacing decides where the sample dots sit along the same curve — and that's the difference between a ramp that feels smooth and one that clumps. Watch the dots and the swatches below each shift.
Dots are re-spaced by perceived lightness (OKLab), so each swatch looks one even step from the next. The most balanced, natural-reading ramp — which is why it's on by default.
Equal steps along the line. The dots sit at regular intervals — simple, but tones pile up at the ends and the mid-range thins out.
Drag each dot along the curve yourself — here they're pushed toward the light end, for when you want colors to land at exact spots.
Then set the number of Steps, choose a Cubic (two handles) or Quadratic (one) curve, and Flip the direction anytime.
Toggle these on to overlay accessibility and perception checks directly onto your colors — no round-trips to another tool.
Preview white or black text on every swatch, scored with WCAG ratios or APCA Lc. Instantly see which shades can carry text.
See your palette through protanopia, deuteranopia, tritanopia or greyscale (Machado 2009, computed in linear light). Multi-select to compare.
The OKLab ΔE between neighboring swatches tells you if the steps are evenly spaced. A colored dot flags each gap:
Click any swatch to copy its hex. Or open Export for the whole palette as a HEX list, CSS variables, a Tailwind scale, or JSON.
The tool runs entirely in your browser — nothing is uploaded, and it works offline once loaded.
Every one of these is just a curve on the field — some recipes to start from.
A low-saturation line near the grey edge, bowing out through the mid-tones — greys with a whisper of green for surfaces, borders and text.
Starts as a pale, near-white tint and sweeps into deep saturated shades — a full 50→900 design-system scale.
Saturated at both ends where light and dark are hardest to tell apart, easing off through the middle — an even, legible ramp for choropleths and heatmaps.
A multi-hue curve from yellow into red, darkening as it goes — for severity, risk and alerts.
A flat, high-lightness sweep across the spectrum — soft, friendly fills for tags and illustrations.
An even mid-lightness line across many hues — distinct, balanced colors for categorical chart series.