Design Tools
Pick and convert colors, build palettes, check text contrast against WCAG guidelines, preview fonts and see how designs look with color vision deficiencies.
5 free tools · no sign-up required
Color Picker
Pick a color and copy it as HEX, RGB or HSL
Color Palette Generator
Generate five-color palettes from color-harmony rules or at random
Font Preview
Preview and compare Google Fonts with your own text
Colorblind Simulator
Approximate how an image looks with seven types of color blindness
Contrast Checker
Check the WCAG contrast ratio between text and background colors
About these tools
The design tools help with color and type decisions. Convert a color between HEX, RGB and HSL, build a palette around a base color, and check whether text and background colors have enough contrast to meet WCAG accessibility guidelines.
The color-blindness simulator applies standard color transformation models to an image you choose, which gives a useful approximation of how it may look to people with different types of color vision deficiency. It is a design aid, not a medical test.
Typical uses
Examples of everyday tasks these tools are built for.
Designers and developers
Checking that button text meets the WCAG AA contrast ratio before shipping a design.
Brand work
Exploring palette variations around a brand color and copying the codes into a style guide.
Frequently asked questions
What contrast ratio do I need?
WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text; level AAA asks for 7:1 and 4.5:1. The contrast checker shows which levels a color pair passes.
Is the color-blindness simulation exact?
No simulation is exact, because color vision varies between people. The simulator uses widely used transformation matrices to give a reasonable approximation.