Color Palette Generator
Generate harmonious color palettes using complementary, analogous, triadic, and split schemes. Enter values for instant results with step-by-step formulas.
Formula
Complementary = Base Hue + 180 deg | Triadic = Base Hue +/- 120 deg | Analogous = Base Hue +/- 30 deg
Color harmonies are based on geometric relationships on the color wheel. The hue component of HSL (0-360 degrees) determines the base position, and scheme angles define the positions of additional colors. Saturation and lightness are maintained to keep colors visually balanced.
Worked Examples
Example 1: Brand Color Complementary Palette
Problem: Generate a complementary color scheme from the base color #3B82F6 (blue).
Solution: Base color: #3B82F6 (HSL: 217, 91%, 60%)\nComplement: Hue + 180 = 397 mod 360 = 37 degrees\nComplement HSL: (37, 91%, 60%)\nComplement hex: #F6A93B (orange)\nContrast ratio with white: 3.53:1\nContrast ratio with black: 5.96:1\nBest text color on base: White
Result: Base: #3B82F6 (Blue) | Complement: #F6A93B (Orange) | High contrast pairing
Example 2: Analogous Scheme for Website
Problem: Create an analogous palette from #10B981 (green) for a nature-themed website.
Solution: Base color: #10B981 (HSL: 160, 84%, 39%)\nAnalogous -30: Hue 130 = #10B94D (yellow-green)\nAnalogous +30: Hue 190 = #10A5B9 (teal)\nAll three share warm-cool boundary\nUse green as dominant (60%), teal as secondary (30%),\nyellow-green as accent (10%)
Result: Palette: #10B94D, #10B981, #10A5B9 | Harmonious nature tones
Frequently Asked Questions
What is a color palette and why is it important in design?
A color palette is a curated set of colors that work harmoniously together, serving as the visual foundation for any design project. A well-chosen palette creates visual cohesion, establishes brand identity, guides user attention, and evokes specific emotions. Most design projects use 3-7 colors: a primary brand color, secondary accent colors, and neutral tones for text and backgrounds. Color palettes are essential because they ensure consistency across all design assets including websites, apps, print materials, and marketing content. Without a deliberate palette, designs can feel chaotic and unprofessional, making color selection one of the most impactful design decisions.
How does the complementary color scheme work?
A complementary color scheme uses two colors positioned directly opposite each other on the color wheel, separated by 180 degrees. For example, blue and orange, red and green, or yellow and purple are complementary pairs. This scheme creates maximum visual contrast and vibrant energy, making it effective for call-to-action elements, sports branding, and attention-grabbing designs. The high contrast can be overwhelming if both colors are used equally, so the standard approach is to use one color dominantly (about 70-80% of the design) and the complement as an accent (20-30%). Complementary colors placed side by side make each other appear more vivid due to simultaneous contrast, a phenomenon well-studied in color theory.
What is an analogous color scheme and when should I use it?
An analogous color scheme uses 2-4 colors that sit next to each other on the color wheel, typically spanning 30-60 degrees. Examples include blue, blue-green, and green, or red, red-orange, and orange. This scheme creates harmonious, serene designs because the colors share common hue components and naturally blend together. Analogous palettes are ideal for nature-themed designs, backgrounds, gradients, and projects requiring a calm aesthetic. The main challenge is maintaining sufficient contrast between elements, so combine analogous colors with neutral tones for text and interactive elements. Use one color as dominant, a second as supporting, and the third as an accent to create visual hierarchy within the analogous range.
What is the 60-30-10 rule in color design?
The 60-30-10 rule is a classic interior design and graphic design guideline for distributing colors within a composition. The dominant color occupies 60% of the space (typically backgrounds and large areas), the secondary color fills 30% (headings, sidebars, and supporting elements), and the accent color covers 10% (calls to action, highlights, and small details). This ratio creates visual balance and prevents any single color from overwhelming the design. In web design, the 60% might be your background and body area, 30% could be your navigation and secondary panels, and 10% would be buttons and links. You can apply this rule regardless of which color scheme type you choose.
How does color contrast affect accessibility and WCAG compliance?
WCAG (Web Content Accessibility Guidelines) specifies minimum contrast ratios between text and background colors. Level AA requires at least 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Contrast ratio is calculated using the relative luminance of both colors: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. Light text on dark backgrounds and dark text on light backgrounds both work, but medium-lightness colors on medium backgrounds often fail contrast requirements. Color Palette Generator checks contrast ratios automatically. Approximately 8% of men and 0.5% of women have some form of color vision deficiency, making contrast even more critical than color choice alone.
What is the difference between HSL and HSV color models?
HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are both cylindrical representations of color, but they define saturation and brightness differently. In HSL, lightness ranges from 0% (black) through 50% (pure color) to 100% (white), and saturation controls the intensity of the hue at any lightness level. In HSV, value ranges from 0% (black) to 100% (pure or tinted color), and saturation ranges from 0% (gray) to 100% (vivid color). HSL is more intuitive for web design because adjusting lightness directly creates tints (adding white) and shades (adding black). CSS natively supports HSL notation through hsl() and hsla() functions. HSV is more common in image editing software like Photoshop and is sometimes called HSB (Hue, Saturation, Brightness).