Free Color Tools
Accessible Color Palette Builder
Build a tonal color scale and identify readable black or white text for every swatch.
What this tool does
Build a tonal palette with readable text choices visible.
The builder creates light-to-dark variations around one hue and calculates whether black or white text has stronger contrast on each swatch.
Every displayed text choice reaches at least 4.5:1 in the generated scale, while non-text states and real component combinations still need separate review.
Use the tool
Generate a contrast-aware color scale
Choose a hue, select the number of steps, and inspect the recommended text color.
Each swatch chooses black or white text with the stronger contrast. Always test real component states, adjacent colors, and non-text contrast separately.
How to use it
Three quick steps
- 1Enter a valid HEX base color.
- 2Review the tonal scale and contrast ratios.
- 3Copy candidates and validate complete component states in context.
Worked example
Prepare interface surface tokens
Generate seven steps from the primary brand blue.
FAQ
Questions about the accessible palette builder
Practical details about using the tool and understanding its result.
Keep working
Related tools
Color Contrast Checker
Check foreground and background colors against WCAG AA and AAA contrast targets.
Open toolColor Tint and Shade Generator
Generate a copyable scale by mixing a base color toward white and black.
Open toolColor Palette Generator
Build analogous, complementary, triadic, or monochromatic palettes from one HEX color.
Open toolFrom one asset to the whole workflow
Keep accessible color decisions visible from design through approval.
Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.