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 |