Give every color a job.
One brand color. Two themes built in OKLCH, checked for contrast, and exported as code.
How to build a color system
- Start with a color: type a brand hex code, use the color picker, choose a preset, take a color from an image, or import your existing CSS.
- The Studio builds a light theme and a dark theme from it in OKLCH, with roles for canvas, surface, ink, primary, on primary and accent.
- Tune any role in either theme with its color input and see both themes in live previews.
- Check the contrast. Every role pair is tested against WCAG 2 AA, 4.5:1 for text and 3:1 for input borders and focus rings, and the Studio shows how many pairs need work.
- Export the system as CSS variables, light-dark(), Tailwind v4, shadcn/ui or design tokens, or install the theme with one shadcn command.
What you can do
Light and dark from one color
Two matching themes are built from your brand color in OKLCH, so lightness and chroma stay even.
Contrast built in
Role pairs are checked against WCAG 2 AA, and APCA Lc is shown as extra guidance.
Five export formats
CSS variables, a light-dark() block, a Tailwind v4 theme, shadcn/ui variables and DTCG design tokens.
Import your CSS
Bring in an existing stylesheet and start from its brand color instead of starting over.
shadcn/ui ready
The derived shadcn/ui pairs are checked too, and a single command adds the theme to a project.
Save to your workspace
Send the light or dark roles to your workspace to keep them with your other palettes.
Frequently asked questions
What is a color system?
A color system gives each color a job. It defines roles such as canvas, surface, ink and primary in a light and a dark theme, so each color has one purpose and every pairing can be checked for contrast.
How do I create a light and dark theme from one color?
Enter your brand color in the Studio and choose Build color system. It generates both themes in OKLCH, shows them side by side and checks the contrast of every role pair.
Does it work with shadcn/ui and Tailwind v4?
Yes. Export a Tailwind v4 theme with oklch() values, or shadcn/ui variables, or install the theme into a shadcn/ui project with one command.
Which contrast standard does the Studio use?
WCAG 2 AA is the target: 4.5:1 for text and 3:1 for input borders and focus rings. APCA Lc is shown as extra guidance. These checks do not certify a whole interface, so still test your finished design.
Can I start from an existing site or an image?
Yes. Import your CSS, start from an image with the image color picker, or read a website with the website colors tool and open the result in the Studio.