Desaturated palettes for editorial and grown-up brand work.
Start by picking the palette that best matches the visual brief, then assign roles before you ship anything to production. The lightest swatch typically becomes the page background; the darkest becomes body text or a primary brand mark; mid-tones become borders, secondary buttons and supporting illustration. Test every text-on-surface pair in the contrast checker - aim for 4.5:1 (WCAG AA) on body copy and 3:1 on large text.
For richer scales, drop the dominant color into the design system tool to generate a 12-step OKLCH ramp; that gives you tints, shades and hover states that feel uniform across the whole interface. To turn the palette into a gradient, click any palette below and use the “Make a gradient” action - the OKLCH-interpolated output preserves the palette’s mood without the muddy mid-points sRGB gradients are famous for.