Color Tools
Convert color formats, generate palettes, check contrast, create gradients, and explore color combinations.
Color Tools tools
How to Choose Colors That Work Together
Start with the format you have. A designer might hand you a hex code, while your CSS may need RGB or HSL. The Hex to RGB Converter and the HSL to Hex Converter switch between them. The Color Picker shows hex, RGB, HSL and CMYK values at once.
To build a scheme, give the Color Palette Generator one base color. It returns complementary, analogous, triadic or split-complementary matches. The Color Shade and Tint Generator then gives you darker and lighter steps of each color for buttons, borders and hover states. Stuck for a starting point? The Random Color Generator suggests colors and small palettes to try.
Test readability before you publish. The Color Contrast Checker compares text and background colors against the WCAG rules. Normal body text needs a contrast ratio of at least 4.5:1 to pass level AA. The Color Blindness Simulator shows how your colors look with common types of color vision deficiency. That helps you avoid pairs, like red and green, that many people cannot tell apart.