Enter one brand color — get a complete light & dark web theme, ready to code.
Every color gets a name and a job — background, text, border, primary, success/warning/error states — light & dark, each pair contrast-checked, plus a color-blind (CVD) distinguishability report.
Copy CSS, Tailwind, Figma Tokens or DESIGN.md straight into your project, or download the whole pack in one zip. Claude Code, Cursor and other AI coding agents read it live over MCP.
15 export files · Theme CSS / Tailwind config / Tokens JSON / W3C DTCG / DESIGN.md / Components CSS / Preview HTML / WCAG report / SCSS / Figma Variables / Brand asset / Next.js·Vue·HTML guides / README · Plus MCP server & agent skills · Runs in your browser
Brand theme engine
Palette tools usually stop at five swatches — not here. Type one brand color and get semantic colors with names and jobs, light & dark themes, every pair contrast-checked with one-click fixes. Three minutes from swatch to shipping.
Five swatches — and it stops there.
Five swatches are just the start — scale, tokens, dark mode, all shipped.
50–950 shade scale
A full tint-and-shade ramp from your primary
Semantic tokens
Every color named and purposeful
Contrast-checked
WCAG + APCA pair by pair, one-click fix
Light & dark
Light and dark, side by side
All tools
Every tool is free with unlimited use — the AI generator and MCP tokens need a sign-in.
Generator
↗Palettes
↗Brand colors
↗Image Picker
↗Contrast
↗Color Info
↗Visualizer
↗Tailwind
↗AI Colors
↗MCP
↗Skills templates
↗Or just play around
Hit Space for a new set. Click a swatch to copy. Like one? Take it to the theme engine.
Frequently asked questions
What is ColorwayKit?
ColorwayKit is a web color tool that turns one brand color into a complete light & dark web theme — named semantic tokens, contrast-checked and ready to paste into your project. Checks and fixes are free — all 15 export files are in the export panel.
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 — contrast checks, real-page previews and core code exports are currently free.
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 6 runs per day.
Which export formats are supported?
CSS variables, Tailwind config, Tokens Studio JSON, W3C DTCG design tokens, DESIGN.md for AI coding agents, 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.
How ColorwayKit works, and who it is for
ColorwayKit is a brand theme engine that runs entirely in your browser: you bring one color, and it builds the entire theme around it. No design tool, no color theory homework. The sections below explain the whole pipeline — how a single hex becomes accessible light and dark themes, who it serves best, and the published standards the output is checked against.
Start from one color
Bring your brand color — paste a hex, pick from the palette library, or extract one from a screenshot or logo. The engine anchors on that hue and keeps it recognizable through every transformation, so what ships still looks like you.
Get the full system
The engine derives the complete system in the OKLCH perceptual color space: a 50–950 tint-and-shade ramp, neutrals tuned to your hue, and semantic tokens — background, surface, text, primary, secondary, success, warning, danger — mapped for light and dark mode on real UI previews.
Check, fix, export
Every text and background pairing is measured against WCAG 2.1 and APCA, with one-click fixes that preserve your brand hue. When you are happy, export CSS variables, a Tailwind config (v3 or v4), Tokens JSON, DTCG, DESIGN.md, components and previews — or download the full brand pack.
Who it's for
Developers use it to stop hand-rolling color scales — paste your brand hex and copy production-ready tokens straight into the codebase. Designers use it to deliver complete brand specifications, light and dark, with the contrast math already done. Content creators and small teams use it to keep every landing page, deck and social asset on one consistent palette without hiring a designer. If your product has a color and a screen, it is for you.
References & standards
The checks and exports above follow published, independently verifiable standards rather than in-house opinion. The primary sources, if you want to go deeper:
Latest articles
Field notes on turning brand colors into real code.
Colorway vs Palette: What's the Difference (and Which Do You Need)?
A palette is a set of colors; a colorway is one specific way those colors get applied to a product. The difference matters a lot when you hand colors to AI.
2026-10-13
What Is a Colorway in Shoes? Sneaker Colorway Meaning, Explained
In sneakers, a colorway is the specific color and material assignment of one shoe model. Here's what colorway means, where the term came from, and why releases get names.
2026-10-13
"Make It Pop": Why AI-Generated UI Colors Drift (and the Number That Stops It)
"Make it pop" gives an AI agent no measurable target, so colors drift across every generation. Here is the mechanism — and the acceptance criterion that ends it.
2026-10-13