Color Palette Generator Guide — Color Theory & Harmony Calculator

By Michael Lip · May 16, 2026 · 15 min read · Try the Generator

Creating a color palette that looks professional, feels cohesive, and meets accessibility standards is one of the most impactful design decisions you will make. Whether you are designing a SaaS dashboard, an e-commerce storefront, or a portfolio site, the colors you choose influence user trust, readability, conversion rates, and brand recognition.

This guide covers everything from color theory fundamentals to practical tools you can use right now. Scroll down to use the interactive color harmony calculator and WCAG contrast checker, or read through each section for a thorough understanding of how professional designers build palettes.

1. Color Theory Fundamentals

Every color you see on screen can be described using three properties: hue, saturation, and lightness (HSL). Understanding these three dimensions is the foundation of building any color palette generator or choosing colors for your website.

Hue: The Color Wheel Position

Hue is the pure color itself, measured in degrees around the color wheel from 0 to 360. Red sits at 0 degrees (and 360), yellow at 60, green at 120, cyan at 180, blue at 240, and magenta at 300. When you use a color palette generator, the harmony algorithms work by calculating specific angular relationships between hues on this wheel.

Saturation: Color Intensity

Saturation controls how vivid or muted a color appears, expressed as a percentage from 0% (grayscale) to 100% (fully saturated). A crimson red at 100% saturation commands attention; at 30% saturation it becomes a dusty rose. In web design, you will typically use high saturation (70-100%) for accent colors and CTAs, medium saturation (40-60%) for supporting elements, and low saturation (10-30%) for backgrounds and large surfaces to avoid visual fatigue.

Lightness: Light and Dark

Lightness determines how close a color is to white or black, also expressed as a percentage. At 0% lightness every hue becomes black; at 100% every hue becomes white; and at 50% you see the purest version of the hue. When building a palette, varying lightness is how you create tints (adding white) and shades (adding black) of a single hue, which is the basis of monochromatic palettes.

RGB vs HSL: Which Model to Use

RGB (Red, Green, Blue) is the native color model for screens, defining colors as additive mixtures of three light channels from 0-255. HSL (Hue, Saturation, Lightness) is a cylindrical-coordinate representation that maps more intuitively to how humans perceive color. For palette creation, HSL is overwhelmingly preferred because adjusting a single property (rotating hue, or tweaking saturation) produces predictable, harmonious results. The gen8x color palette generator uses HSL internally for all harmony calculations, then converts to hex and RGB for output.

2. Seven Color Harmony Types Explained

Color harmonies are mathematical relationships between hues on the color wheel. A color palette generator applies these rules to produce sets of colors that are inherently pleasing. Here are the seven primary harmony types, each with its angle formula, visual character, and best use cases.

Complementary (180 degrees)

Complementary colors sit directly opposite each other on the wheel. Blue and orange, red and green, purple and yellow. This pairing creates maximum contrast and visual energy. Use complementary palettes when you need a single accent color that pops against a dominant background. The risk is visual tension if both colors are used at equal weight; apply the 60-30-10 rule to keep it balanced.

Analogous (30 degrees apart)

Analogous harmonies use colors that are neighbors on the wheel, typically spanning 30-60 degrees. They create serene, comfortable designs because the colors share underlying hues. Nature is full of analogous palettes: autumn leaves (red-orange-yellow), ocean scenes (blue-teal-green). These work exceptionally well for brands that want to project calm, trustworthiness, or organic warmth.

Triadic (120 degrees apart)

Triadic palettes use three colors equally spaced at 120-degree intervals. Red, green, blue is the classic triadic set. These palettes are vibrant and balanced, offering diversity without the harsh contrast of complementary pairs. Triadic schemes are popular for children's brands, creative agencies, and applications that need to categorize three distinct data types or sections.

Split-Complementary (150 and 210 degrees)

Instead of taking the direct complement, split-complementary uses the two colors flanking the complement (30 degrees to each side). This gives you the visual interest of complementary contrast but with more nuance and less risk of clashing. It is often recommended as the best starting point for designers new to color theory because it is forgiving yet visually rich.

Tetradic / Rectangle (60, 180, 240 degrees)

Tetradic harmonies use four colors arranged in two complementary pairs, forming a rectangle on the color wheel. This is the richest of all harmonies but also the hardest to balance. The key is letting one color dominate and using the other three as accents. Tetradic palettes work well for complex UIs with many distinct sections, dashboards, or data visualization where you need four clearly distinct categories.

Square (90 degrees apart)

Square harmony is a special case of tetradic where all four colors are evenly spaced at 90 degrees. This produces the most uniformly diverse palette possible with four colors. Like tetradic, it requires careful attention to dominance hierarchies. Square palettes are excellent for infographics, categorical data displays, and brand systems that need maximum differentiation between color-coded elements.

Monochromatic (single hue, varying S/L)

Monochromatic palettes use a single hue with variations in saturation and lightness. This is the safest, most cohesive approach and impossible to get wrong. Monochromatic designs feel polished and minimal. The trade-off is lower contrast between elements, which can make it harder to establish clear visual hierarchy. Pair a monochromatic palette with a single contrasting accent color for the best of both worlds.

3. Interactive Color Harmony Calculator

Enter a base color using the hex input or color picker below, select a harmony type, and the calculator will generate your palette instantly. Click any swatch to copy its hex value. Use the "Copy CSS" button to grab the full set as CSS custom properties.

4. WCAG Contrast Checker

Enter a foreground (text) color and background color to check whether they meet WCAG 2.1 contrast requirements. The tool calculates the precise contrast ratio and reports pass/fail for AA and AAA standards at both normal and large text sizes.

5. Accessibility & Contrast Requirements (WCAG 2.1)

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure text is readable for users with low vision or color deficiencies. Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, which means accessible color choices directly impact a significant portion of your audience.

Minimum Contrast Ratios

• AA Normal Text: 4.5:1 minimum contrast ratio. Applies to body text under 18pt (24px) or under 14pt (18.66px) bold.
• AA Large Text: 3:1 minimum. Applies to text 18pt+ or 14pt+ bold.
• AAA Normal Text: 7:1 minimum. This is the enhanced standard, required for critical content like legal text, medical instructions, or government sites.
• AAA Large Text: 4.5:1 minimum for large text under the enhanced standard.
• Non-text UI Components: 3:1 minimum for active UI components (buttons, form inputs, icons) and graphical objects needed to understand content.

The Contrast Ratio Formula

Contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance uses linearized sRGB values: L = 0.2126R + 0.7152G + 0.0722B, where each channel is linearized from its gamma-encoded sRGB value.

Common Mistakes

• Light gray text on white: #999 on #FFF yields only 2.85:1, failing AA. Use #595959 or darker for AA compliance.
• Colored text on colored backgrounds: Blue on purple or green on teal may look distinct to you but often fail contrast checks and are worse for colorblind users.
• Relying solely on color: Never use color as the only indicator of meaning. Links should have underlines, error states should have icons, chart data should have patterns or labels.
• Forgetting hover/focus states: Interactive element state changes must also maintain minimum contrast ratios.

Testing Recommendations

Beyond contrast ratios, test your palette with colorblind simulation tools. The three most common types of color vision deficiency are protanopia (red-blind, ~1% of males), deuteranopia (green-blind, ~1% of males), and tritanopia (blue-blind, very rare). Avoid red/green as the sole differentiator in any interface. Use the gen8x contrast checker tool for quick compliance verification.

6. Industry-Specific Color Palettes

Different industries have established color conventions that influence user expectations. Using colors that align with industry norms builds instant credibility, while breaking conventions can signal innovation, depending on context.

7. Dark Mode Color Considerations

Dark mode has evolved from a niche preference to a standard expectation. As of 2026, over 80% of smartphone users enable dark mode, and many web applications ship with it as the default. Building an effective dark mode palette requires more than inverting colors; it demands careful recalibration of your entire color system.

Surface Colors: Avoid Pure Black

Pure black (#000000) backgrounds cause excessive contrast against white text, producing visual vibration and eye strain, especially on OLED screens. Google Material Design recommends #121212 as the base surface color. Build elevation hierarchy using progressively lighter grays: #121212 for the background, #1E1E1E for cards, #252525 for elevated surfaces, and #2C2C2C for dialogs or popovers.

Text Colors: Soften Pure White

Pure white (#FFFFFF) text on dark backgrounds creates a halation effect where letters appear to bleed into the background. Use #E0E0E0 (87% opacity white) for primary text, #A0A0A0 for secondary text, and #6B6B6B for disabled or placeholder text. Contrast ratios against #121212 background: #E0E0E0 = 13.2:1 (AAA pass), #A0A0A0 = 7.0:1 (AAA pass), #6B6B6B = 3.7:1 (AA large text only).

Accent Color Adjustments

Highly saturated accent colors that look vibrant on white backgrounds can feel harsh and overpowering in dark mode. Reduce saturation by 10-20% and increase lightness by 5-10% for dark mode variants. For example, a primary blue of hsl(220, 90%, 50%) in light mode might become hsl(220, 75%, 60%) in dark mode. This maintains visual hierarchy without causing eye fatigue.

Semantic Colors in Dark Mode

Success (green), warning (yellow), and error (red) colors need recalibration too. Standard #EF4444 red on a dark background can dominate the visual field; consider using #F87171 (lighter, less saturated) with a subtle background tint of rgba(239, 68, 68, 0.1). The same principle applies to success greens: shift from #16A34A to #4ADE80 in dark mode.

CSS Implementation Pattern

:root {
  --bg: #ffffff;
  --bg-card: #f8fafc;
  --text: #0f172a;
  --text-muted: #64748b;
  --accent: hsl(220, 90%, 50%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --bg-card: #1e1e1e;
    --text: #e0e0e0;
    --text-muted: #a0a0a0;
    --accent: hsl(220, 75%, 60%);
  }
}

8. Color Psychology in Web Design

Color psychology studies how different hues influence human emotion, perception, and behavior. While individual reactions vary by culture and personal experience, decades of research in marketing and cognitive psychology reveal consistent patterns that inform effective web design decisions.

The 60-30-10 Rule

Interior designers have used this proportion rule for decades, and it applies directly to web design. Allocate 60% of your visual space to your dominant color (usually the background or neutral), 30% to a secondary color (navigation, cards, sections), and 10% to your accent color (CTAs, links, highlights). This ratio creates natural visual hierarchy and prevents any single color from overwhelming the composition.

Cultural Considerations

Color associations vary significantly across cultures. White symbolizes purity in Western cultures but mourning in parts of East Asia. Red means danger in the West but good fortune in China. Green is associated with Islam in the Middle East and is sometimes avoided for secular branding. If your website serves a global audience, test your palette choices with users from your target markets and avoid relying on color alone to convey meaning.

9. Palette Creation Workflow

Here is the step-by-step process professional designers use to create production-ready color palettes. Follow this workflow with the gen8x color palette generator for best results.

1. Define your brand attributes. Write down 3-5 adjectives that describe the feeling you want your site to evoke (trustworthy, playful, cutting-edge, calm, bold). These adjectives map to specific color families.
2. Choose a base color. Select a single hue that best represents your primary brand adjective. This becomes your palette anchor.
3. Apply a harmony rule. Use the harmony calculator above to generate 3-5 related colors. Split-complementary is the safest starting point; analogous for cohesion; triadic for vibrancy.
4. Build a full scale. For each color, generate 9-11 tints and shades (50-950 scale, similar to Tailwind CSS). This gives you enough range for backgrounds, borders, hover states, and text.
5. Assign semantic roles. Map colors to functional roles: primary action, secondary action, success, warning, error, info, background, surface, text primary, text secondary.
6. Verify accessibility. Test every text/background combination with the contrast checker. Fix any pair below 4.5:1 by adjusting lightness or swapping to a darker/lighter shade.
7. Test in context. Apply the palette to your actual UI components: buttons, forms, navigation, cards, tables. Check that the hierarchy is clear and the palette works at both mobile and desktop sizes.
8. Create dark mode variants. Desaturate accents, lighten them slightly, swap background and text values, and re-verify all contrast ratios.
9. Document and export. Export as CSS custom properties with semantic names. Store your palette in a design system or style guide. Use the "Copy CSS" button in the calculator above for instant export.

10. Frequently Asked Questions