Cool Color Palette Generator
Generate trendy, modern color palettes with monochromatic, analogous, and complementary harmony modes. Lock colors, adjust saturation and brightness, export to multiple formats, and check accessibility compliance.
Starting Color
Palette Settings
Generate a palette using variations of a single hue with different lightness values.
Generated Palette
Accessibility Checker
Contrast ratios between palette colors. WCAG AA requires 4.5:1 for normal text, 3:1 for large text.
| Color 1 | Color 2 | Ratio | WCAG AA |
|---|
Export Palette
Recommended Settings
Best Practices
- •Use monochromatic mode for subtle, cohesive designs
- •Lock your brand colors and regenerate to explore variations
- •Check accessibility before finalizing your palette
- •Export to CSS variables for easy integration with your project
Optimization
- •Adjust saturation and brightness to fine-tune your palette
- •Use preset styles for quick, professional results
- •Test your palette with the accessibility checker before use
Pro Tips
- •Pastel presets work great for backgrounds and soft UIs
- •Vibrant presets are perfect for call-to-action elements
- •Complementary mode creates high-contrast, dynamic palettes
- •Use the accessibility checker to ensure WCAG compliance
- •Lock multiple colors to maintain specific brand elements
Most Popular
5-color monochromatic palette with +10% saturation adjustment
When to Use This Tool
Generate a complete color palette for your design system with primary, secondary, and accent colors using complementary mode.
Start with your brand color and use monochromatic mode to create a full range of tints and shades for consistent branding.
Create accessible color combinations for buttons, backgrounds, and text with built-in WCAG contrast checking.
Export directly to CSS or SCSS variables for seamless integration into your web projects.
How It Works
Select a base color using the color picker, RGB/HSL sliders, or randomize
Choose generation mode: monochromatic, analogous, or complementary
Customize size, saturation, brightness, and apply preset styles
Lock colors you want to keep and regenerate the rest
Check contrast ratios for WCAG AA/AAA compliance
Export to JSON, CSS, SCSS, SVG, PNG or copy all HEX codes
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Color theory algorithms with HSL color space manipulation for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What's the difference between the three generation modes?
Monochromatic uses variations of a single hue (different lightness), Analogous uses adjacent colors on the color wheel (±30°), and Complementary uses opposite colors (180° apart) for high-contrast palettes.
How does the lock feature work?
Click the lock icon on any color swatch to preserve it. When you regenerate, locked colors stay the same while unlocked colors are regenerated. Use 'Regenerate All' to ignore locks and regenerate everything.
What do the preset styles do?
Pastel creates soft, high-lightness colors; Vibrant creates bold, highly saturated colors; Muted creates subtle, low-saturation colors; Neon creates maximum saturation with high lightness for glowing effects.
What contrast ratio do I need for accessibility?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. The accessibility checker shows all ratios automatically.
Can I use these palettes for commercial projects?
Yes! All generated palettes are yours to use however you like, including commercial projects. Colors cannot be copyrighted, so you're free to use any palette you create.
Related Tools
Accessibility Color Checker
Check color accessibility compliance
Color Converter
Convert between color formats
Color Mixer
Mix colors together
Color Palette from Image
Extract colors from images
Color Tint Generator
Generate color tints
Contrast Checker
Check color contrast