Color Palette Generator
Color palette generators create harmonious color schemes using color theory. Methods: Complementary (opposite on wheel, high contrast), Analogous (adjacent colors, harmonious), Triadic (3 colors evenly spaced, vibrant), Tetradic (4 colors, 2 pairs), Monochromatic (single hue, varying lightness/saturation). Start with base color, generate variants. Tools consider accessibility (WCAG contrast ratios). Export formats: HEX, RGB, HSL. Use in branding, web design, UI/UX. Popular tools: Coolors, Adobe Color, Material Design palette.
Generate harmonious color palettes with 5 colors using color theory. Choose from complementary, analogous, triadic, split-complementary, and tetradic harmony modes. Lock colors, copy as CSS variables or JSON.
Click any color to copy hex code
Base Color
Color Harmony
Adjacent colors on the wheel
Palette Colors
Tints & Shades
Click a palette swatch above to select, or showing tints/shades for #6366F1
Contrast Checker (WCAG)
Shows contrast ratios for white and black text on each palette color.
Export Palette
:root {
}Color Harmony Tips
- Complementary: High contrast, vibrant — great for calls-to-action
- Analogous: Harmonious, cohesive — perfect for calm, unified designs
- Triadic: Balanced, colorful — ideal for playful, dynamic interfaces
- Split-Comp: Softer contrast than complementary
- Tetradic: Rich variety — use one dominant color for balance
- Monochromatic: Single-hue variations — elegant and clean
- 🔒 Lock colors you like, then regenerate to find new combinations
How to Use
- Enter your value in the input field
- Click the Calculate/Convert button
- Copy the result to your clipboard
Frequently Asked Questions
- What is a color palette generator?
- A color palette generator creates harmonious sets of colors based on color theory. Starting from a base color, it calculates complementary, analogous, triadic, split-complementary, tetradic, or monochromatic palettes — ensuring the colors look great together for web design, branding, or UI projects.
- What are the different color harmony modes?
- Complementary uses colors opposite on the wheel (high contrast). Analogous uses adjacent colors (cohesive feel). Triadic uses three evenly-spaced colors (balanced). Split-complementary uses the base plus two colors adjacent to its complement (softer contrast). Tetradic uses four colors forming a rectangle (rich variety). Monochromatic uses lightness variations of a single hue (elegant).
- What is WCAG contrast and why does it matter?
- WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. 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. Meeting these standards ensures your color choices are accessible to users with visual impairments.
- What are tints and shades?
- Tints are created by adding white to a color (making it lighter), while shades are created by adding black (making it darker). Together they give you a full range of lightness variations for any hue, which is useful for creating depth, hover states, and visual hierarchy in designs.
- How do I export my palette for use in code?
- This tool supports three export formats: CSS custom properties (variables) for vanilla CSS projects, Tailwind CSS config for Tailwind-based projects, and SCSS variables for Sass/SCSS workflows. Click the format you need and copy the generated code directly into your project.
- Can I lock colors while regenerating the palette?
- Yes! Click the lock icon on any color to keep it fixed. When you regenerate or change the harmony mode, locked colors stay in place while unlocked slots get new colors. This is great for iterating toward a palette you love.