Studio: from a few colors to a complete theme
What Studio generates
Studio takes the handful of colors you care about — a brand primary, an accent, a photo's palette — and builds the working set a real interface needs around them: tint and shade ramps, surface and text neutrals, and semantic tokens (background, surface, border, text, accent) that stay consistent in perceived lightness. Export the result as CSS variables, Tailwind config or DTCG design tokens.
Why the ramps are built in OKLCH
A ramp is only useful if its steps look evenly spaced. In HSL, equal numeric steps bunch up in the darks and jump in the brights, because HSL lightness is not how eyes judge brightness. OKLCH lightness is perceptual, so a 10-step ramp built on equal L intervals reads as a smooth ladder, and every hue in the theme can share the same L values so a blue button and a green button carry the same visual weight. The OKLCH scales guide shows the method in detail.
A typical workflow
Start from a brand color in the picker or a palette from an image, generate the theme, then verify the pairs you will actually ship — body text on background, accent on surface — in the contrast checker. If a pair fails, adjust lightness here rather than swapping hues: in OKLCH the fix rarely disturbs the rest of the system. Existing palette collections in the library can be opened in Studio the same way when you want tokens for a palette you found rather than built.