How it works

Analogous colors sit near each other on the wheel (calm, cohesive). Complementary uses opposite hues (high contrast). Split complementary softens that contrast. Triadic and tetradic space hues evenly for vibrant, balanced palettes.
Shades & tints generates a light-to-dark ramp from your base color — exactly what you need for a design system's color scale.
The contrast check shows the WCAG contrast ratio of each color against white and black text. Aim for at least 4.5:1 for normal body text (AA) and 3:1 for large text — this is what determines whether text on that color is actually readable.
Export as HEX list, ready-to-paste CSS custom properties, or a PNG image of the palette.
Click any swatch to copy its hex code.