ProToolBox

Complementary color from any base HEX

See the opposite hue (180°): large base and complement swatches, a contrast hint, and copy-ready rgb(), hsl(), and CSS variables. No signup—runs in your browser.

Complementary color - live opposite hue from base HEX

Your base plus its opposite on the wheel (180°). Saturation and lightness stay matched—strong pairs for accents, links, or split layouts without hand math.

1 Pick base · 2 Read the pair · 3 Tap for HEX or rgb()/hsl() · 4 Copy results

Your result

Try #3366CC or short #36C. Large cards copy HEX; smaller tiles copy rgb() / hsl(). Putting text on these colors? Contrast checker.

Quick bases

Updates live as you edit.

Change the base—the pair, contrast line, and copy rows update together.

Next: Harmonies · Gradient · HEX → RGB · Palette · All tools

  • Runs in your browser—nothing uploads
  • Free, no account
  • Your colors stay in this tab

When to use it

Fast complement checks while you tune brand color, UI, or slides.

  • Pair a main brand color with a bold accent
  • Paste HEX or CSS variables into your stylesheet or tokens
  • Check contrast before you use the pair for body text

Use beside Figma or code—your eyes still decide what ships.

Bookmark for quick “what’s the opposite of this HEX?” without reopening a design app.

Overview

The complement is opposite your base on the hue wheel (180°). We keep saturation and lightness tied to your base so the two colors feel related. Great for accents and split layouts—then use the contrast checker if text is involved.

How to use it

  1. Set base with the picker, HEX field, or a sample chip.
  2. Read the two large swatches and the contrast line between them.
  3. Tap a card for HEX or a tile for rgb()/hsl(); Copy color results grabs the full bundle.
  4. Need more hues? Try harmonies or gradients.

Privacy: Colors are processed in your browser only—we do not upload them.

FAQ

  • Match Figma or Chrome? Same idea as standard hue math—spot-check in your app if pixels must match.
  • Account? No.
  • Upload? No—values stay in this tab.
  • Phone? Picker, field, and swatches work on small screens.
  • Real CSS? Paste HEX, rgb(), hsl(), or the variable block into your CSS or tokens.

Keep this tab handy for mid-project color checks.

Tools in this category