Color Palette Generator

Pick a base color

Use the color picker or type a hex code directly. This is the starting point — all other colors in the palette are derived from it. Click 🎲 to pick a random base color instantly.

Choose a harmony mode

The harmony mode controls how the other colors are chosen relative to the base:

• Complementary — opposite hues, high contrast
• Analogous — neighboring hues, cohesive feel
• Triadic — three evenly spaced hues, vibrant
• Monochromatic — same hue, varying lightness
• Split-complementary — softer version of complementary
• Random — well-spread hues, good for exploration

Lock colors you like

Hover a color card and click the lock icon to freeze that color. Locked colors are kept when you change the base color or harmony mode — useful for iterating around one or two colors you already like. Use Lock All / Unlock All for bulk control. Randomize All clears all locks and picks a fresh random base color.

Copy individual colors

Click anywhere on a color swatch or press Copy Hex on a card to copy that color's hex code to your clipboard.

Export the full palette

Use the export buttons to copy the entire palette in your preferred format:

• CSS Variables — ready to paste into any stylesheet
• Tailwind Config — drop into your tailwind.config
• JSON — for design tokens or custom tooling

Check contrast

Each color card shows its contrast ratio against both white and black text. A ratio of 4.5:1 or higher passes the WCAG AA standard for readable body text — the minimum required for accessible interfaces.