Color Schemes
Complementary, analogous, triadic, and more scheme types
Color Scheme Generator
A color scheme is a set of colors chosen based on their position on the color wheel. By following mathematical relationships between hues, you can create harmonious palettes that work well together. Pick a base color to generate all scheme types:
Two colors opposite on the wheel (180° apart). Creates maximum contrast and visual tension.
Example: Button on background
Three adjacent colors (±30°). Creates serene and comfortable designs.
Three colors equally spaced (120° apart). Vibrant even with pale or unsaturated versions.
Base color + two colors adjacent to its complement (150° and 210°). Less tension than complementary.
Four colors evenly spaced (90° apart). Rich palette, but requires balance.
Same hue, different lightness levels. Clean, elegant, and always harmonious.
Card Title
Subtitle text using a lighter variant of the same hue.
Choosing the Right Scheme
| Scheme | Best For | Feeling |
|---|---|---|
| Complementary | CTAs, highlights, emphasis | Bold, energetic |
| Analogous | Backgrounds, organic themes | Calm, harmonious |
| Triadic | Illustrations, infographics | Vibrant, playful |
| Split-Complementary | Beginners, safer contrast | Balanced, nuanced |
| Tetradic | Rich, complex designs | Diverse, dynamic |
| Monochromatic | Clean UI, text hierarchy | Elegant, cohesive |
rgbToHsl() and hslToHex() from the color utilities. The hue is shifted by the required degrees to find harmonious colors on the wheel.