Turn two colors into a discrete palette of evenly blended steps — 3 to 16 stops interpolated in OKLab, so the middle never goes muddy the way naive RGB blends do. You get the step list for charts and heatmaps plus the equivalent CSS gradient for backgrounds.
Settings
Generated locally in your browser — your settings and results never leave this page.
Discrete steps from continuous blends
A CSS gradient is a function; a gradient palette is its table of values — N stops sampled evenly between two colors, each a copyable, nameable color in its own right. Charts want the table (heat scales, ordered series), as do design tools, stepped UI states, and any context where “the third color of seven” must be a stable value rather than a rendered pixel. This generator produces both artifacts from one definition: the step list and the equivalent CSS gradient line.
The muddy-middle problem, solved by geometry
Blend vivid blue toward vivid pink through naive sRGB interpolation and the midpoint sags into gray — the notorious muddy middle, an artifact of averaging gamma-encoded channels. Interpolating in OKLab instead travels a perceptually straight path: the middle of the journey looks like the middle of the journey. The space toggle renders both on your exact pair; for saturated endpoint pairs the comparison is usually decisive in one glance.
Perceptual evenness and why charts require it
OKLab steps are equal-appearing by construction — step 3 to 4 looks like the same size move as 5 to 6. In an ordered chart scale that property is not aesthetic, it is semantic: equal data increments should produce equal visual increments, or the chart lies. This is the same reasoning behind scientific colormaps like viridis; for full sequential/diverging structures with those guarantees, the Data Visualization Palette Generator builds on this tool’s math.
Composing longer journeys
Two-stop palettes cover most needs; multi-waypoint journeys (blue through white to red, brand-A through neutral to brand-B) chain naturally: run A→B and B→C, drop the duplicated middle stop, concatenate. For text placed over the continuous gradient version, the Gradient Accessibility Checker measures the worst point — the number WCAG actually cares about.
Stops versus interpolation, a subtle distinction
Copying the discrete steps into a CSS gradient as explicit stops is not identical to letting the browser interpolate between the two endpoints — between your stops, the browser still blends in its own default space. For most pairs the difference is invisible; for saturated cross-hue pairs, seven OKLab-computed stops rendered with sRGB in-between blending can reintroduce a whisper of the muddiness the stops avoided. The fix when it matters: either ship the modern interpolation syntax (linear-gradient(in oklab, …)) and let the browser do the whole journey correctly, or increase the stop count until the in-between segments are too short to sag. The generator’s CSS export uses the first strategy; the step list supports the second.
How to use the Gradient Palette Generator
- Pick the start and end colors and the number of steps.
- Choose OKLab (recommended) or sRGB interpolation.
- Copy the discrete steps or the CSS gradient line.
Frequently asked questions
What is a gradient palette as opposed to a gradient?
The discrete version: N fixed stops sampled evenly along the blend, as copyable colors. Charts need it (heat scales, sequential series), as do staged UI states and any design tool that wants swatches rather than a CSS one-liner.
Why does OKLab interpolation matter here?
Straight sRGB blends between saturated hues sag through gray – the notorious muddy middle. OKLab keeps each step's lightness and vividness on an honest path, so step 4 of 7 looks like the middle instead of the swamp. The toggle lets you see the difference on your own pair.
How many steps should a chart color scale have?
Sequential data: 5-9 – beyond that adjacent steps become indistinguishable at chart sizes. The strip preview here is the test: if you cannot tell neighbors apart in the preview, your readers cannot in the wild.
Are the steps perceptually evenly spaced?
In OKLab mode, yes by construction – equal geometric steps in a perceptual space. That property is what makes the output usable as an ordered scale: differences in data map to comparable differences in color.
Can I run the gradient through a third color?
Chain two runs (A→B, then B→C) and concatenate, dropping the duplicate middle stop. For diverging data scales specifically – two hues meeting at a neutral midpoint – the Data Visualization Palette Generator builds the shape directly.
What does the CSS export contain?
A linear-gradient() using interpolation-space syntax (in oklab) with your endpoints, plus the resolved step list as a comment – so browsers that honor the space render it natively and everyone else can fall back to the sampled stops.
Do gradient endpoints need a contrast relationship?
Only if text crosses the gradient – then the weakest point along it is what matters, which is precisely what the Gradient Accessibility Checker measures. For pure decoration, contrast is a taste question, not a WCAG one.
