Generate beautiful color schemes with harmony modes. Press Space to generate, click hex to copy.
Space GenerateCtrl+Enter GenerateCtrl+Shift+C Copy AllCtrl+L Clear Locks1-5 Lock/Unlock
or press Space
Copied!
Contrast Ratio
-
The quick brown fox jumps over the lazy dog.
Select an export format above.
No saved palettes yet. Click ★ Save Palette to save the current palette.
Frequently Asked Questions
What is a color palette generator?
A color palette generator is a tool that creates harmonious sets of colors for use in design projects. It uses color theory principles like complementary, analogous, triadic, and other harmony rules to produce visually appealing color combinations. You can generate random palettes, lock colors you like, and export the results in formats like CSS variables, SCSS, Tailwind config, JSON, or PNG.
How do color harmony modes work?
Color harmony modes use mathematical relationships on the color wheel to create pleasing combinations. Complementary uses colors opposite each other (180 degrees apart). Analogous uses adjacent colors (30 degrees apart). Triadic uses three evenly-spaced colors (120 degrees apart). Tetradic uses four colors in two complementary pairs. Split-complementary uses a base color plus two colors adjacent to its complement. Monochromatic uses variations of a single hue with different saturation and lightness.
What is WCAG color contrast and why does it matter?
WCAG (Web Content Accessibility Guidelines) color contrast is a standard that ensures text is readable against its background. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum). WCAG AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these standards makes your website accessible to users with visual impairments.
📄 Embed this tool
Add this color palette generator to your own website: