Practical color theory for UI palettes

Start with one base color, then generate a harmony: complementary for strong contrast, analogous for calm interfaces, triadic for more expressive brands.

Use shades correctly

Use 500 as the main brand shade, 600 and 700 for interaction states, and 50/100 for backgrounds.

Check contrast

Body text should usually pass WCAG AA at 4.5:1. Large text can pass at 3:1. If the design only works when nobody reads it, that is not design, that is decoration.

Open the generator