COLOR TOOLS FOR YOUR NEXT DESIGN
Explore the color wheel.
Pick a color, build a harmony and check readability.
Color Wheel
Colors adjacent on the wheel create a serene, comfortable palette. Ideal for nature-inspired designs and cohesive UI themes.
Click a swatch to select · Click hex to copy
Colors adjacent on the wheel create a serene, comfortable palette. Ideal for nature-inspired designs and cohesive UI themes.
A harmony describes color relationships. Test text against its actual background before using the combination.
Compare two colors
See values side by side, check contrast and share the exact pair.
Open toolCheck and fix contrast
Find out why text fails, then try a passing foreground on the same background.
Open toolBuild a palette
Lock colors, generate harmonies and export CSS or design tokens.
Open toolTry a real example
Does gray text pass on white?
#777777 on #FFFFFF measures 4.478:1. Normal text needs 4.5:1 for WCAG AA, so this pair falls just short. Rounding the display does not change the result.
Check this pair and find a fixThe quick brown fox jumps over the lazy dog.
Example: #777777 text / #FFFFFF background
Normal text: fails AA | Large text: passes AA
Start with your task
Convert a color
HEX, RGB, HSL, HSV, CMYK and OKLCH values.
Extract colors from an image
Find a palette using processing in your browser.
Create brand color roles
Preview primary, surface and text colors together.
Understand the calculations
Read the reference values and limits of each check.
Check inline link colors
Check link, body text and background together.
Inspect public reference checks
Reproduce the values and download the validation data.
Color palette ideas with HEX codes
Start with a worked color combination, check its text roles and make it your own.
Pastel Color Palettes
Three palettes with measured text contrast and editable colors.
Earth Tone Color Palettes
Three palettes with measured text contrast and editable colors.
Neutral Color Palettes
Three palettes with measured text contrast and editable colors.
Dark Mode Color Palettes
Three palettes with measured text contrast and editable colors.
Find a color name or compare similar shades
Look up sage green, navy blue or gray / grey, then see how neighboring colors differ.
A result you can check
A harmony is a starting point, not proof that text is readable. Test the foreground against its actual background, including hover and focus states. Our tools show numeric results; a complete accessibility review also needs keyboard, content and interaction checks.