Tools
Color Palette Generator
Start from one color and build out: a nine-stop ramp of tints and shades, a six-role scheme you can drop into a design system, or a palette sampled from any image. Copy any swatch, or export the whole scheme as CSS variables or Tailwind.
Preview card
This card paints itself with the role scheme so you can read the palette in context.
Pick an image to pull its six most common colors.
Ramps, roles and where each one fits
The ramp walks one hue from near-white to near-black across nine stops. Lightness steps are spaced in OKLCH so the jumps look even to the eye instead of bunching up in the midtones the way evenly-spaced HSL lightness does. Use a light stop for backgrounds, a mid stop for the component itself, a dark stop for text or borders on top of it.
The role scheme answers a different question: not "more of this color" but "a working set." It keeps your
base as primary, rotates the hue most of the way around the wheel for an accent,
and derives quiet bg, surface, text and muted values
tuned to sit behind content. Those six keys match the variables the rest of this site ships, so the export
drops straight in.
Image extract is the fast path when a palette already exists in a photo, screenshot or logo. The picture is shrunk to a 50-pixel canvas, each pixel is rounded into a coarse color bucket, and the six fullest buckets come back as swatches. Small images and flat graphics give the cleanest reads.