Ramp from one color
Start with one color, such as a brand color. You get a full ramp of light and dark steps shaped like a design system you already trust, and an estimate of how close each step is to what that system's designers would have picked. You can also import your own palette.
- Your color
- More vivid than the palette goes
- Lighter or darker than its neighbors, so extrapolated
- Text color that passes, with its contrast
In the family
Text contrast
The lightest or darkest step of this ramp that passes on each background. WCAG 2: 4.5:1 for body text, 3:1 for large text and icons.
Export
How it works
Each reference palette is treated as a shape. Its ramps are wrapped around a surface in Oklab, a color space where equal distances look about equally different. Your color is placed on that surface by its hue, lightness and colorfulness. The new ramp follows the surface: the same lightness steps, and the same rise and fall in colorfulness, as the palette's own ramps at that hue.
Stays exact puts your color into the ramp unchanged, on the step closest to its lightness. Fits the palette tones a color down if it is more vivid than the palette ever goes at that hue, so the ramp matches its siblings.
Your own palette. Choose Import your palette in the Shape it like menu, then paste or upload your color tokens. It needs at least four color ramps that share the same step names. The page checks them, runs the same hold-out test on them, and keeps the palette in this browser only.
The estimate comes from a hold-out test. Each of the palette's own ramps was hidden, rebuilt from its neighbors and compared with the real one. Differences are in ΔE OK ×100, where 2 is about the smallest difference most people notice. It covers ramps that stay within the palette's colorfulness, so it says less about steps marked ↑.
For a deeper look at a palette's shape, open Palette topology. This page was prompted by dittoTones by David Aerne, which builds ramps from one color by matching the closest ramps in a reference system.