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.

Exports engineers actually paste

Studio targets the hand-off gap between Figma swatches and a repo: Tailwind v4 `@theme` blocks, `:root` CSS variables, and DTCG JSON for Style Dictionary. Because everything stays OKLCH-native until export, you are not rounding through HSL on the way out. Free forever, no account — share URLs are optional client encodings.

Need a compact duo/trio first? Start in Color pairs, then open the result here for ramps. Prefer browsing? Pull a starter from Explore and lock the roles you like.

Studio versus palette generators with paywalls

Many popular generators gate exports, cloud saves, or contrast behind a plan. Colorise Pro Studio keeps core OKLCH systems, live contrast, and token export free in the browser. Read the honest comparison with Coolors and Adobe Color when you are choosing a daily driver.

Using Studio well: from one brand colour to a checked palette

What Studio does, and what it leaves to you

Studio is a row of colour columns. You start from the default set, from a share link, or from a brand seed, and you can hold between two and ten colours. Each column can be locked, copied, deleted, dragged into a new order or opened for fine-tuning, and the toolbar adds colours, undoes and redoes, nudges unlocked colours warmer or cooler, and regenerates everything that is not locked (the Space key does the same). Locking is the habit that makes it useful: fix what you are sure of, then iterate on the rest.

It is a palette workbench, not an automatic design system. It will not decide your brand, and it does not check the exact text-on-background pairs your interface will use. The OKLCH picker is the better place to refine a single colour in depth, and the colour pairs navigator is the better place to start if you have no brand colour yet.

Building in OKLCH: lightness, chroma and hue

Opening a column's fine-tune control shows a square plane with lightness on one axis and chroma on the other, plus a separate hue slider. Lightness (L) runs from black to white, chroma (C) is how vivid the colour is, and hue (H) is the angle around the colour wheel. The point of working this way is that the three controls behave independently. Move along the lightness axis and the hue stays where it was; reduce chroma and the colour gets greyer without turning lighter or darker. The guide to converting HEX to OKLCH shows how an ordinary hex code maps onto those three numbers.

A practical consequence is that you can change one property per decision. Want a darker blue for hover states? Lower L. A quieter one for a background? Lower C and raise L. A sibling with the same weight as the brand? Keep L and C and rotate H. The colour library lists named colours with their OKLCH values, and the colour names pages show what a hue is usually called.

Why perceptual lightness gives even scales

In HSL, a lightness value of 50% means something very different for yellow than for blue. OKLCH was designed so that lightness follows what people perceive, which means equal numeric steps look like equal visual steps and different hues at the same L look about equally light. The table below makes it concrete. It starts from the brand blue #2563eb and builds five steps with the same hue, lightness moved in even steps of 0.2, and chroma held at the brand value wherever sRGB can hold it. The darkest and lightest steps cannot reach that chroma, so it tapers there.

Every figure was computed when the page was built from the HEX values. The WCAG columns give the contrast ratio of white text and of black text on each step. The APCA column gives the signed Lc of whichever text colour has the higher WCAG ratio; negative means light text on a dark background. The brand colour itself sits in the awkward middle, where white text clears 4.5:1 only narrowly and black text does not. For more on building ramps this way, read building OKLCH scales.

Five steps built from #2563eb: same hue, OKLCH lightness in even 0.2 steps, computed at build time
StepColourOKLCH LCH°White textBlack textBest textAPCA Lc (best text)
1#e4eeff0.9470.0252611.17:117.97:1BlackLc +95
2#80abff0.7450.1312632.29:19.19:1BlackLc +59
3#2563eb0.5460.2152635.17:14.06:1WhiteLc -80
4#002b910.3470.17226311.97:11.75:1WhiteLc -100
5#0006280.1470.07326319.87:11.06:1WhiteLc -108

Step 3 is the brand colour itself. WCAG ratios need 4.5:1 for normal text and 3:1 for large text. APCA Lc is signed: negative means light text on a dark background. Check your real text and background pairs in the contrast checker before relying on this table.

Checking text contrast inside Studio

The contrast overlay prints, on each column, a rating and a WCAG contrast ratio for that colour against white. The accessibility button goes a step further: for each unlocked colour that fails AA on both white and the dark slate #0F172A, it moves lightness toward darker or lighter targets until the colour passes against one of them, and it reports how many colours it adjusted. Locked colours are never touched. Treat this as a first pass: it tests a colour against two reference backgrounds, not the combinations you will ship.

The thresholds to hold in mind are WCAG 2.2's: 4.5:1 for normal text, 3:1 for large text and for the visual parts of interface components, and 7:1 for the stricter AAA level. APCA is an alternative method that models perceived contrast with a signed Lc value that depends on which colour is the text. It is a candidate for the WCAG 3 draft and is not a requirement today, so use it as a second opinion and not as a replacement. The contrast checker shows both methods for any pair, and WCAG versus APCA explains where they disagree. Pages in the contrast hub list ready-made results for common pairs.

Gamut limits: sRGB, wide gamut and clipped chroma

OKLCH can describe colours that ordinary sRGB screens cannot show, and some modern displays can show colours beyond sRGB. Studio does not output those. Every colour you set is mapped into sRGB before it is stored, by reducing chroma while keeping lightness and hue, so the HEX you copy is always a real sRGB value. In practice that means a very vivid chroma at an extreme lightness will quietly come back less vivid than you asked for.

If you want to see where that boundary lies for a hue, the picker flags whether a colour sits inside sRGB or would be clipped. The guide on gamut mapping to sRGB explains the difference between clipping channels and reducing chroma, and why the second keeps hue steadier.

Sharing and exporting

The address bar follows your palette. The URL takes the form /studio?colors= followed by the HEX codes without the # and joined by hyphens, for example 2563eb-e4eeff-000628. A link needs at least two colours and reads up to ten. The page also accepts a p parameter in the same format. There is no account: the link is the save file.

The export dialog offers Tailwind v4, CSS OKLCH, Figma DTCG JSON and a React or theme snippet as copyable code. It also has download options for a PDF sheet, a Tailwind file, a CSS file, a 1200 by 630 PNG, an SVG of the swatches, and a copy-link option. For a gradient between two of your colours, use the gradient tool.

A short workflow from brand colour to UI tokens

Start with the colour you cannot change. Enter it as the brand seed, which locks it as the first column and grows a monochromatic set around its hue, or pull one out of a logo with the brand colour tool. Then decide what jobs the set must do: a surface, a text colour, an accent. Adjust lightness on the rest until the steps look even, switch on the contrast overlay, run the accessibility button on whatever is unlocked, preview the colours in the live UI preview, then export.

Before you ship, test the pairs that matter in the contrast checker: body text on the page background, text on buttons, text on cards, and any outline that carries meaning. If a pair fails, change lightness and keep the hue. The dark mode colours guide covers the second theme, and the SaaS landing page page shows a worked set of pairs for a product site. If you want to browse for a starting point, the palette library opens in Studio, and Colorise Pro vs Coolors describes how this workflow differs from a generate-and-lock tool. For a blue like the example, the blue colour family page lists neighbouring shades.

Last reviewed 2026-11-03.

Build systems, then refine

Pair Studio with the OKLCH picker, contrast checker, and Explore archive — or extract a starting set from a photo.

  • OKLCH picker
  • Color pairs
  • Explore palettes
  • Extract from image
  • Contrast checker
  • OKLCH scales guide
  • vs Coolors

Frequently asked questions

What is Colorise Pro Studio?
Studio is a free OKLCH palette system builder — lock roles, explore harmonies, check contrast live, and export Tailwind, CSS, or DTCG tokens.
Can I export Tailwind v4 @theme tokens?
Yes. Studio exports Tailwind-ready @theme blocks plus CSS variables and DTCG JSON from the same OKLCH roles.
Does Studio keep my work private?
Palette work runs in the browser. Share URLs are optional client-side encodings — we do not require accounts for core Studio use.
Studio vs the OKLCH picker — which should I use?
Use the picker to refine one color with gamut feedback. Use Studio when you need a multi-role system — surfaces, ink, accents, ramps — and token exports for a product codebase.
Can I import colors from Explore or Extract?
Yes. Open a palette in Studio from Explore, send an extracted set from the image tool, or paste HEX / share URLs. Locked roles stay fixed while you regenerate the rest.
What export formats does Studio support?
Tailwind @theme blocks, CSS custom properties, DTCG JSON for Style Dictionary pipelines, plus copyable HEX/OKLCH lists for hand-offs.
How do I start Studio from my brand colour?
Open the brand seed control in the toolbar, enter your HEX code and apply it. The seed becomes the first, locked column and Studio grows a monochromatic set around its hue. You can then lock more colours, regenerate the rest with the Space key and fine-tune any column.
Do lightness, chroma and hue really change independently?
In the OKLCH controls, yes: the plane moves lightness and chroma and the slider moves hue, and the other values stay as they were. The one exception is the sRGB limit. If a combination is outside sRGB, Studio reduces chroma until it fits, so the result can be less vivid than requested.
Does the accessibility button guarantee WCAG compliance?
No. It nudges unlocked colours until each passes AA on white or on a dark slate, which is a useful first pass. It does not test your real text and background combinations, and it skips locked colours. Check the pairs you will ship in the contrast checker.
Is APCA required for accessibility?
No. WCAG 2.2 is the current standard, with 4.5:1 for normal text and 3:1 for large text and interface components. APCA is a candidate method for the WCAG 3 draft, so treat its Lc values as an additional check rather than a requirement.
Can Studio use Display P3 or other wide-gamut colours?
No. Colours are mapped into sRGB before they are stored, so copied HEX codes are always valid sRGB values. If a colour is out of range, chroma is reduced while lightness and hue are kept. The picker shows when a colour is outside sRGB.
How do I share or save a Studio palette?
Copy the page URL. It looks like /studio?colors=2563eb-80abff-002b91, with HEX codes joined by hyphens, and it needs at least two colours. There is no account or server-side save, so keep the link. The export dialog also has a copy-link option and file downloads.
Colorise ProOKLCH Engine
ExploreStudioNamesPickerPairs
ExploreStudioNamesPickerPairsContrastExtract
Menu

Product

  • Home
  • Explore
  • Studio
  • Color Names

Tools

  • Picker
  • Color Pairs
  • Contrast
  • Image Extract
  • Gradient Lab
  • Palette Diff
  • Brand from URL

Guides

  • All guides
  • OKLCH vs HSL
  • WCAG vs APCA
  • OKLCH color scales
  • Gamut & sRGB
  • Extract from images
  • HEX to OKLCH
  • Dark mode colors
  • Color meanings

OKLCH Color Studio

Lock roles · Space to iterate · Export tokensor␣ Space
DiffContrast