How to use
- Paste or pick the two colors you actually want to compare.
- Read the simple labels and numeric gaps rather than guessing from memory.
- Move next to Contrast Checker only after the final foreground/background pair is fixed.
Wave 50 expansion
Move from palette ideas to measurable comparison
This page sits after Harmony, Palette, or Scale work. It helps when you already have two candidates and need to know whether they are still too close.
How to choose between nearby pages
Use Color Picker when you still need a first color. Use Color Harmony when the job is generating relationship-based sets. Use Color Palette or Color Scale when one base color still needs variations. Use this page after you already have two candidate colors and need a numeric comparison. Move next to OKLCH Converter when one of those approved colors now needs perceptual-space values for token tuning or CSS handoff, or to CSS Color Mix when the next task is shipping a color-mix() expression from the approved pair. Move to Contrast Checker only when the final foreground/background pair is fixed and readability is the real question.
FAQ
What does this page do?
It compares two colors by RGB distance and a simple perceptual ΔE76 gap, then shows the numeric formats for both colors.
When should I use this instead of Contrast Checker?
Use Contrast Checker when readability of foreground and background text is the question. Use this page when the question is whether two swatches are visually too close or clearly different.
When should I use this instead of Color Harmony or Color Palette?
Use Color Harmony to generate relationship-based color sets and Color Palette to expand one base color into tints, shades, and accents. Use this page after you already have two candidate colors and want to compare their gap.
What is stored in the share URL?
The share URL stores the left and right HEX values only.