Skip to main content

Help & Documentation

Everything you need to know about using PaletteGen

Getting Started

PaletteGen generates color palettes based on real color theory. Pick a harmony mode, hit generate, and you've got something that actually works.

Quick Start Guide

  1. 1. Choose a harmony mode (complementary, analogous, triadic, etc.)
  2. 2. Click "Generate" or press the Spacebar to create a palette
  3. 3. Click on any color to copy its HEX code
  4. 4. Lock colors you like before generating again
  5. 5. Export in your preferred format (PNG, SVG, CSS, etc.)

Features

🎨 8 Harmony Modes

Complementary, analogous, triadic, tetrad, square, split-comp, monochrome, random

🔗 URL Sharing

Share palettes via link, no account needed

📸 Image Extraction

Upload photos to extract colors

🌈 Gradient Generator

Create CSS gradients with adjustable angles

👁️ Color Blindness Sim

Preview for 5 vision types

♿ WCAG Checker

Verify contrast ratios for accessibility

Understanding Color Harmony Modes

Colors don't get along by accident. For a deeper dive into the psychology behind specific colors, see the color theory guide. Harmony modes are based on where colors sit relative to each other on the color wheel, and that position determines whether they clash, complement, or blend. Here's what each mode actually does.

Complementary Colors

Colors directly opposite on the color wheel (180° apart)

Complementary colors fight each other a little, and that's the point. Put blue next to orange and both look more intense than they would on their own. It's the highest-contrast option in the toolkit.

Examples:

  • • Blue (#0000FF) & Orange (#FF6600)
  • • Red (#FF0000) & Cyan (#00FFFF)
  • • Purple (#8B00FF) & Yellow (#FFD700)

Best for:

Call-to-action buttons, high-contrast designs, grabbing attention, sports branding, energetic websites

Analogous Colors

Colors next to each other on the color wheel (30° apart)

Analogous colors create harmonious, serene combinations. They blend naturally and are easy on the eyes because they share similar wavelengths.

Examples:

  • • Blue → Blue-Green → Green
  • • Orange → Red-Orange → Red
  • • Yellow → Yellow-Green → Green

Best for:

Nature-inspired designs, calming interfaces, cohesive backgrounds, photography websites, wellness apps

Triadic Colors

Three colors evenly spaced on the color wheel (120° apart)

Triadic schemes are vibrant and balanced. They offer visual contrast while maintaining harmony, creating dynamic and playful designs.

Examples:

  • • Primary colors: Red, Yellow, Blue
  • • Secondary colors: Orange, Green, Purple
  • • Custom: Magenta, Chartreuse, Cyan

Best for:

Playful brands, children's content, balanced multi-section layouts, creative portfolios, energetic designs

Tetrad (Rectangle) Colors

Two pairs of complementary colors forming a rectangle on the wheel

Tetrad gives you the most colors to work with, which means the most ways to get it wrong. Let one color dominate and use the others as accents. Don't try to give all four equal weight.

Examples:

  • • Red, Yellow-Green, Cyan, Blue-Purple
  • • Orange, Green, Blue, Purple

Best for:

Complex designs, data visualizations, rich illustrations, magazine layouts, multi-brand platforms

Square Colors

Four colors evenly spaced on the color wheel (90° apart)

Square schemes are similar to tetrad but more evenly balanced. All four colors have equal visual weight.

Examples:

  • • Red, Yellow, Cyan, Blue
  • • Orange, Chartreuse, Teal, Purple

Best for:

Balanced multi-color schemes, infographics, dashboard interfaces, educational content, geometric designs

Split-Complementary Colors

Base color + two colors adjacent to its complement

A softer alternative to complementary schemes. Provides contrast without the tension of direct opposites.

Examples:

  • • Blue + Red-Orange + Yellow-Orange
  • • Red + Yellow-Green + Blue-Green

Best for:

Sophisticated designs, professional websites, balanced contrast, easier on the eyes than full complementary

Monochrome Colors

Different shades, tints, and tones of a single hue

Monochrome creates elegant, cohesive designs. It's impossible to clash colors when they're all from the same family.

Examples:

  • • Light Blue → Medium Blue → Dark Blue → Navy
  • • Pale Pink → Rose → Burgundy → Deep Red

Best for:

Minimalist designs, professional branding, elegant interfaces, photography portfolios, luxury products

Random Colors

Five completely random colors from the spectrum

Random mode ignores harmony rules and creates unexpected combinations. Perfect for creative exploration and breaking design blocks.

Best for:

Experimentation, creative inspiration, abstract art, discovering unexpected combinations, breaking creative blocks

💡 Pro Tip:

Start with analogous or monochrome schemes for safe, harmonious designs. Use complementary or triadic for bold, energetic designs. Lock colors you love and generate variations!

WCAG Accessibility Standards Explained

WCAG is a set of international standards that define how readable your color choices need to be. It matters practically: low contrast isn't just an accessibility problem, it's a readability problem for everyone, including people reading on a phone in sunlight.

What is WCAG?

WCAG is published by the W3C, the same group that maintains web standards like HTML and CSS. It defines specific, testable criteria for making digital content work for people with disabilities, including anyone with low vision, color blindness, or other visual impairments.

Why it matters:

  • • Legal compliance: Required by law in many countries (ADA in US, EN 301 549 in EU)
  • • Inclusive design: 1 in 12 men and 1 in 200 women have color vision deficiency (2026 data)
  • • Better UX: Good contrast improves readability for everyone, especially in bright sunlight
  • • Performance benefits: Pages with good contrast and accessibility also tend to score better on Core Web Vitals, which are confirmed Google ranking signals

📅 Current Standard (2026):

WCAG 2.2 is the active W3C Recommendation (released October 5, 2023). WCAG 3.0 is in development and expected around 2028-2030. The contrast ratio standards (4.5:1 AA, 7:1 AAA) remain consistent across all WCAG 2.x versions.

Understanding Contrast Ratios

Contrast ratio is the brightness difference between two colors, expressed as a number. A ratio of 1:1 means identical brightness, so nothing's readable. Black on white hits 21:1, the maximum. Most readable text sits somewhere between those extremes.

The Formula:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 = luminance of lighter color, L2 = luminance of darker color
AA

Level AA (Minimum Standard)

  • • Normal text: 4.5:1 minimum contrast
  • • Large text (18pt+ or 14pt+ bold): 3:1 minimum
  • • Required for: Legal compliance in most jurisdictions
  • • Example: Dark gray (#595959) on white (#FFFFFF) = 4.54:1 ✓
AAA

Level AAA (Enhanced Standard)

  • • Normal text: 7:1 minimum contrast
  • • Large text: 4.5:1 minimum
  • • Best for: Government sites, healthcare, education, maximum accessibility
  • • Example: Black (#000000) on white (#FFFFFF) = 21:1 ✓✓

Common Accessibility Mistakes

❌ Light gray text on white

#CCCCCC on #FFFFFF = 1.6:1 (fails AA)

❌ Yellow text on white

#FFFF00 on #FFFFFF = 1.07:1 (fails AA)

❌ Pastel colors on pastel backgrounds

Light pink on light blue = Usually fails

✓ Dark blue text on white

#003366 on #FFFFFF = 11.9:1 (passes AAA)

Using PaletteGen's WCAG Checker

  1. 1. Generate or select your palette
  2. 2. Click the "Check Accessibility" button
  3. 3. Select a foreground color (text) and background color
  4. 4. View the contrast ratio and pass/fail status for AA and AAA
  5. 5. If failed, adjust colors until you achieve the desired contrast level

Quick Reference Table

Text Size AA (Min) AAA (Enhanced)
Normal (< 18pt) 4.5:1 7:1
Large (≥ 18pt or ≥ 14pt bold) 3:1 4.5:1

Designing for Color Blindness

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency (as of 2026). That's a lot of people. If your design only communicates something through color and no other signal, those users miss it entirely.

What is Color Blindness?

Color blindness means certain cones in the eye, the cells that detect specific wavelengths of light, aren't working properly. It's almost always genetic. Most people with it have never known anything different, so they've developed ways to work around it without even realizing it.

Key Statistics (2026):

  • • Over 300 million people worldwide have color vision deficiency
  • • 1 in 12 men (8%) are affected
  • • 1 in 200 women (0.5%) are affected
  • • Most common form: Red-Green color blindness (~95-99% of cases)

5 Types of Color Vision Deficiency

Protanopia (Red-Blind)

Missing/non-functioning red cones • ~1% of males

Cannot distinguish red from green. Red appears as dark gray or black. Orange, yellow, and green all look similar.

Problem combinations:

Red/Green, Red/Orange, Pink/Gray, Purple/Blue

Deuteranopia (Green-Blind)

Missing/non-functioning green cones • ~1% of males

Cannot distinguish green from red. Green appears beige. Similar to protanopia but slightly different hue shifts.

Problem combinations:

Green/Red, Green/Brown, Blue/Purple, Pink/Gray

Tritanopia (Blue-Blind)

Missing/non-functioning blue cones • Very rare (~0.01%, about 1 in 10,000)

Cannot distinguish blue from yellow. Blue appears green, yellow appears pink or violet.

Problem combinations:

Blue/Green, Purple/Red, Yellow/Pink

Achromatopsia (Complete Color Blindness)

No functioning cones • Extremely rare (~0.003%)

See only in grayscale. Complete absence of color vision, often with extreme light sensitivity and poor visual acuity.

Design requirement:

Must rely entirely on contrast, not color

Partial Color Blindness (Low Color Vision)

Weakened cone function • ~6% of males

Reduced ability to distinguish colors but not complete color blindness. Includes protanomaly, deuteranomaly, and tritanomaly.

Experience:

Similar problems to full color blindness but less severe

7 Design Best Practices for Color Blindness

1.

Don't rely on color alone

Use icons, patterns, labels, or text in addition to color. Example: Mark errors with both red AND an icon.

2.

Ensure high contrast

Meet WCAG AA (4.5:1) or AAA (7:1) standards. This helps everyone, not just color blind users.

3.

Avoid problematic combinations

Red/Green is the most problematic. Also avoid: Green/Brown, Blue/Purple, Pink/Gray as primary indicators.

4.

Use patterns and textures

In charts/graphs, use different patterns (stripes, dots, solids) not just colors.

5.

Test with a simulator

Use PaletteGen's color blindness simulator to preview your design in all 5 vision types.

6.

Use colorblind-safe palettes

Blue/Orange works well for most types. Consider using tools specifically designed for colorblind accessibility.

7.

Provide alternative views

For data visualizations, offer table views or list views as alternatives to colored charts.

Using PaletteGen's Color Blindness Simulator

  1. 1. Generate or load your palette
  2. 2. Click the "Simulate Color Blindness" button
  3. 3. Select a vision type (Protanopia, Deuteranopia, Tritanopia, Achromatopsia, or Partial)
  4. 4. View how your palette appears to someone with that vision type
  5. 5. Check if colors are still distinguishable - if not, adjust your palette

Colorblind-Safe Color Combinations

✓ Blue + Orange

Works for all types

✓ Blue + Yellow

Good for protanopia/deuteranopia

✓ Blue + Brown

High contrast, safe

✓ Black + White + Blue

Universal accessibility

Troubleshooting

Saved palettes not loading
Saved palettes are stored in your browser's local storage. If they're not loading, try clearing your browser cache or check if you're in private/incognito mode.
Image upload not working
Ensure the file is a valid image format (JPG, PNG, GIF, WebP). Try a different browser if issues persist.
Export not working
Check your browser's download settings. Make sure popups aren't blocked. Try a different browser or update your current one.

Still need help?

Contact us at [email protected] or visit our contact page.