Free design system tool
Color Wheel & Palette Generator
This color wheel and palette generator builds a UI palette from one base color using complementary, analogous, triadic or tetradic harmony. It shows the palette on a sample card, checks the button text contrast, and exports CSS variables, a Tailwind config, token JSON or SwiftUI colors.
Updated
:root {
--color-primary-base: #337feb; /* hsl(215, 82%, 56%) - Primary */
--color-triadic-secondary: #eb337f; /* hsl(335, 82%, 56%) - Secondary */
--color-triadic-accent: #7feb33; /* hsl(95, 82%, 56%) - Accent */
--color-neutral-dark: #1f252e; /* hsl(215, 20%, 15%) - Text Dark */
}How to use the Color Wheel & Palette Generator
- 1
Pick a base color
Drag hue, saturation and lightness, or start from a preset.
- 2
Choose a harmony
Complementary, analogous, triadic or tetradic. Each picks partner colors at fixed angles on the wheel.
- 3
Check the preview
Look at the sample card and the contrast ratio for white text on the primary button.
- 4
Export
Pick CSS variables, Tailwind, token JSON or SwiftUI and press Copy code.
Formats and limits
| Harmonies | Complementary, analogous, triadic, tetradic |
|---|---|
| Outputs | CSS custom properties, tailwind.config.js colors, DTCG-style token JSON, SwiftUI Color extension |
| Contrast check | WCAG contrast ratio for white text on the primary color |
| Cost and sign-up | Free, no account |
Other tools that do this
We make ExodeUI, which publishes this tool. Here is how it compares, and when another tool is the better pick:
| Tool | Pick it for | What to know |
|---|---|---|
| Color Wheel & Palette Generator (this page) | A UI palette exported straight to CSS, Tailwind, token JSON or SwiftUI | Free, no account, runs in your browser. |
| Coolors | Fast palette exploration and browsing other palettes | Palette generator, contrast checker, Tailwind colors, an iOS app and a Figma plugin. Paid Pro plan available. |
| Adobe Color | Color wheel harmonies and palettes from images | Color wheel, palette from image, contrast checker and color blindness simulator. |
Frequently asked questions
What is a color wheel used for in UI design?
A color wheel arranges hues in a circle so you can pick colors that work together. In UI design it helps you choose an accent and supporting colors that stay readable and consistent.
How do color harmonies work?
They are angles on the 360-degree wheel. Complementary is 180 degrees apart, analogous is neighbours about 30 degrees apart, triadic is three colors 120 degrees apart, and tetradic is two complementary pairs.
What contrast ratio do I need for text?
WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). The tool shows the ratio for white text on your primary color.
Can I export the palette to Tailwind?
Yes. The Tailwind tab gives a theme.extend.colors block you can paste into tailwind.config.js.