Super Boring Tools

Search tools

Find a tool by name or what it does.

Complementary Color Calculator

Enter a color and get its exact opposite on the color wheel, with copyable codes.

HEX, RGB, or HSL, or pick a color. Everything runs in your browser. Nothing is uploaded.

Complementary pair
#2563eb
#ebad25

Contrast between the pair: 2.59:1. Complementary colors share lightness, so use them for accents, not text on background.

Base color
HEX#2563eb
RGBrgb(37, 99, 235)
HSLhsl(221, 83%, 53%)
Complement
HEX#ebad25
RGBrgb(235, 173, 37)
HSLhsl(41, 83%, 53%)
CSS pair
:root {
  --color-base: #2563eb;
  --color-complement: #ebad25;
}

How to find a complementary color online

  1. Enter a base color

    Type or paste a HEX, RGB, or HSL value, or use the color picker.

  2. Read the pair

    The complement appears instantly next to the base color as a side-by-side swatch.

  3. Copy the codes

    Copy the HEX, RGB, or HSL value of either color, or copy the ready-made CSS variable pair.

Why use this tool

Accepts HEX, RGB, and HSL

Paste #2563eb, rgb(37, 99, 235), or hsl(221, 83%, 53%) in any common spelling, with commas, spaces, or shorthand 3-digit hex.

True 180 degree complement

The hue is rotated exactly half way around the color wheel while saturation and lightness stay untouched.

Three formats per color

Both the base and the complement are shown as HEX, RGB, and HSL with a one-click copy button on every value.

Ready-made CSS pair

A copyable block of CSS variables gives you --color-base and --color-complement, ready to drop into a stylesheet.

Contrast readout included

The tool reports the contrast ratio between the pair so you know it is an accent pairing, not a text pairing.

Runs entirely in your browser

Colors are calculated on your device. Nothing is uploaded and there is no signup.

About this tool

A complementary color sits directly opposite a base color on the color wheel. This calculator finds it by rotating the hue of your color exactly 180 degrees while keeping its saturation and lightness the same, so a vivid blue returns an equally vivid orange and a muted teal returns an equally muted coral. You can enter the base color as a HEX code, an rgb() value, or an hsl() value, or pick it visually, and the pair updates as you type.

Complementary pairs are the highest-tension pairing in color theory, which makes them useful for accents, calls to action, warnings against a brand color, and anywhere one element needs to stand out from another. Because both colors share the same lightness, the pair usually has a low contrast ratio, so the tool shows that ratio and reminds you that complements are for accents rather than text on a background. Greys are a special case: with no saturation there is no hue to rotate, so a grey is its own complement, and the tool says so instead of pretending otherwise.

Each color in the pair is listed as HEX, RGB, and HSL with individual copy buttons, and the main action copies both as CSS variables. If two colors are not enough, try the analogous color generator for neighbouring hues, the triadic color generator for a three-color scheme, or explore hues interactively on the color wheel.

Frequently asked questions

How is the complementary color calculated?
The base color is converted to hue, saturation, and lightness. The hue is rotated 180 degrees, the exact opposite point on the color wheel, and converted back. Saturation and lightness are preserved, so the complement matches the intensity of the original.
What color inputs are supported?
HEX codes with or without the leading # (including 3-digit shorthand), rgb() values with numbers or percentages, and hsl() values. Commas, spaces, and slashes all work as separators.
What is the complement of a grey?
The same grey. Greys have zero saturation, so they have no hue to rotate. The tool returns the grey unchanged and notes why.
Can I use a complementary pair for text and background?
Usually not. Complements share the same lightness, so their contrast ratio is typically far below the 4.5:1 needed for readable body text. The tool shows the actual ratio for your pair. Use complements for accents and pair text with a much lighter or darker color instead.
Is my color data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools