Color Palette Generator
Generate 5-color palettes with 5 harmony modes. Copy HEX, RGB, or HSL values. Lock colors you love. Press Space to instantly refresh.
Features
5 Harmony Modes
Random, Complementary, Analogous, Triadic, Monochromatic
Lock Colors
Lock favorites and regenerate only the rest
One-Click Copy
Copy HEX, RGB, HSL or CSS variables instantly
FAQ
What is color harmony?
Color harmony uses geometric relationships on the color wheel — complementary (opposite), analogous (adjacent), triadic (120° apart), or monochromatic (same hue, different lightness).
How do I quickly regenerate?
Press the spacebar to instantly generate a new palette — no clicking needed. Or use the "Generate New Palette" button.
How do I export as CSS?
Click "Copy as CSS" to copy all 5 colors as CSS custom properties (--color-1 through --color-5) ready to paste into your stylesheet.
Color Theory and Palette Design
Color theory, the difference between HEX, RGB, and HSL, and professional color palette design explained.
Color Model Basics
There are multiple ways to represent colors in computers. HEX (#FF5733), RGB (255, 87, 51), and HSL (Hue/Saturation/Lightness) all represent the same color differently. Web design mainly uses HEX and RGB, while HSL is more intuitive for animations and color generators.
Color Theory Fundamentals
- Complementary: Opposite colors on the wheel. High contrast, attention-grabbing
- Analogous: Adjacent colors. Natural and harmonious impression
- Triadic: 3 equidistant colors. Balanced with variety
- Monochromatic: Shades of one color. Elegant and minimal
Accessibility and Color Contrast
WCAG 2.1 accessibility standards require a minimum contrast ratio of 4.5:1 (AA standard) between text and background. About 8% of the population has color vision deficiency. Never convey information through color alone — always combine with icons or patterns.
Color Format Conversion
#FF0000hsl(0,100%,50%)#00C851hsl(145,100%,39%)#007BFFhsl(211,100%,50%)#FFD700hsl(51,100%,50%)#6F42C1hsl(263,49%,51%)Professional Color Palette Design
Excellent UI design requires a consistent color system. The foundation is one primary color, 1-2 secondary colors, neutral colors (grayscale), and semantic colors for error, success, and warning states.
Popular Color Palette Examples
- Tailwind CSS: 10-step scale from 50-950. Practical design system
- Material Design: By Google. Simple primary + accent color structure
- IBM Carbon: Enterprise-focused. Strict system emphasizing accessibility
- Open Color: Open source. Vibrant and uniform color families
Colors and Psychological Effects