Color Palette Generator
Generate beautiful color schemes with harmony modes, contrast checking, and color blindness simulation. Press Space to generate.
Color Blindness Preview
Contrast Checker
Select two colors from the palette to check WCAG compliance.
Export Palette
What is a Color Palette Generator?
A color palette generator is a design tool that creates sets of harmonious colors based on color theory principles. Whether you're designing a website, building a brand identity, or creating illustrations, a good color scheme is essential for visual coherence and emotional impact. This tool generates 5-color palettes using mathematically precise harmony rules on the HSL color wheel.
Understanding Color Harmony
Color harmony describes combinations of colors that are visually pleasing. The main harmony types are based on geometric relationships on the color wheel:
- Complementary: Two colors opposite each other on the wheel (180° apart). Creates high contrast and vibrant energy. Best for call-to-action elements and bold designs.
- Analogous: Colors adjacent on the wheel (typically 30° apart). Creates serene, comfortable designs. Common in nature-inspired and editorial layouts.
- Triadic: Three colors evenly spaced at 120° intervals. Offers strong visual contrast while retaining balance. Works well for playful, energetic designs.
- Split-Complementary: A base color plus two colors adjacent to its complement. Provides contrast similar to complementary but with less tension.
- Monochromatic: Variations of a single hue with different saturation and lightness. Creates elegant, unified designs with subtle depth.
Color Accessibility & WCAG Compliance
The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios to ensure text is readable by people with low vision. AA compliance requires a 4.5:1 ratio for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA requires 7:1 and 4.5:1 respectively. Use the built-in contrast checker to verify your palette meets these standards before shipping your design.
Color Blindness & Inclusive Design
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. The three most common types are deuteranopia (green-blind), protanopia (red-blind), and tritanopia (blue-blind). The color blindness preview in this tool simulates how your palette appears to people with each condition, helping you choose colors that communicate effectively for everyone.
Frequently Asked Questions
What is a color palette generator?
A color palette generator is a design tool that creates harmonious sets of colors for use in websites, apps, branding, and graphic design. It uses color theory rules like complementary, analogous, and triadic relationships to produce palettes that look great together.
How do color harmony modes work?
Color harmony modes use mathematical relationships on the color wheel. Complementary uses colors opposite each other (180°), analogous uses adjacent colors (30° apart), triadic uses three evenly spaced colors (120° apart), split-complementary uses a color and two colors adjacent to its complement, and monochromatic uses variations of a single hue.
What is WCAG contrast compliance?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for text readability. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. The contrast checker in this tool tests any two colors against these standards.
How does color blindness simulation work?
Color blindness simulation applies mathematical color transforms to approximate how people with different types of color vision deficiency perceive colors. Deuteranopia and protanopia affect red-green perception, while tritanopia affects blue-yellow perception.
Can I export my color palette?
Yes. You can export your palette as CSS custom properties (variables), a Tailwind CSS config object, or download it as a PNG image. Click any individual color swatch to copy its hex, RGB, or HSL value to your clipboard.
How do I lock colors in a palette?
Click the lock icon on any color swatch to lock it. When you regenerate the palette, locked colors stay fixed while unlocked colors are randomized or regenerated based on the current harmony mode.
Is this color picker tool free to use?
Yes, this color palette generator is completely free. It runs entirely in your browser with no sign-up required. All color generation, contrast checking, and exports happen client-side — no data is sent to any server.
Related Tools
- Regex Tester — Test and debug regular expressions online with real-time highlighting.