Aqeeb Studio

Palettes & Harmony

Complementary Color Generator

Enter a color to find its complement, the color exactly opposite it on the wheel. The complement of royal blue #4169E1 is #E1B941.

Open in the palette generator

Your colors and images stay in your browser. Nothing is uploaded or stored on our servers.

How to use the Complementary Color Generator

  1. Pick a base color with the color square or type a HEX, rgb() or hsl() value.
  2. The wheel marks the base color and its complement, and the swatches show both with HEX codes and the closest color names.
  3. Copy a code, or export the pair as CSS, JSON or CSS variables.
  4. Open the palette generator to build a fuller palette around the pair.

Examples

Blue and gold

Royal blue has a hue of 225°. Adding 180° gives 45°, so its complement is the warm gold #E1B941.

Using the pair

Use one color as the main color and the other as a highlight, for example a blue interface with a gold call-to-action button.

Softening a strong pair

Full-strength complements can vibrate when they touch. Let one dominate, or use a tint or shade of the complement for larger areas.

Tips

  • Try the pair at different sizes: complements work best with one large area and one small accent.
  • Add a neutral such as white, gray or near-black so the pair has room to breathe.

Questions about the Complementary Color Generator

What is a complementary color?

It is the color directly opposite another on the color wheel, 180° away in hue. Complementary colors give the strongest hue contrast available.

Why do complementary colors look so strong together?

They differ as much as two hues can, so each makes the other look more intense. Used in small amounts, that contrast draws the eye.

Is the complement the same as the artist's opposite?

Not always. This tool rotates the hue by 180° on the digital HSL wheel. Traditional painter's wheels use a different model, such as red with green and blue with orange, so their pairs can differ.

Is a complementary pair good for text?

Not by itself. Two colors can look very different in hue and still have little difference in brightness. Test any text pair in the contrast checker.

Split Complementary Generator

Get a base color plus the two colors beside its complement.

Analogous Color Generator

Find the neighboring colors that blend smoothly with any color.

Color Palette Generator

Generate harmonious palettes and export them as CSS, JSON, SVG or PNG.

Color Picker

Pick any color and copy its HEX, RGB, HSL and CMYK values.