About Color Scheme Generator

Complementary, analogous, triadic, tetradic & split-comp schemes from a base color. Part of the DevTools Surf developer suite. Browse more tools in the Color collection.

Use Cases

• Derive a brand palette from a single primary color
• Explore color-theory harmonies for UI designs
• Pick accent colors for charts and data viz
• Generate dashboard accent palettes from a single hero color

Tips

• Accepts #hex, rgb(), and hsl() inputs
• Shows 10 schemes: complementary, analogous ±30, triadic, tetradic, split-complement
• Hue rotation keeps saturation and lightness constant

Fun Facts

• Color theory from Isaac Newton's 1704 'Opticks' gave us the first color wheel. The 12-segment wheel we use today was refined by Johann Wolfgang von Goethe in 1810.
• The complementary color scheme (opposite sides of the wheel) creates maximum contrast — it's why blue/orange is the most common movie poster color combination.
• Triadic color schemes are used by nearly every major fast food brand (McDonald's: red/yellow, Burger King: red/yellow/blue) because they are simultaneously vibrant and balanced.

FAQ

How many scheme types?

Five — complementary, analogous, triadic, tetradic, split-complementary. Each based on proven color-theory rules.

What's split-complementary?

Instead of one complement, use the two colors adjacent to it. Softer than true complementary but still high contrast. A good 'safe' choice for beginners.

Does it consider cultural color meanings?

No — red means 'stop' in Western cultures but 'prosperity' in many Asian cultures. Color meaning is a design decision layered on top of the scheme.

Can I export to Figma/Sketch?

Copy as CSS variables or JSON. For direct design-tool import, paste the hex codes into a Figma color style or Sketch color variable.