How to use this tool
- Choose a starting color or generate a palette.
- Review the colors in the live website preview and adjust the roles.
- Export the values and check important text/background pairs with the contrast checker.
Example and use case
Use a primary color for actions, a neutral base for surfaces, and a contrasting foreground for text.
Limitations to check
A harmonious palette is not automatically accessible. Check contrast in actual components and states, including disabled, hover and focus appearances.
Processing and privacy
The tool's browser code handles entered text or selected files locally. Optional URL imports and external resources can make network requests. This website also uses third-party scripts, including analytics and advertising. Read the privacy policy and use sample data when testing sensitive workflows.
Found a problem? Report a tool issue with the browser version and steps to reproduce it. Avoid sending private document content or credentials.