Color Insights
69.4%
Luminance
Cool
Temperature
0%
Saturation
85%
Lightness
Loading harmony...
Loading palettes…
Light & Dark Mode Suggestions
Loading typography…
Loading contrast check…
Loading color simulations…
Loading harmony...
Loading palettes…
Loading typography…
Loading contrast check…
Loading color simulations…
See how this color looks in common UI elements and design contexts.
Card subtitle or description
Card content goes here...
Links stand out while maintaining readability
Success
Action completed
When using this color for text or important UI elements, always check contrast ratios. Use the Contrast Checker section below to ensure your design meets accessibility standards.
Understanding color harmony helps create visually pleasing and effective designs. Each rule serves different purposes and emotional responses.
Use 60% dominant color, 30% secondary, 10% accent for balanced designs
Ensure sufficient contrast between text and background colors
Colors appear different depending on surrounding colors
Limit your palette to 2-4 colors for cohesive design
Comprehensive accessibility analysis to ensure your color choices work for everyone, including users with visual impairments and color vision differences.
| WCAG Level | Required Ratio | White BG | Black BG | Use Case |
|---|---|---|---|---|
| AA Normal Text | 4.5:1 | Fail | Pass | Minimum for body text, small UI elements |
| AA Large Text | 3:1 | Fail | Pass | 18pt+ or 14pt+ bold text |
| AAA Normal Text | 7:1 | Fail | Pass | Enhanced accessibility standard |
| AAA Large Text | 4.5:1 | Fail | Pass | Enhanced for large text |
See how your color appears to users with different types of color vision deficiency.
NOTE: Export options are coming soon.
