Pick colors with precision. Generate palettes. Check accessibility. Everything you need for perfect color choices.
Upload an image
Click or drag & drop
#3B82F6
RGB(59, 130, 246)
Card Title
This is how your color looks as an accent on a card component.
AI-like recommendations for your color
Best Text Color
Optimal contrast for readability
Hover State
Darker variant for interactions
Border Color
Subtle outline color
Shadow Color
For depth and elevation
Light Variant
For backgrounds & subtle fills
Dark Variant
For emphasis & active states
Color Psychology
Full range from light to dark. Click to copy.
Harmonious color combinations based on color theory.
#3B83F6#F6AE3BGenerate a complete brand color system
This is how your brand could look with this color palette.
Primary
#266BD9Secondary
#958CD9Accent
#E6971ABackground
#F9FAFAText
#1F242EOverall color harmony analysis
Add more colors to calculate harmony
WCAG Accessibility Guidelines
Sample Text
The quick brown fox jumps over the lazy dog
3.67:1
Contrast Ratio
Normal Text
Large Text
See how your color appears to people with color vision deficiency
Original
Your selected color
#3B82F6Protanopia
Red-blind (1% of males)
#5A5ADADeuteranopia
Green-blind (1% of males)
#5650D3Tritanopia
Blue-blind (rare)
#3FC4BFAchromatopsia
Complete color blindness
#7A7A7ATip: Ensure your designs work for all users by testing color combinations with this simulator. About 8% of men and 0.5% of women have some form of color vision deficiency.
Dear user, we will add that new tool to the toolsgenerate collection. Tell us which tool you need?