The color wheel tool generates harmonious color palettes from a base color by applying geometric relationships on the color wheel. Enter a hex value or drag the wheel to select a base color, choose one of 9 combination modes, and get 2–5 colors with their hex codes and nearest Tailwind CSS names ready to copy.
Choosing a combination mode
The color wheel places all hues in a circle; different geometric relationships produce different visual tension.
Contrast-type palettes
- Complementary — two colors at opposite ends; maximum contrast, good for CTA buttons and focus elements
- Split complementary — one base plus two colors flanking its complement; contrast without the harshness of pure complementary
- Double split complementary — two sets of split pairs, 5 colors total; for complex multi-element layouts
Harmony-type palettes
- Analogous — 3–5 adjacent hues; soft natural transitions, good for backgrounds and gradients
- Monochromatic — same hue at different lightness and saturation levels; minimal, unified feel
- Compound — an extended complementary variant with more hue layers
Balanced multi-color options: Triad (3 equidistant colors), Tetradic (4-color rectangle), and Square (4 equidistant colors) work for brand visuals, infographics, and data visualization where variety is needed without clashing.
Primary–secondary–accent balance
Multi-color palettes work best when colors have clear roles. A common approach: primary color covers 60% of the surface area (large backgrounds, main content), secondary 30% (cards, sidebars, secondary elements), accent 10% (buttons, badges, call-to-action). Applying all colors at equal weight creates visual noise. The accent color is usually the high-saturation color from a contrast-type palette.
Adjusting the generated palette before use
The wheel generates theoretical base colors. In practice, you'll typically need to adjust lightness (make backgrounds lighter, text darker) and saturation (keep brand hues vivid, reduce saturation for neutral areas). Treat the generated palette as a starting point, not a final answer.
Copying colors to design tools
Click any color swatch in the generated palette to copy its hex code. Paste directly into Figma, Sketch, or Adobe XD color pickers. The Tailwind class names shown (like rose-400, sky-600) let you find the closest Tailwind built-in color if you prefer not to use arbitrary values in your project.