Color

Brand palettes that pass contrast before you ship them.

Start from a brand color, a mood, or both. You get three distinct directions, each with smooth 50–950 scales and matching light and dark themes. Every text and interface pairing is checked against WCAG and adjusted where needed, and you can see every ratio.

Use Accessible Palette Studio See the Pro plan

Credits per run3

Runs in a Pro monthup to 150

Typical timeUnder 30 seconds

Failed runsNever charged

Illustrative sample

Quiet Indigo Direction 1 of 3

Primary

Accent

Body text on page 17.2:1 · AAA

Button label on brand 4.7:1 · AA

Brand color on page 4.5:1 · passes 3:1

What you get

Everything a single run returns.

Three palette directions

Each with a name, rationale, and primary, secondary, accent and neutral colors that suit the brief.

Full 50–950 scales

Smooth, evenly balanced color ramps that display accurately on any screen, with your exact brand color kept on its closest step.

Light and dark roles

Surface, text, border, brand and state roles for both themes, previewed on a live interface sample.

Verified contrast and exports

WCAG ratios for every pair, plus Tailwind v4 @theme, CSS variables and W3C design tokens.

How it works

Three steps from input to result.

Typical run time: under 30 seconds.

Describe the brand
Add a mood, audience or product, and your existing brand color if you have one.
Explore three directions
Get three distinct palettes, each with the reasoning behind its choices.
Ship the system
Copy verified scales and roles as Tailwind, CSS variables or tokens JSON.

Who it’s for

Made for real design work.

Start a new brand. Explore three credible directions in seconds instead of hours of trial and error.
Fix an inaccessible palette. Keep your brand color and get roles that pass AA for text and 3:1 for interface elements.
Add dark mode. Generate a matched dark theme from the same scales.

Good to know

What you provide, and the limits.

A short brand description or mood.
An optional brand color in hex, RGB, HSL or OKLCH.
A harmony preference, and whether to include dark mode.
Contrast is verified with WCAG 2.x ratios. Also test with real content and real users.
Colors are tuned to display accurately on standard screens, so very vivid inputs may come out slightly softer.

Questions

About Accessible Palette Studio.

Will it keep my exact brand color?

Yes. When you supply a brand color, the first direction uses it exactly and places it on the closest step of its scale. Roles that must meet contrast may use a neighbouring step, and the studio shows which.

Why OKLCH?

OKLCH is perceptually uniform: equal lightness steps look equal across hues, so scales stay balanced and contrast is predictable.

Which contrast levels are checked?

Text pairs are checked against WCAG AA (4.5:1) and AAA (7:1), and brand and interface colors against the 3:1 non-text minimum.

Which formats can I export?

Tailwind CSS v4 @theme variables, plain CSS custom properties for light and dark themes, and W3C Design Tokens JSON.

Works well with