Color Palette Generator
Pick one base color and get everything you need to build a UI: conversions, a full tint/shade scale, harmony schemes, and WCAG contrast checks. Click any swatch to copy its hex.
Tints and shades (10 steps) - click to copy
Harmony schemes
Complementary
Analogous
Triadic
WCAG contrast checker (text on your color)
Reading the contrast badges: WCAG 2.x requires a contrast ratio of at least 4.5:1 for normal body text (AA) and 7:1 for AAA; large text (roughly 24px, or 19px bold) needs 3:1 for AA and 4.5:1 for AAA. The checker shows your base color as the text color on white, black, and a custom background - flip the pair mentally if you plan to use the color as the background instead, the ratio is the same either way. Tints mix the base toward white and shades toward black in HSL lightness steps, which is exactly how most design systems build their 50-900 color ramps.