โ Frequently Asked Questions
What is color harmony in design?
Color harmony refers to the use of colors that are pleasing to the eye when used together. These relationships are defined on the color wheel. Complementary colors (opposites) create bold contrast. Analogous colors (neighbors) feel serene. Triadic colors create vibrant balanced palettes. Understanding harmony helps designers create professional, visually coherent work.
How do I use CSS custom properties for colors?
Define color variables in your :root selector, then use them throughout your CSS with var(). Example: :root { --color-primary: #1a73e8; } Then use: button { background: var(--color-primary); }. CSS variables (custom properties) make it easy to maintain consistent colors across a large codebase and enable theming by swapping variable values.
How many colors should a design palette have?
Most professional design systems use 5โ10 colors: 1 primary brand color, 1โ2 accent/secondary colors, neutral grays for text and backgrounds, and semantic colors for success/warning/error states. For a simpler project, 3โ5 is plenty. This generator gives you 5 harmonious colors you can use as your full palette, with the base color as your primary.