Color Palette Generator
Derive harmonious palettes from a base color: complementary, analogous, triadic, split-complementary and monochrome — export CSS variables or Tailwind snippets.
>_ USAGE GUIDE
Pick a base color and the tool derives a harmonious palette using one of five strategies: complementary (opposite on the wheel, strongest contrast), analogous (neighboring hues, soft and unified), triadic (three balanced points, rich yet coordinated), split-complementary (the neighbors of the complement, steadier than pure complementary), and monochrome (one hue at different lightness, the safest). Each strategy renders a complete palette in real time.
- Set the base color: the anchor every other swatch derives from
- Choose a strategy: match it to the mood and contrast your project needs
- Export as code: CSS variables or a Tailwind snippet, ready to paste
Giving a project its color system, finding supporting colors for slides, or building out a brand's auxiliary palette moves from guesswork to color theory. Exported swatches copy as ready-to-paste declarations, so the distance between a decision made here and code running in the project is a single clipboard hop. Computation is local and every change redraws instantly.
>_ FAQ
Q1 · When should each of the five strategies be used?
Monochrome for formal, minimal product UI — hardest to get wrong. Analogous for natural, gentle brand moods such as health and sustainability. Complementary when you need maximum contrast for action buttons and promos. Split-complementary as the popular middle ground — contrast without the shout. Triadic for playful, multi-hue illustration styles and children's products. Decide the tone first, then pick the strategy.
Q2 · After choosing a palette, how do I distribute the colors?
Apply the classic 60-30-10 rule: 60% dominant (backgrounds, large surfaces), 30% secondary (cards, sections), 10% accent (buttons, highlights, icons). Complementary colors usually live in the 10% — accents stay premium precisely because they are rare; when everything is emphasized, nothing is.
Q3 · Why export CSS variables instead of hard-coded values?
CSS variables (--brand: #014DB2) make the palette single-source: rebranding or theme switching changes one definition, and dark mode is built on the same mechanism. The Tailwind export drops straight into the config file and generates utilities like bg-brand. Both formats match mainstream engineering practice, so the palette lands in code with zero translation.
Q4 · Does a generated palette guarantee it will look good?
Color theory guarantees harmony — the hue relationships will not clash — but not taste; lightness and saturation decisions still need a human. The suggested flow: derive the hue framework here, tune lightness and saturation to set hierarchy, then validate against the real interface with the 60-30-10 split. Treat it as a starting point, not a finished verdict.
Q5 · What about accessibility requirements?
Text must meet contrast minimums against its background (WCAG AA is 4.5:1 for body text). After picking a palette, verify the key text-and-background pairs with the Contrast Checker — pale text on light backgrounds is the most common accessibility failure, and color harmony theory does not check for it on its own.