Generate harmonious color schemes from any base color. Complementary, analogous, triadic and more. 🎨 Free
/* CSS variables will appear here */
Complementary: Colors opposite on the color wheel — high contrast, vibrant. Analogous: Colors adjacent on the wheel — harmonious and calm. Triadic: Three evenly spaced colors — bold and balanced. Split-complementary: A base color plus two colors adjacent to its complement — contrast with less tension than complementary. Monochromatic: Variations in lightness and saturation of a single hue.
Contrast ratio measures the difference in luminance between two colors. WCAG accessibility guidelines require a minimum ratio of 4.5:1 for normal text and 3:1 for large text. Each swatch shows its contrast against white and black so you can choose accessible text colors. A ratio of 21:1 is the maximum (black on white).
HSL (Hue, Saturation, Lightness) makes it easy to create color harmonies. Hue is a 0-360° angle on the color wheel. Saturation is vividness (0% = grey, 100% = full color). Lightness is brightness (0% = black, 50% = normal, 100% = white). Color harmony algorithms simply shift the hue angle by set amounts while keeping saturation and lightness consistent.