Invert Color Tool
Invert any color to get its RGB opposite. Color inversion subtracts each RGB channel from 255, creating the "negative" of the original color.
How Inversion Works
Invert formula: (255 - R, 255 - G, 255 - B)
| Original | Inverted |
|---|---|
| #000000 (Black) | #FFFFFF (White) |
| #FFFFFF (White) | #000000 (Black) |
| #FF0000 (Red) | #00FFFF (Cyan) |
| #0000FF (Blue) | #FFFF00 (Yellow) |
Inversion Examples
| Color | HEX | Inverted | Result |
|---|---|---|---|
| Red | #FF0000 | #00FFFF | Cyan |
| Green | #00FF00 | #FF00FF | Magenta |
| Blue | #0000FF | #FFFF00 | Yellow |
| Orange | #FFA500 | #005AFF | Blue |
Use Cases
- Dark mode: Invert colors for dark themes
- Accessibility: High contrast alternatives
- Design effects: Negative/photo effects
- Color theory: Finding complementary-like pairs
CSS invert() Filter
``css
.inverted {
filter: invert(100%);
}
/* Partial inversion */
.soft-invert {
filter: invert(75%);
}
`
Invert vs Complementary
| Type | Method | Red → |
|---|---|---|
| Invert | 255 - RGB | Cyan #00FFFF |
| Complementary | Hue + 180° | Cyan #00FFFF |
For pure colors, inversion equals complement. For others, results differ.Inversion Is Not Dark Mode
Inverting a colour subtracts each channel from 255. It is a genuine operation with
genuine uses — and building dark mode is not one of them.
`javascript
const invert = ({ r, g, b }) => ({ r: 255 - r, g: 255 - g, b: 255 - b });
`
Inverting a whole interface produces washed-out photographs, inverted brand colours and
text that is technically readable and visually wrong. Dark mode means a separate token set
where surfaces darken, text lightens, and brand colours are *adjusted* rather than flipped.
Where inversion is genuinely right: high-contrast accessibility modes, image negatives, and
picking a readable text colour over an unknown background — though for that, comparing
contrast against black and white directly gives a better answer than inverting.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.