Complementary color finder
Find the color opposite yours on the hue wheel in one step: pure red #FF0000 gives cyan #00FFFF, with the same saturation and lightness, returned as hex, RGB and HSL. Handy for accents built from a brand color. Free in your browser.
- Free
- Runs in your browser
- No sign-up
- Your data stays on your device
Run — free
Worked example
- Source colour as hex
- #FF0000
- Hex
- #00FFFF
- Hex digits
- 00FFFF
- Resistance (Ω)
- 0
- G
- 255
Designers, front-end developers, and brand teams often need the colour that sits opposite a given swatch on the hue wheel—pairings for buttons and backgrounds, accent tokens from a brand primary, or teaching demos of classical colour theory. This complementary color finder accepts a hex code such as #FF0000 or the short form #f00, an rgb(r,g,b) string, or separate red, green, and blue channels from zero to two hundred fifty-five, converts the source into hue, saturation, and lightness, rotates hue by exactly one hundred eighty degrees while keeping saturation and lightness fixed, and returns the complementary colour as hex, RGB channels, HSL components, and ready-to-paste CSS strings. Invalid colour values—malformed hex, out-of-range channels, or a missing field—fail with a clear invalid input error so bad data never becomes a silent clamp.
Entering a colour and how the opposite hue is computed
Hex input accepts three or six hexadecimal digits with or without a leading hash, so both #FF0000 and FF0000 work, as do short forms such as #f00 and f00. Case is ignored. You may also send an rgb(...) or rgba(...) string, or a bare comma-separated triple such as 255,0,0; when alpha is present it is ignored for the complement calculation.
After the engine resolves the source to integer sRGB channels, it converts to HSL using the same max-min-chroma path used across CSS and graphics stacks: lightness is half the sum of the maximum and minimum normalised channels, saturation is zero for greys and otherwise chroma scaled by the standard HSL formula, and hue is the sector angle in degrees from zero up to three hundred sixty.
The complement is formed by adding one hundred eighty degrees to hue modulo three hundred sixty, leaving saturation and lightness unchanged, then converting that HSL triple back to RGB integers and a six-digit uppercase hex code.
Reading original, complement, and top-level convenience fields
On success the response includes an original object describing the parsed source colour and a complement object describing the opposite colour. The source field records whether the parse used hex, an rgb string, or separate channels. Pure red #FF0000 yields cyan #00FFFF; pure green complements toward magenta; pure blue complements toward yellow.
Achromatic greys keep the same RGB after rotation because saturation is zero—only the reported hue angle advances by one hundred eighty degrees.
What you can do with it
Brand accents from a primary hex
Turn a brand primary into a reliable opposite accent for buttons, charts, and marketing blocks without hand-picking swatches each time.
FAQ
How do I find the complementary colour of a hex code?
The response includes complement.hex (and top-level hex) plus RGB and HSL for the opposite hue.
Can I send RGB channels instead of hex?
Yes. Provide r, g, and b each between 0 and 255, or a string such as rgb(255,0,0). All three channels are required when using channel input.
What happens if the colour value is invalid?
Malformed hex, wrong length, non-hex characters, missing fields, and channels outside 0–255 are rejected and not charged.
Is the complementary color finder free?
The browser tool runs free on your device.
What is the complementary color of grey?
Grey has no saturation, so its complement keeps exactly the same RGB values. Only the reported hue angle moves by 180 degrees; what you see on screen does not change.
Related tools
For developers — API access
Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.
API endpoint
Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.
Call it from your stack
curl -X POST https://api.kit.forhosting.com/color/complementary \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#FF0000","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/complementary", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#FF0000",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/complementary",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#FF0000",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/complementary", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#FF0000","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#FF0000","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/complementary", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Example request
{
"color": "#FF0000",
"hex": "valor-ejemplo"
}Example response
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.complementary",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.
Pricing
Published price — no tokens, no invented credits. A failed task is never charged.
Errors
| HTTP | Code | Meaning |
|---|---|---|
401 | unauthorized | Missing or invalid API key. |
402 | insufficient_balance | Your balance doesn't cover the task price. |
404 | unknown_type | That task type doesn't exist. |
429 | rate_limited | Too many requests. Use the webhook instead of polling. |
Technical notes
Entering a colour and how the opposite hue is computed
Provide either a string field named color (aliases hex, value, colour, and input) or the three numeric channels r, g, and b (aliases red, green, and blue). Channel input requires all three components in the inclusive range from zero to two hundred fifty-five; numbers may arrive as JSON numbers or numeric strings. Identical inputs always produce identical JSON because the path is pure arithmetic with no network, no random seed, and no wall clock.
Reading original, complement, and top-level convenience fields
Each bundle carries hex with a leading hash and six uppercase digits, hex_digits without the hash, r, g, and b channels, h, s, and l for hue in degrees and saturation and lightness in percent, the long names hue, saturation, and lightness, a nested hsl object, and an rgb_css string such as rgb(0, 255, 255). For quick chaining, the same complement values are repeated at the top level as hex, r, g, b, h, s, l, hsl, and rgb_css so UI code and graders can read a flat shape without nesting. The field hue_rotation_deg is always one hundred eighty, and method is always hue_rotate_180 so routers can branch without sniffing shapes. Missing colour data, non-hex garbage, wrong hex length, and channels outside zero to two hundred fifty-five all fail with invalid_input and are not charged after the engine rejects the request.
API usage, pricing, design workflows, and practical limits
Call the free in-browser complementary color finder for palette checks, lecture demos, and brand accent experiments without installing a colour library. Pair complements with contrast checkers when building accessible themes, or feed opposite accents into token pipelines that keep lightness fixed while flipping brand primaries. Authors shipping SDKs can map top-level hex and RGB directly into form controls or CSS custom properties without reimplementing colour parsing and HSL rotation in every language. Send a JSON body with either color set to a hex or rgb string, or r, g, and b set to channel values. Use the prepaid API when a design system, theme generator, e-commerce variant tool, or accessibility pipeline needs a stable contract under KIT balance at $0.002 per successful item; validation failures never consume balance after the engine rejects the request. Prefer this endpoint when search intent is specifically complementary or opposite colour on the hue wheel; for hex to HSL only use the dedicated hex to HSL converter, for RGB to HSL use the RGB to HSL converter, and for multi-format conversion among HEX, RGB, HSL, LAB, and CMYK use the broader colour converter elsewhere in the catalogue.
Integration use cases
Theme and design-token pipelines
Automation that stores colours as hex or RGB derives complementary tokens with deterministic JSON for light and dark theme variants.
Teaching colour theory and grading
Courses and coding assessments check student complementary answers against stable fixtures, with invalid_input when the colour value is malformed.
Technical questions
How is the complement calculated?
The engine converts the colour to HSL, adds 180 degrees to the hue (modulo 360), keeps saturation and lightness the same, then converts back to RGB and hex. method is always hue_rotate_180.