Colour inverter — the negative of any HEX or RGB colour

How to use the colour inverter

1. Enter the Colour: HEX (3, 4, 6 or 8 digits), rgb(), hsl(), a CSS name or the picker.
2. Read the Inverted HEX value, with its RGB and HSL forms.
3. Compare the original and inverted swatches.
4. To invert a whole element or image on a web page instead, use the CSS line shown: filter: invert(100%).

What it does and when to use it

Inverting a colour gives its negative, as on old photographic film: black becomes white, blue becomes yellow-orange, dark becomes light. Developers use it to predict what filter: invert(100%) will do, a trick some sites use for quick dark modes or for flipping a dark icon to light. It is also useful for making a cursor, crosshair or selection colour that stands out on top of a known background colour.

For an opposite that keeps the same lightness, use the complementary colour finder instead. To make a lighter or darker version of the same colour rather than its negative, try lighten / darken. For a grey version, the grayscale converter offers several methods.

How it works

Each channel of the colour, on the 0–255 scale, is replaced by 255 minus itself:

R′ = 255 − R, G′ = 255 − G, B′ = 255 − B

Alpha is not changed. The CSS filter invert(100%) applies the same formula to every pixel of an element, so a single colour gives the same result either way.

Worked examples

These are the inverter’s own outputs.

Deep blue #1e40af. Inverted: #e1bf50, rgb(225, 191, 80), hsl(45.9, 70.7%, 59.8%), a warm gold.

Middle grey #808080. Inverted: #7f7f7f. One step darker, and almost no visible change.

Translucent blue #3b82f680. Inverted: #c47d0980, rgba(196, 125, 9, 0.502). The colour flips; the 50% alpha stays.

Limits and tips

• Inverting a whole interface flips photos and brand colours too; real dark themes need their own palette.
• Contrast with the original is lowest for mid-tones, so check it in the contrast checker.
• Nothing leaves your browser.