Loading...
Create Beautiful Color Palettes with Harmony Rules
A powerful tool for generating harmonious color palettes using color theory principles. Generate complementary, triadic, analogous, monochromatic, and other color harmony schemes with instant preview and export options.
The Color Palette Generator helps you create visually appealing color combinations based on color theory principles. Whether you're designing a website, creating a brand identity, or working on a UI project, this tool provides instant access to harmonious color schemes.
The base color is the foundation of your palette. All harmony rules use this color as the starting point to generate complementary colors. You can set the base color in two ways:
Click the color swatch to open the native color picker. Drag the picker to select your desired hue, then adjust saturation and lightness.
Enter a HEX color code directly (e.g., #3B82F6). The input validates the format and updates the color picker accordingly.
Click the refresh icon to generate a random base color. Great for inspiration or when you need a starting point.
Color harmony is the arrangement of colors that create a pleasing visual effect. The tool supports six different harmony types based on color wheel relationships:
Colors directly opposite on the color wheel (180° apart). Creates high contrast and visual tension. Great for calls-to-action and accents.
Three colors evenly spaced on the color wheel (120° apart). Offers vibrant contrast while maintaining harmony. Balanced and colorful.
Colors adjacent on the color wheel (30° apart). Creates a harmonious, serene design with less contrast. Great for backgrounds and natural themes.
Different shades and tints of a single color. Creates a clean, cohesive look. Easy to implement and always visually harmonious.
Four colors forming two complementary pairs (90° intervals). Rich and complex palettes. Requires careful balance to avoid overwhelming the design.
A base color plus two colors adjacent to its complement. Provides strong visual contrast with less tension than complementary. Versatile and popular.
Not sure where to start? Click "Random Palette" to generate a completely random color scheme. Great for inspiration or when you need unexpected combinations.
Control how many colors appear in your palette using the color count dropdown. Available options are 3, 4, 5, 6, and 8 colors. The tool distributes colors evenly based on the selected harmony type.
Minimal palettes for icons, badges, small UI elements
Good for primary actions, secondary actions, accents, backgrounds
Standard palette for most web applications
Extended palettes for complex design systems
Full spectrum for comprehensive color systems
Once you've generated a palette, each color displays with comprehensive information and convenient actions:
Click any color swatch or the "Copy HEX" button to copy the color value to your clipboard. A toast notification confirms the copy.
The palette preview bar at the bottom shows all colors in sequence. Click any color to copy it.
Export your generated palette in formats ready for immediate use in your projects:
Downloads a .css file containing CSS custom properties (variables):
Downloads a .json file with an array of color values:
The Advanced Features panel provides three powerful tabs for deeper color analysis and visualization:
Visualize your palette applied to common design templates:
Landing page layout
Phone screen layout
Admin panel layout
Shows the contrast ratio between each color and white text, plus the reverse color from the palette. Includes WCAG accessibility ratings: AAA (7:1+), AA (4.5:1+), AA Large (3:1+), or Fail.
A complete matrix showing contrast ratios between every color combination in your palette. Perfect for identifying accessible foreground/background pairings for your design.
The tool calculates contrast ratios using the WCAG (Web Content Accessibility Guidelines) relative luminance formula. This ensures your color choices meet accessibility standards for text readability.
| Rating | Min Ratio | Use Case |
|---|---|---|
| AAA | 7:1 | Enhanced accessibility for all text |
| AA | 4.5:1 | Standard requirement for normal text |
| AA Large | 3:1 | Large text (18pt+) or UI components |
| Fail | 3:1 | Insufficient contrast - avoid |
When using your generated palette, follow these accessibility best practices:
Ensure at least 4.5:1 contrast ratio for body text and 3:1 for large text (18pt+). Use the contrast analysis tab to verify combinations.
Buttons, links, and form controls need 3:1 minimum contrast against their background. Focus states should be even more distinct.
Don't use color alone to convey information. Provide icons, text, or patterns alongside color for colorblind users.
Test your final design with colorblind simulation tools and screen readers. The combination matrix helps identify accessible pairings.
Generate primary, secondary, and accent colors for websites. Export as CSS variables for easy integration with Tailwind or custom CSS.
Create cohesive color schemes for logos, business cards, and marketing materials. Monochromatic and analogous harmonies work well.
Build comprehensive color systems with proper contrast ratios. Use the matrix to ensure accessible component combinations.
Generate distinct colors for charts and graphs. Triadic and tetradic harmonies provide good color separation for data categories.