Color Picker
Professional color selection tool with harmony generation, shade variations, and WCAG accessibility testing.
Color Selection
Choose your primary color using the picker or enter a hex code
Shades & Tints
Explore lighter tints and darker shades of your selected color. Click any shade to use it as your primary color.
💡 Tip: Shades are created by mixing your color with white (tints) and black (shades)
Color Harmonies
Discover professionally balanced color combinations based on color theory principles
analogous
Colors next to each other on the color wheel - creates harmony and unity
complementary
Opposite colors on the wheel - creates high contrast and visual interest
triadic
Three colors evenly spaced - creates vibrant and balanced palettes
tetradic
Four colors in two complementary pairs - offers rich color variety
splitComplementary
Base color with two colors adjacent to its complement - provides high contrast with less tension
Accessibility Contrast Checker
Ensure your color combinations meet WCAG accessibility standards for readability
This is how normal text (14px) looks with these colors
The quick brown fox jumps over the lazy dog
Large Text Sample
About WCAG Standards: Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. AA is the minimum recommended level for web content. AAA provides enhanced contrast for users with visual impairments.
How to Use This Color Picker
🎨 Selecting Colors
- • Click the color picker to open the interactive selector
- • Drag on the color canvas to adjust saturation and lightness
- • Use the hue slider to change the base color
- • Enter hex codes directly for precise color selection
- • Press ESC to close the picker modal
🌈 Color Harmonies
- • Analogous: Colors next to each other - calming and harmonious
- • Complementary: Opposite colors - high contrast and energy
- • Triadic: Three evenly spaced colors - vibrant and balanced
- • Tetradic: Four colors - rich and diverse palettes
♿ Accessibility Testing
- • Test text and background color combinations
- • Ensure WCAG AA compliance (4.5:1 for normal text)
- • Aim for AAA when possible (7:1 for normal text)
- • Large text has lower requirements (18pt+ or 14pt+ bold)
💡 Pro Tips
- • Use shades for hover states and UI variations
- • Click any harmony color to make it your primary
- • Test your colors in both light and dark modes
- • Copy colors with one click for easy pasting