Palette Comparison Tool
Compare multiple color palettes side by side to evaluate contrast, harmony, and consistency. Ideal for design reviews and A/B palette testing.
Avg. Luminance
30%
Dark palette
End-to-End Contrast
2.53:1
✗ Not accessible
Avg. Luminance
53%
Light palette
End-to-End Contrast
3.01:1
△ WCAG AA Large
Palette 1
Palette 2
What This Comparison Tool Does
Load two or more color palettes and view them side-by-side to evaluate which works best for your project. Each palette shows its colors, average luminance (overall lightness), and end-to-end contrast ratio — giving you objective data to inform your subjective design decisions.
How Palette Comparison Works
The tool calculates two key metrics for each palette. Average luminance tells you if a palette is overall light or dark — useful for matching a mood or brand feel. End-to-end contrast measures the ratio between the lightest and darkest colors, indicating whether the palette has enough range for accessible text hierarchies.
Understanding the stats
- Avg. Luminance: 0-100% scale. Below 50% = dark palette, above 50% = light palette
- End-to-End Contrast: Ratio between lightest and darkest color. 4.5:1+ passes WCAG AA for normal text
- WCAG Badge: ✓ AA means accessible for most text, △ AA Large means only accessible for large text (18pt+), ✗ means not accessible
Real Comparison Scenarios
Client Presentation Prep
A designer has three palette options for a client rebrand. They load all three, compare them side-by-side, and notice that Option 2 has significantly better contrast — making it the safest choice for accessibility without sacrificing style.
A/B Testing Color Schemes
A product team is testing whether a warm or cool palette converts better. They load both palettes here first to ensure they're equally accessible — discovering that the warm palette needs adjustment because its end-to-end contrast is only 2.8:1.
Brand Merger Evaluation
Two companies are merging and need to evaluate if their brand palettes can coexist. Loading both reveals that Company A's palette is much darker (35% luminance vs 72%), which explains why their combined marketing materials feel unbalanced.
Design System Audit
Someone is reviewing their company's design system tokens. They load the primary, secondary, and neutral palettes to verify they all have sufficient contrast range. The neutral palette passes, but the secondary needs darker shades added.
Competitor Analysis
A startup extracts palettes from competitor websites and compares them to find gaps. They notice all competitors use cool blues, so they decide to differentiate with a warm orange palette that still maintains good contrast.
How to Use This Tool Effectively
Paste colors from anywhere. The tool accepts hex codes in any format: comma-separated, space-separated, or even pasted directly from Figma, CSS variables, or design docs. It extracts all valid hex codes automatically.
Use preset palettes for quick tests. The Ocean, Sunset, Forest, and Warm presets let you experiment with the tool before loading your own colors.
Compare 2-4 palettes maximum. More than 4 becomes visually overwhelming. If you have more options, do elimination rounds — compare 4, pick 2, then compare those against the next batch.
Look at both stats and gut feeling. The luminance and contrast numbers are helpful, but your design intuition matters too. A palette might have perfect stats but still feel wrong for your brand.
Copy palettes to test elsewhere. Use the Copy button to grab a palette's colors, then paste them into other tools like the Contrast Checker or Dark Light Mode Preview for deeper analysis.
Understanding WCAG Contrast Ratings
✓ WCAG AA
Contrast ratio of 4.5:1 or higher. Passes requirements for normal text (under 18pt). Safe for body copy, labels, and UI text.
△ AA Large
Contrast between 3:1 and 4.5:1. Only passes for large text (18pt+ or 14pt+ bold). Use for headings, not body copy.
✗ Not Accessible
Below 3:1 contrast. Fails WCAG requirements for any text size. Only use for decorative elements, not readable content.
Frequently Asked Questions
How many palettes can I compare at once?
The interface supports up to 4 palettes simultaneously. This is intentional — comparing more than 4 becomes cognitively overwhelming. If you have more options, do iterative comparisons in rounds.
Can I import palettes from Figma or Sketch?
Copy the hex codes from your design tool and paste them into the text input. The tool extracts any valid hex codes from the pasted text, regardless of formatting. You can also paste CSS variables and it will pull out the color values.
Why is the contrast rating based on end-to-end only?
End-to-end contrast (lightest vs darkest) gives you the maximum possible contrast in the palette. If this passes WCAG AA, you know you have at least one accessible text/background combination. For checking all possible pairs, use the Palette Contrast Viewer.
What does average luminance tell me?
It indicates the overall "weight" or mood of a palette. A palette with 80% average luminance feels light and airy. One at 25% feels dark and dramatic. Matching luminance across palettes helps maintain visual consistency.
Can I save my comparisons for later?
This tool doesn't have built-in save functionality. Copy the hex codes of palettes you want to keep, or bookmark the page after loading your colors if URL persistence is available. For palette management, use the Favorite Colors Manager.
How do I remove a palette from the comparison?
Click the trash icon on any palette card to remove it. You need at least 2 palettes for comparison — if you try to remove one when only 2 remain, you'll get a reminder to add a replacement first.
What if my pasted colors don't load?
Make sure you're using valid 6-digit hex codes (like #3b82f6). The tool also accepts 3-digit shorthand (like #3bf). Named colors like "blue" or RGB values like rgb(59, 130, 246) aren't currently supported — convert them to hex first.
Related Tools for Palette Evaluation
Use this Comparison Tool when you need to evaluate multiple complete palettes side-by-side with summary statistics.
Use the Palette Contrast Viewer when you need to check contrast between every possible color pair within a single palette.
Use the Contrast Checker when you need detailed WCAG analysis for a specific text/background combination.
Use the Dark Light Mode Preview when you want to see how a palette performs in both light and dark UI themes.
Other Free Color Tools
Palette Contrast Viewer
Visualize contrast levels between every color pair in your palette. Quickly spot inaccessible combinations before they reach production.
Color Contrast Checker — WCAG Compliance
Check the contrast ratio between text and background colors against WCAG AA and AAA accessibility standards. Ensure your designs are readable for all users.
Color Palette Generator from Base Color
Generate a beautiful, harmonious color palette from a single base color. Perfect for building consistent UI color schemes and brand identities.
Color Picker
Pick any color using an interactive palette or enter HEX, RGB, or HSL values. Copy your color code instantly for use in any design or development project.
Color Harmony Generator
Generate complementary, analogous, triadic, and tetradic color palettes based on color theory. Build harmonious color schemes for any design project.
CSS Gradient Generator
Create beautiful linear and radial CSS gradients with a live preview and export clean, ready-to-use CSS code. No design skills required.