Loading...
Create harmonious color schemes from a base color. Generate complementary, analogous, triadic, and more.
A color palette is a curated set of colors chosen to work harmoniously together, based on color theory relationships like complementary, analogous, or triadic schemes.
217°
91%
60%
Base
#3B82F6
Complement
#F6AF3C
Click any color swatch to copy its hex value to clipboard.
| Scheme | Colors | Best For |
|---|---|---|
| Complementary | 2 | High contrast, CTAs, emphasis |
| Analogous | 3 | Harmonious, natural, calming designs |
| Triadic | 3 | Vibrant, balanced, playful designs |
| Split-Complementary | 3 | Contrast with less tension |
| Tetradic | 4 | Rich variety, complex designs |
| Monochromatic | 5 | Elegant, cohesive, minimalist |
Formula
Harmonies are fixed hue rotations on the HSL colour wheel, holding saturation and lightnessComplementary = the hue 180 degrees opposite
Triadic = two hues at 120 and 240 degrees, evenly spaced
Analogous = neighbours within roughly 30 degrees, which is why they read as one family
Split complementary = 150 and 210 degrees, the contrast of a complement without the vibration
Did you know? The HSL wheel is not how human vision spaces colour. Yellow at 60 degrees looks far lighter than blue at 240 at the same HSL lightness, so palettes that look balanced on the wheel often fail a contrast check until the lightness is tuned per hue.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.