Search for "inverted color chart" and you'll usually land on a table: red becomes cyan, blue becomes yellow, and so on. Those charts are accurate for the exact color they list — but most of them skip an important caveat: the "common colors" in the chart are one specific shade each, out of dozens that share the same name in everyday language.
The math behind every entry in a chart like this
Every row comes from the same formula, applied per channel:
R' = 255 − R G' = 255 − G B' = 255 − BThere's no lookup table involved — a chart is just this formula pre-computed for a fixed list of colors. That means you can reconstruct any row yourself, and more usefully, compute the inverse of a color that isn't on the list at all.
Two worked examples
Brown, #A52A2A (RGB 165, 42, 42): 255−165, 255−42, 255−42 → RGB(90, 213, 213) → #5AD5D5, a bright teal.
Forest green, #228B22 (RGB 34, 139, 34): 255−34, 255−139, 255−34 → RGB(221, 116, 221) → #DD74DD, a light orchid pink.
Notice both of these produce results with two matching channels, because both source colors have two matching channels themselves (brown's R and B differ from G; forest green's R and B are identical). Inversion preserves that kind of channel symmetry — it's a useful sanity check when you're inverting colors by hand.
Why "brown inverted" isn't one answer
CSS alone ships with a dozen-plus browns, greens, and blues — saddlebrown, sienna, chocolate, peru, forestgreen, darkgreen, seagreen, and more, each with different RGB values and therefore different inverses. A chart can only show one of them. If your actual brown, green, or blue is a custom brand color rather than a CSS keyword, none of the rows in any pre-built chart will match exactly — the formula is what actually answers your question, not the specific list of colors someone chose to publish.
This is also why two different "inverted color chart" pages online can disagree with each other: they picked different shades to represent the same color name, not because the math is different.
RGB inverse vs. HSL complement, briefly
A reference chart almost always shows the RGB inverse, because it's a single deterministic formula. The HSL hue complement — rotating hue by 180° instead of flipping each channel — is a different calculation that can produce a different result for the same input, especially for colors that aren't fully saturated. Inverted Colors Explained covers the formula difference and when each one is the right choice in more detail.
Practical uses beyond curiosity
Design QA: confirming what a "negative" or "invert" filter will actually produce before applying it to a whole image or UI theme.
Dark-mode starting points: an inverted brand palette is a rough sketch of a dark theme, not a finished one — lightness and saturation usually need manual adjustment afterward.
Accessibility spot-checks: comparing a color against its inverse can surface poor-contrast pairs early, though contrast still needs to be measured directly rather than assumed.
Get the exact inverse for your own color
Rather than searching for your specific shade in someone else's chart, enter it directly into the Color Inverter. It calculates the RGB inverse and HSL complement for any HEX, RGB, or HSL value — including custom brand colors that will never appear on a generic chart — and shows both results with contrast information side by side.
Tools mentioned in this guide
