Color Converter (HEX, RGB, HSL)Specialized Version
🎨

Invert Color Tool

Invert colors

RGB
H (0-360)S (%)L (%)

Copy CSS Values

Lightness Variations

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

ColorHEXInvertedResult Red#FF0000#00FFFFCyan Green#00FF00#FF00FFMagenta Blue#0000FF#FFFF00Yellow | 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 → | Invert255 - RGBCyan #00FFFF | Complementary | Hue + 180° | Cyan #00FFFF |

For pure colors, inversion equals complement. For others, results differ.

Frequently Asked Questions

What is color inversion?

Subtracting each RGB value from 255 to get the opposite color. Black becomes white, red becomes cyan.

Invert vs complementary?

Inversion is RGB-based (255 - value). Complementary is hue-based (rotate 180°). Results match for primaries, differ for others.

When to use inversion?

For dark mode conversions, high contrast effects, and creating negatives of images or colors.

Related Tools

Explore other tools you might find useful:

Related Calculators