colour tool
Complementary colour finder
Enter a colour and this complementary colour finder shows the colour opposite it on the OKLCH hue wheel, the two split complementary colours either side of that, and an accent of the opposite hue that passes WCAG contrast against your colour. A live preview puts the accent on your colour as a heading and a button.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Enter your colour
Type a value or use the swatch picker. The three cards and the preview update as you type.
- 2
Read the complement and the split pair
The large card is the complement, with its contrast against your colour. The two smaller cards are the split complementary pair.
- 3
Choose the accent target
Pick 4.5 to 1 for body text, 3 to 1 for large text and icons, or 7 to 1 for AAA. The accent card shows the nearest passing lightness of the opposite hue.
- 4
Check the preview, then copy
The preview sets your colour as the background with the accent as heading and button. Copy any hex with its Copy button.
What complementary means here
Complementary colours sit opposite each other on a colour wheel, so they contrast as strongly as two hues can. This finder turns your colour 180 degrees round the OKLCH hue wheel and keeps its lightness, and keeps its chroma as a share of what the new hue can reach on a normal screen. The split complementary pair sits 30 degrees either side of the complement, at 150 and 210 degrees, which gives contrast with less tension than the direct opposite.
Three wheels, three answers
There is no single colour wheel. The painter's RYB wheel pairs red with green and blue with orange. The HSL wheel used by most web tools pairs pure red with cyan. The OKLCH wheel used here is spaced by perception, so its opposites tend to be balanced in visual weight. The note under the tool gives the HSL complement as well, so you can see how far the two wheels disagree for your colour.
Why the accent is not the plain complement
A complement at the same lightness has hue contrast but often very little luminance contrast, and WCAG measures luminance. Orange on blue at equal lightness vibrates at the edges and fails as text. So the accent card walks the lightness of the opposite hue, nearest first, until the pair clears your target. The result keeps the complementary hue and is readable as a heading, a link or a button label.
Accents in a deck or a form
Slides, flyers, forms, documents and videos can take an Accent colour from the brand kit in Settings, alongside a Primary and a Secondary, through a Your brand group in each theme picker. The slide theme picker also lists 99 built in themes. A complementary accent works best in small amounts: one chart series, one call to action, one key figure per slide.
Limits worth knowing
Everything here is on the OKLCH hue wheel, not the RYB wheel painters use, so results differ from art class pairs. A grey has no hue and no complement, and some mid lightness colours have no opposite hue accent that reaches the higher targets. Nothing leaves this page: it is arithmetic in your browser, nothing is uploaded and nothing is stored, ever.
Limits
- Computed on the OKLCH hue wheel, not the painter's RYB wheel, so it differs from the red and green, blue and orange pairs taught in art class.
- A neutral grey has no hue and so no complement.
- A mid lightness colour may have no accent of the opposite hue that reaches 4.5 or 7 to 1; the tool says so instead of guessing.
What it does not do
- It does not build a full palette. The colour palette generator does that from the same seed.
- It does not check text sizes. The contrast checker shows a pair at six sizes.
- It does not use the RYB wheel at all, so it cannot give painting advice.
Questions people ask
What is the complementary colour of red?
On the OKLCH wheel used here, pure red pairs with a blue green close to teal. The HSL wheel gives cyan, and the painter's RYB wheel gives green. All three are reasonable answers to different questions. For screen design, the OKLCH answer tends to look the most balanced, because the wheel is spaced by how strongly each hue is perceived.
Should a complementary colour be used for text?
Only when it also differs in lightness. Two complementary colours at similar lightness vibrate where they meet, which is tiring to read. The accent card solves that by changing the lightness of the opposite hue until the pair reaches your contrast target. Use the plain complement for shapes, highlights and illustration rather than for words.
Is split complementary easier to use than complementary?
Usually. The two split colours are softer partners than the direct opposite, and having two of them gives more options: one for buttons and one for highlights, for example. Designers often reach for it when a direct complement feels loud. The trade off is a less striking result, which suits most business documents.
How much of the accent colour should a design use?
A common rule of thumb is 60, 30 and 10: about 60% for the main or neutral colour, 30% for a supporting colour, and 10% for the accent. The accent marks the one thing you want noticed, such as a button or a key number. Used everywhere, it stops pointing at anything.
Why does the HSL complement in the note look so different?
HSL spaces its hues evenly by the numbers, not by perception. Some stretches of the HSL wheel, around green and cyan, look almost the same to the eye, while others change quickly. Turning 180 degrees in HSL can therefore land somewhere that feels far from opposite. OKLCH was designed to correct that.
Build a deck with this accent
Take what you made here into presentations.
Create a presentation with OneCraftMore tools like this
- Colour palette generatorColour palette generator: pick one seed colour and get monochrome, analogous, triadic and split palettes with hex, RGB, HSL and a WCAG text check.
- Colour contrast matrixColour contrast matrix: paste 2 to 12 colours and see every pair's WCAG ratio with AA and AAA marks, and which pairs are safe for body text.
- Colour name finderColour name finder: enter a hex or RGB value, or pick from the screen, and get the nearest CSS colour name and the nearest of 1,566 named colours.
- Contrast checkerSet a text colour and a background and read the WCAG ratio on a live specimen, with a pass or fail attached to every size from 30px down to 13px.
- Colour blindness simulatorColour blindness simulator: see an image or a palette under protanopia, deuteranopia, tritanopia and achromatopsia side by side, on your own device.
Background reading: the question page on this.
Written and checked by the OneCraft team. Last checked .