Color Harmony
Popular Colors
Accessibility Contrast Checker
Color Blindness Simulator
See how your color appears to people with different types of color vision deficiency.
Color History
No colors saved yet. Pick some colors to build your history!
Complete Guide to Color Tools
Our color picker provides professional tools for designers, developers, and creative professionals โ from basic color picking to accessibility checking.
Color Formats Explained
- HEX โ Most common in web design. 6 characters representing R, G, B in hexadecimal (e.g. #667eea)
- RGB โ Three decimal numbers 0โ255 for red, green, blue (e.g. rgb(102, 126, 234))
- HSL โ Hue (0โ360ยฐ), Saturation (0โ100%), Lightness (0โ100%) โ most intuitive for humans
WCAG Contrast Standards
- AA Normal Text โ Minimum 4.5:1 ratio
- AA Large Text โ Minimum 3:1 ratio (18pt+ or 14pt+ bold)
- AAA Normal Text โ Minimum 7:1 ratio (enhanced)
- AAA Large Text โ Minimum 4.5:1 ratio
Color Blindness Types
- Protanopia โ Cannot perceive red light (~1% of males)
- Deuteranopia โ Cannot perceive green light (~1% of males)
- Tritanopia โ Cannot perceive blue light (very rare)
- Achromatopsia โ Total color blindness, sees only grayscale
Frequently Asked Questions
HEX uses hexadecimal notation (e.g. #667eea) while RGB uses decimal values (e.g. rgb(102, 126, 234)). They represent the same colors โ HEX is more compact and standard for web design.
Use the Contrast Checker tab. WCAG AA requires a 4.5:1 ratio for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
Use the Gradients tab. Pick two colors, choose linear/radial/conic type, adjust the angle, and copy the ready-to-use CSS code with one click.
Yes, all features โ color picking, gradient generator, contrast checker, and color blindness simulator โ are 100% free with no registration required.