Invert any color two ways: the classic RGB inversion (255 minus each channel — what CSS filter: invert(1) does) or a perceptual lightness flip in OKLCH that keeps the hue while swapping light for dark. See both the original and result side by side with their contrast ratio.
Settings
Generated locally in your browser — your settings and results never leave this page.
Two meanings of “opposite”
Invert a color and you might want either of two things: the mathematical negative (each channel flipped to 255−value — what photo negatives and CSS filter: invert(1) produce) or the perceptual opposite in lightness only (dark where it was light, same hue — what dark-mode thinking usually wants). They differ dramatically: the RGB negative of a light blue is a dark orange; its lightness flip is a dark blue. This tool computes both and shows them side by side, because asking “which inverse do you mean?” is the entire skill.
The RGB negative, characterized
Channel inversion swaps light for dark and every hue for its additive opposite simultaneously. It is an involution — applying it twice returns the original exactly — and it has a fixed point near mid-gray (#808080 barely moves), which explains the washed-out look of naive inversion-based dark modes: everything mid-toned stays put while the extremes trade places.
The lightness flip, characterized
The OKLCH mode inverts only L (to 1−L), holding chroma and hue, then gamut-maps. A vivid light blue becomes an equally vivid dark blue — the “same color, opposite lighting” transform. This is the per-color primitive underneath dark themes; the Dark Mode Palette Generator applies it across whole palettes with the additional chroma damping dark grounds demand.
Uses for each
RGB negative: predicting what filter: invert(1) will do to your brand (the preview is usually the argument against), high-contrast accessibility modes, darkroom-style image effects. Lightness flip: single-color dark-mode candidates, hover states that flip polarity, checking whether a design’s logic survives lighting inversion. The printed contrast ratio between original and inverse serves both: inverses make natural high-contrast pairings, and the number says exactly how much.
Both inverses, side by side
The clearest argument for the two-mode design is watching the modes disagree. Six colors with their RGB negative and their OKLCH lightness flip:
| Color | RGB negative | Lightness flip |
|---|---|---|
| slateblue | #95a532 | #524a96 |
| sienna | #5fadd2 | #8f431c |
| yellowgreen | #6532cd | #0a2100 |
| dodgerblue | #e16f00 | #003976 |
| firebrick | #4ddddd | #9d443d |
| indigo | #b4ff7d | #a080d0 |
The negative column changes hue family on every chromatic row — blues to oranges, greens to magentas — while the flip column keeps each row recognizably itself in a different lighting. Whichever column matches your intent is the mode to copy from; needing the other column is the most common inversion mistake, caught here before it ships.
How to use the Invert Color Generator
- Pick the color to invert.
- Choose RGB inversion (the filter: invert(1) behavior) or the OKLCH lightness flip.
- Compare original and inverted side by side with their contrast ratio.
- Copy the result or the CSS pair.
Frequently asked questions
What does inverting a color mean in RGB?
Each channel flips to its distance from maximum: 255−R, 255−G, 255−B. #1e90ff becomes #e16f00 – light blues become dark oranges. It is the mathematical negative, exactly what CSS filter: invert(1) and photo-negative effects apply.
Why does the tool offer a second, "lightness flip" mode?
Because RGB inversion changes hue – blue turns orange – which is rarely what dark-mode work wants. The OKLCH mode flips only the lightness axis while preserving hue and chroma: light blue becomes an equally-vivid dark blue. Two different questions, two different inverses.
Is the RGB inverse always the complementary color?
It lands near the complement in hue, but with lightness also flipped – the complement of a pale blue is an orange, the RGB inverse a dark orange. The Complementary Color Finder rotates hue while keeping lightness; this tool is the true negative.
Does inverting twice return my original color?
RGB inversion, yes – perfectly, it is its own inverse. The lightness flip also round-trips within rounding, except where gamut mapping had to trim chroma at extreme lightnesses.
What is a practical use of RGB inversion?
Predicting what filter: invert(1) dark-mode hacks will do to brand colors (usually something horrible – this preview is the warning), building high-contrast accessibility themes, and photographic negative effects.
Why is white's inverse pure black?
All channels at 255 flip to all zeros – the extremes exchange. Mid-gray #808080 maps almost to itself (#7f7f7f), which is why inversion-based dark modes leave mid-grays untouched and look washed out.
Which mode should feed a dark theme?
Neither, blindly – but the lightness flip is the right starting point for individual colors. For whole palettes with proper chroma damping, the Dark Mode Palette Generator applies the flip with the extra judgment.
