One color in. A whole theme out.
Type one brand color. Get 20 named tokens, light & dark, contrast-checked — copy the code straight into your project. Free, no sign-up.
Free · No sign-up · Runs in your browser
Brand theme engine
Palette tools stop at five swatches. We don't.
Type one brand color and get 20 semantic colors, light & dark themes, 24 WCAG readability checks and code ready to paste into your project. Three minutes from swatch to shipping.
Every color has a job
Fix, don't guess
See it on a real page
Free where it matters
All tools
Every one works instantly — only AI colors need a free sign-in.
Generator
↗Palettes
↗Brand colors
↗Image Picker
↗Contrast
↗Color Info
↗Visualizer
↗Tailwind
↗AI Colors
↗Or just play around
Hit Space for a new set. Click a swatch to copy. Like one? Take it to the theme engine.
Your brand color palette, as real code
A brand color palette is more than a row of hex codes — it's the set of colors your product is recognized by, reused across every button, text and surface. ColorwayKit turns yours into a working system: one brand color in, a full light & dark theme out, contrast-checked and export-ready.
Start from one brand color
Paste a hex from your logo or pick a primary hue — the engine builds tints, shades and neutrals around it.
Get semantic tokens
Your palette becomes 20 semantic tokens — background, surface, text, accent — for light and dark mode.
Export as real code
Copy CSS variables, a Tailwind config, or W3C design tokens — ready to paste into your project.
Frequently asked questions
What is ColorwayKit?
ColorwayKit is a free web tool that turns one brand color into a complete light & dark web theme — 20 semantic tokens, contrast-checked and ready to paste into your project.
How do I create a theme from my brand color?
Open the Brand Theme Engine, type one HEX color, and you get a full semantic color system with light/dark previews and export-ready code in about a minute.
Is ColorwayKit free?
Yes — during the public beta every core feature is free: contrast checks, real-page previews and core code exports. No account required.
Does my theme meet WCAG contrast standards?
Every text and background pairing is checked against WCAG 2.1 AA/AAA and APCA, and failing pairs come with a one-click fix that preserves your brand hue.
Do I need an account?
No. Only AI color suggestions need a free account, which includes 3 runs per day.
Which export formats are supported?
CSS variables, Tailwind config, Tokens Studio JSON, W3C DTCG design tokens, an 11-component stylesheet, and a self-contained preview page.
How do I choose brand colors?
Start from what you already have — a logo or guideline hex code works best. Starting from scratch, pick one primary hue you can own, keep it consistent across the 60/30/10 split, and check every text/background pair for contrast. ColorwayKit derives a full palette from your primary color and flags any WCAG 2.1/APCA failures with a one-click fix.
Can I use the generated colors commercially?
Yes — the colors ColorwayKit generates are derived values from your own input, and you can use them in your own commercial projects. Brand colors shown in our brand library are collected from public guidelines for design reference only; trademarks remain the property of their respective owners.