Complementary Color Calculator — Color Schemes from One Base Color

Real-world use cases

• Build a brand palette from a single logo color

  You have one brand hue locked, say a teal #06b6d4, and need a full palette around it. Drop it in as the base and read the analogous trio for backgrounds, the complement for a call-to-action accent, and the monochromatic ramp for hover and pressed states. Copy all the HEX at once into your design tokens and you have a coherent set sourced from a single decision instead of eyeballing six separate pickers.

• Pick an accent color for a UI that already has a primary

  Your app's primary is set and a button needs to stand out without clashing. Paste the primary, look at the split-complementary pair rather than the straight complement, and you get an accent that contrasts strongly but stays in the same family. The HSL readout next to the base lets you nudge lightness so the accent passes your text contrast check before you commit it.

• Plan an illustration or poster color scheme

  Starting a poster with one dominant color, you want a scheme that feels intentional. Try triadic for a bold three-way balance, or analogous for a calm sunset-style blend. The SVG wheel shows exactly where the three hues land, so you can see the geometry of the harmony before you paint a single shape.

• Teach color theory with a live wheel

  Explaining complementary, triadic and analogous to a class is far easier when students can rotate a base color and watch every scheme update in real time. Share the URL with the base color baked in and everyone opens the same starting wheel, then experiments from there without installing anything.

Common pitfalls

• Confusing the complement with "just a darker or lighter version". The complement is a hue rotation of 180°, not a brightness change. Darkening red gives maroon, still red in hue; the complement of red is cyan. Use the monochromatic strip when you want lighter or darker, and the complementary scheme when you want the opposite hue.

• Using a full-strength complementary pair across large areas. Two saturated opposites side by side at full size vibrate and tire the eye. Treat the complement as a small accent, the 10% in a 60/30/10 split, rather than painting half the screen in each.

• Forgetting to check text contrast separately. A harmonious scheme is about hue relationships, not legibility. Two colors can sit perfectly across the wheel and still fail WCAG contrast as text on background. Run the actual pair through a contrast checker before shipping any text color.

Privacy