Color Inverter Calculator

An inverted color is R, G and B each subtracted from 255

Inverting a color flips the red, green and blue values to the opposite end of their range. Each value runs from 0 to 255, so the inverted value is 255 minus the original. The example color #3498DB is RGB(52, 152, 219); inverted it becomes RGB(203, 103, 36), which is #CB6724. The negative effect in photo editors and the CSS filter: invert(1) do the same calculation.

The calculator above shows the inverted color in HEX, RGB and HSL as soon as you enter a color code. It also measures the contrast ratio when the original and the inverted color are used as each other's text color, and compares the inverse with the complementary color and with a color where only the lightness is flipped. Enter several colors at once and they go onto a film strip, originals on top and inverses below.

How to use the calculator

1. In the color field, enter a HEX code such as #3498db, 3498db or #fff, or a CSS notation such as rgb(52, 152, 219), hsl(204 70% 53%) or tomato. Three plain numbers (52 152 219) are read as RGB. The swatch at the right end of the field opens a color picker.
2. The large text in the result is the inverted color. The small characters above each digit are the original digits, so you can see how every hex digit was flipped. The buttons at the right of the HEX, RGB and HSL lines copy the format you want.
3. In the mirror panel the left half is the original and the right half is the inverted color. The "Aa" on each swatch is painted in the opposite color, so you can see at a glance how readable the inverse is as a text color. The number in the middle is the contrast ratio of the two colors.
4. Drag a bar in the channel mirror or change a number to change the original color. The hollow circle is the original value and the filled circle is the inverted value; they always sit the same distance from the center line, on opposite sides.
5. Paste several colors separated by commas, spaces or line breaks and up to 12 go onto the film strip at once. "Copy all inverted HEX" copies the list of inverted colors, one per line.

How it is calculated: subtract from 255, or subtract each hex digit from F

A HEX code writes the red, green and blue values as hexadecimal, two digits each. Inversion therefore takes three steps: convert each pair to decimal, subtract it from 255, and write the result as two hex digits again.

You do not need to convert to decimal. 255 is FF in hexadecimal, so subtracting a two-digit value from FF is the same as subtracting each digit from F, with no borrowing. Once you know the pairs below, you can invert #3498DB to #CB6724 in your head.

The pairs work both ways: 8 becomes 7 and C becomes 3.

3-, 4- and 8-digit HEX and opacity

CSS accepts hexadecimal colors with 3, 4, 6 or 8 digits. The 3-digit #F0F is the same as #FF00FF with every digit doubled, so subtracting each digit from F gives #0F0 (= #00FF00), again with 3 digits. The last digit of a 4-digit code and the last two of an 8-digit code are opacity (alpha). Inversion flips only the color and leaves the opacity alone, so the inverse of #3498DB80 is #CB672480. The CSS invert() filter also changes only red, green and blue and does not touch alpha.

Inverted colors and contrast ratios of common colors

The contrast ratio is the difference in brightness between the two colors, measured with the WCAG formula, when one is used as background and the other as text. The verdict uses 4.5:1 (AA, body text), 3:1 (large text) and 7:1 (AAA); a value that falls slightly short is never rounded up.

No color has an inverse identical to itself, as the pair #808080 and #7F7F7F shows. Because 255 is odd, no integer satisfies x = 255 − x. The closest pair is #808080 and #7F7F7F, which differ by only 1 in each of the three values.

The inverse is the complement plus a lightness flip

People often use "inverse" and "complement" as if they meant the same thing, but they differ, and HSL (hue, saturation, lightness) makes the difference clear. When you invert RGB, the largest and smallest values swap places, so the color moves exactly 180° around the color wheel, the lightness L becomes 100% − L, and the saturation stays the same. The complement turns only the hue by 180° and keeps the lightness.

The "Compared with the complementary color" panel shows these four colors as a 2×2 grid. Colors on opposite corners are inverses of each other: the inverse of the original is the inverse color, and the inverse of the complement is the "lightness only" color. A color whose lightness is exactly 50% (pure hues such as #FF0000 and #0000FF, or #CC3333) keeps 50% when the lightness is flipped, so its inverse and its complement are the same. A gray, by contrast, has no hue, so its complement is itself and inverting it changes only the lightness.

An inverted color is not always easy to read

It is easy to assume that an opposite color means high contrast, but contrast depends on the difference in lightness, not on hue. A color of middle lightness stays at a similar lightness after inversion. The example #3498DB and its inverse #CB6724 are opposite in hue, blue against orange, yet their contrast ratio is only 1.20:1, so text of one on the other is almost unreadable.

Grays show where the boundary lies. A gray of #484848 or darker, or #B7B7B7 or lighter, differs from its inverse by 4.5:1 or more and can serve as body text. Grays from #585858 to #A7A7A7 do not even reach 3:1. Colored shades follow the same pattern: only very light or very dark colors work well as a text and background pair with their inverse. If you need to tune the contrast of text on a background separately, check it in an accessibility contrast checker.

Do not use a plain inversion for dark mode

If you invert colors as they are to turn a light screen into a dark one, the hue flips along with the lightness. A blue button turns orange and a green success mark turns magenta, which blurs what they mean. That is why the invert feature on phones comes in two kinds. Apple Support says that Smart Invert reverses the colors on the display, except for images, media and some apps that use dark color styles, while Classic Invert reverses all colors on the display.

When designing, a better starting point is a color that keeps its hue and flips only its lightness. That is the "Lightness only" cell in the calculator. In CSS, filter: invert(1) hue-rotate(180deg) gives a similar effect, but only as an approximation. hue-rotate() is not an HSL hue rotation but a matrix that mostly preserves brightness, so the result varies a lot with the original color.

A pure color with 50% lightness stays the same when its lightness is flipped, yet the CSS combination turns red into light pink and blue into a very pale lavender. Photos and logos get flipped as well, so it is safer to use the filter only on single-color elements such as icons and to set the other colors separately.

Inverting with CSS, Excel and code

• CSS: filter: invert(1) (or 100%) inverts every color of an element the same way this calculator does. The W3C specification has filter functions work in the sRGB color space, and the default value is 1. Values between 0 and 1 blend between the original and the inverse; at 0.5 every channel becomes the middle value, so any color turns gray (#808080).
• JavaScript: for a 6-digit HEX string h (without the #), invert it with '#' + (0xFFFFFF ^ parseInt(h, 16)).toString(16).padStart(6, '0'). An exclusive OR (XOR) with FFFFFF is the same as subtracting each digit from F.
• Python: '#%06x' % (0xFFFFFF ^ int(h, 16)) gives the same value.
• Excel: if cell A1 holds #3498DB, =DEC2HEX(16777215-HEX2DEC(SUBSTITUTE(A1,"#","")),6) returns CB6724. 16777215 is FFFFFF written in decimal, and the last argument, 6, pads the result with leading zeros to six digits.

Common mistakes

• Using the inverse as the complement: inversion flips the lightness too. If you need the opposite hue at the same lightness, use the complement. The two are the same only when the lightness is 50%.
• Assuming the inverse always has enough contrast: a color of middle lightness has a contrast ratio close to 1:1 with its inverse. Always check the contrast before using the two as text and background.
• Inverting an 8-digit HEX as a whole: the final 80 in #3498DB80 is opacity. Subtracting all eight digits from F gives #CB67247F, which changes the opacity as well. Invert only the first six digits.
• Subtracting RGB values from 256: values run from 0 to 255, so the base is 255. Subtracting from 256 turns 0 into 256, which is out of range.
• Treating CSS invert(1) hue-rotate(180deg) as an exact "lightness only" flip: it is an approximation, and red #FF0000 becomes #FF9292, for example.
• Mixing up photo inversion and color-code inversion: this calculator inverts color codes. To turn a whole photo into a negative, use the invert function of an image editor or a CSS filter; the principle is the same.

Limits and cautions

• Inversion is based on 8-bit sRGB (0 to 255). For colors that go beyond sRGB, such as display-p3 or oklch, the browser's sRGB conversion is what gets inverted.
• HSL values, the complement and the "lightness only" color are rounded after decimal calculation, so converting an HSL value back to RGB can differ by about 1.
• The contrast ratio is calculated for two opaque colors with opacity left out. A translucent color depends on the background it actually overlaps.
• Only the 148 standard CSS color names are recognized. Enter names with spaces such as "dark blue", or names that are specific to a design tool, as HEX.

Basis: the inversion matches the invert() definition in the W3C Filter Effects Module Level 1, and the contrast ratio follows the relative luminance and contrast ratio definitions in WCAG 2.2. The CSS filter values in the table were checked in a Chromium browser on October 20, 2026.

Sources

• 01W3C — Filter Effects Module Level 1invert() uses tableValues amount and 1 − amount per channel, leaves alpha unchanged, filter functions work in sRGB, default 1, hue-rotate() is an feColorMatrix matrix
• 02W3C — Web Content Accessibility Guidelines (WCAG) 2.2Contrast ratio (L1 + 0.05) / (L2 + 0.05) and the relative luminance formula
• 03W3C — Understanding SC 1.4.3 Contrast (Minimum)4.5:1 for body text, 3:1 for large text, calculated values are not rounded (4.499:1 is not 4.5:1)
• 04W3C — CSS Color Module Level 4Hex notation with 3, 4, 6 and 8 digits, the last two digits are alpha, RGB and HSL conversion formulas
• 05MDN — invert()100% is a full inversion, 0% leaves the color unchanged, default 1
• 06Apple Support — Use display and text size preferences on your iPhone, iPad, and iPod touchThe difference between Classic Invert and Smart Invert
• 07Microsoft Support — DEC2HEX functionDEC2HEX with the number and an optional places argument that pads with leading zeros

Frequently asked questions

Tools to use together