Learn how colors work together to create stunning palettes for your designs
Use dominant color 60%, secondary 30%, accent 10% for balanced designs
No color looks the same next to different colors - test your palette in context
Warm colors advance, cool colors recede. Use this for depth in your designs
3-4 colors is usually enough. More creates visual chaos and user confusion
The pure color on the wheel - red, orange, yellow, green, blue, purple
Range: 0-360°
How vivid or muted a color appears - colorful vs. gray
Range: 0-100%
How light or dark a color is - bright vs. dark
Range: 0-100%
Colors directly opposite on the color wheel
Best for: High contrast, dynamic designs, call-to-action buttons
Tip: Use one color as dominant and the other for accents. Too much can feel jarring.
Colors adjacent to each other on the color wheel
Best for: Harmonious, serene, comfortable designs
Tip: Create a natural color flow. Works well for backgrounds and subtle UI elements.
Three colors equally spaced on the color wheel
Best for: Vibrant, playful designs with balanced contrast
Tip: Let one color dominate and use the others as accents for balance.
A color plus the two adjacent to its complement
Best for: High contrast with less tension than complementary
Tip: Easier to use than complementary while still offering strong visual impact.
Four colors arranged in two complementary pairs
Best for: Rich, varied palettes for complex interfaces
Tip: Hardest to balance. Choose one dominant color and keep others subtle.
Different shades and tints of a single color
Best for: Clean, modern, minimalist designs
Tip: Always looks cohesive. Great for creating depth without color clash.
Use these color theory principles to generate beautiful palettes with ColorStory
Go to Dashboard