Set color stops, get an N-step palette interpolated through OKLCH. Perfect for design system scales (50–900).
:root {
--scale-100: #f26b5e;
--scale-200: #f9926c;
--scale-300: #fcb587;
--scale-400: #fdd6ae;
--scale-500: #e1c8ac;
--scale-600: #a7907e;
--scale-700: #6f5c53;
--scale-800: #3a2e2a;
}A gradient palette is a set of discrete colors sampled along a gradient, useful for charts, heat maps and data visualization where a smooth scale must be split into steps.
Choose the gradient's end colors and the number of steps, and the tool samples evenly spaced colors along it in OKLCH so each step is perceptually equal. Sequential palettes (light to dark of one hue) and diverging palettes (two hues through a neutral midpoint) are both supported, with a colorblind-safety check for each.
Charts, maps and dashboards, where a continuous value is shown as color. Sampling a gradient into steps keeps the scale readable and the legend printable.
The tool simulates the three common types of color vision deficiency for each palette and flags steps that become indistinguishable.