Color Palette Generator
Generate accessible color palettes from a base hue and harmony rule
Your palette — click a swatch to copy its hex code
Harmony Rule
Export
CSS Variables
:root {
--color-1: #468ce5;
--color-2: #4665e5;
--color-3: #4f46e5;
--color-4: #7746e5;
--color-5: #9f46e5;
}Tailwind Config
colors: {
palette: {
100: '#468ce5',
200: '#4665e5',
300: '#4f46e5',
400: '#7746e5',
500: '#9f46e5',
},
},How it works
Pick a base color and a harmony rule, and this tool generates a five-color palette using HSL color math -- complementary hues sit 180° apart on the color wheel, triadic hues 120° apart, and so on. Each swatch shows its WCAG contrast ratio against white (W) and black (B) text, with an AAA / AA / Fail badge so you can choose accessible combinations. Everything runs entirely in your browser; no colors or data are sent to any server.
Free Color Palette Generator
This free color palette generator builds a harmonious five-color scheme from any base color in seconds. Pick a starting color with the color picker, type a hex code, or drag the hue slider, then choose a harmony rule to instantly generate a palette you can use for websites, apps, branding, presentations, or print. Every calculation runs locally in your browser, so your colors stay private and the tool works instantly with no sign-up.
How Color Harmony Rules Work
Color harmony rules are formulas based on the position of hues around the color wheel. They take the guesswork out of combining colors by using relationships that have been proven to feel balanced to the human eye.
- Complementary — pairs your base color with the hue directly opposite it (180° away). This creates the strongest possible contrast and works well for calls to action and accents.
- Analogous — uses neighboring hues within about 30° of the base. The result is calm and cohesive, ideal for backgrounds and content-heavy designs.
- Triadic — spaces three hues evenly at 120° intervals, producing vibrant palettes that stay balanced even when colors are bold.
- Split-complementary — softens the complementary rule by using the two hues adjacent to the direct opposite, keeping contrast high while reducing visual tension.
- Tetradic — places four hues 90° apart for rich, varied palettes; it works best when one color clearly dominates.
- Monochromatic — keeps a single hue and varies its lightness, producing elegant, low-risk palettes that always feel unified.
Accessibility-Aware Palette Choices
A beautiful palette is only useful if people can actually read the text placed on it. That is why every swatch in this generator displays its WCAG contrast ratio against both white and black text, along with an AAA, AA, or Fail badge. The Web Content Accessibility Guidelines recommend a minimum contrast ratio of 4.5:1 (AA) for normal text and 7:1 (AAA) for stronger accessibility. Checking contrast while you design — rather than after — saves rework and makes your product usable for people with low vision or color vision deficiencies.
Tips for Choosing Accessible Colors
- Reserve your highest-contrast swatches for body text and primary buttons.
- Use mid-lightness colors for decorative elements where text never appears.
- Never rely on color alone to convey meaning; pair it with icons or labels.
Export Your Palette to Code
Once you are happy with a palette, export it with one click as CSS custom properties or as a Tailwind CSS config snippet. The CSS variables drop straight into your :root block, while the Tailwind object slots into your theme colors, so the palette you designed here becomes the palette your project actually ships with. You can also click any individual swatch to copy its hex code directly to your clipboard.
Embed
Add this tool to your site
Free to embed anywhere — paste this snippet into your HTML and the tool appears right on your page.
It resizes itself automatically. Add data-theme="dark" or data-theme="auto" to match your site.
<script async src="https://whatsmytools.com/embed.js" data-tool="palette-generator"></script>More tools
You might also like
FAQ