Color to CSS Variables
Turn a palette into CSS custom properties, Tailwind tokens or Sass.
Find the true complement of any colour, and the near ones.
The colours appear here
The Complementary Color Finder gives you the true opposite of a colour and the split-complementary pair beside it, each drawn as real interface elements and scored for contrast — because a striking pair of swatches is often an unusable pair of colours.
The complement of a colour is the one directly opposite it on the wheel — 180 degrees of hue away — and it produces the strongest contrast two hues can have. This finds it for any colour you give it, and shows the near-complements alongside.
The near ones are usually the better answer. A true complementary pair is intense to the point of being uncomfortable across any large area, because the eye cannot settle on an edge where the two meet. Split complementary — the two colours either side of the true opposite — keeps almost all the contrast without the vibration, which is why it is the scheme most designs actually use.
Because a complement is only useful if you can put text on it, every pairing here is scored for contrast as well, and shown as a real interface sample rather than two squares: a button on a background, a heading over a panel. That is where a pairing that looks striking as swatches often turns out to be unusable.
The two colours either side of the true opposite, which keep the contrast without the vibration.
A button on a background, a heading over a panel — where a pairing that looked striking often falls apart.
Complementary does not mean readable. Two opposites at equal lightness score close to 1:1, and the tool says so.
Why complementary pairs at equal lightness shimmer, and the one change that removes it.
Any single colour, or the whole set as CSS.
A brand colour, or anything you are building around.
The true opposite, with the split complementary pair beside it.
Each combination is drawn as real interface elements and scored for contrast.
Copy any swatch, or the whole scheme as CSS.
On the RGB wheel the screen uses, it is cyan. On the red-yellow-blue wheel taught in art classes, it is green. Both are right within their own model; this tool uses the RGB wheel, because that is what a screen actually displays.
Because at equal lightness the eye has no luminance edge to focus on, only a hue edge, which it cannot resolve cleanly. Changing the lightness of one of them removes the effect entirely.
Almost always, for anything larger than an accent. It keeps the contrast that makes a complement useful while removing the tension, and it gives you three colours to work with rather than two.
No, and this is the common trap. Contrast for accessibility is about lightness, not hue. Two complements at the same lightness score barely above 1:1 and are unreadable, which is why every pairing here is scored.
What people who use the Complementary Color Finder think of it. Reviews come from visitors and are posted as written.
No ratings yet
Yours would be the first.
0 reviews
Newest first
No reviews yet
Be the first to rate the Complementary Color Finder. It takes half a minute and no account.
Write the first reviewTurn a palette into CSS custom properties, Tailwind tokens or Sass.
Turn an RGBA colour into an 8-digit HEX code, or flatten the alpha away.
Convert LCH to HEX and RGB — LAB in polar form, as CSS uses it.
Build a whole palette from one hue, and nothing else.
Convert colour temperature in kelvin to an RGB colour.
All 148 CSS colour names, searchable and sortable.
An interactive colour wheel with every classical harmony.
Work out whether black or white text belongs on any colour.