How do I pick accessible colors for my design?

Use the Contrast Checker to verify that your text and background color combinations meet WCAG AA (4.5:1 for body text) or AAA (7:1) contrast requirements before finalising the palette.

How do I find the Tailwind class for a color I like?

Paste the hex color into the Tailwind Color Finder and it shows the closest Tailwind 500/400/600 class along with the hex value difference so you can judge the match quality.

How many shades does the palette generator produce?

The palette generator produces a standard 10-shade scale (50 through 950) from any seed color, using perceptually uniform lightness steps.

Build Color Schemes for UI Design

Building a cohesive color scheme for a UI requires balancing aesthetics with accessibility requirements and matching the colors to your component library. devtoolkit.sh provides a connected set of color tools for this workflow. Generate a full color palette from a single seed color, with shades from light to dark. Check the contrast ratio between any text and background color pair against WCAG AA and AAA standards. Find the closest Tailwind CSS utility color class to any hex color for quick implementation. Explore the Material Design color system to pick harmonious primary and accent colors. All tools work in your browser with instant results as you adjust values.

#Color Palette from Color

Generate complementary, triadic, analogous and other color schemes from one hex color.

#Contrast Checker

Check foreground/background color contrast ratio against WCAG standards.

#Tailwind Color Finder

Find the closest Tailwind CSS color class for any hex color.

#Material Design Color Picker

Browse and copy Material Design color palette hex values.

FAQ

How do I pick accessible colors for my design?: Use the Contrast Checker to verify that your text and background color combinations meet WCAG AA (4.5:1 for body text) or AAA (7:1) contrast requirements before finalising the palette.
How do I find the Tailwind class for a color I like?: Paste the hex color into the Tailwind Color Finder and it shows the closest Tailwind 500/400/600 class along with the hex value difference so you can judge the match quality.
How many shades does the palette generator produce?: The palette generator produces a standard 10-shade scale (50 through 950) from any seed color, using perceptually uniform lightness steps.