Uwarp

Original

Inverted

Each RGB channel becomes 255 minus the original value—the complementary hue on the color wheel.

Help Us Improve

—

(—)

Invert a color online

Use this color inverter to invert colors from any hex instantly. Get RGB negative output and copy inverted hex codes as HEX, RGB, or HSL.

What is a color inverter?

A color inverter applies RGB color inversion to a hex: each channel becomes 255 minus its value, so black becomes white and blue shifts toward orange. This page shows original and inverted swatches side by side so you can invert colors quickly and copy inverted hex codes for CSS or design tools—no install required. For whole images, use /invert-image-colors instead.

Color inverter features

Invert colors from any hex with instant RGB negative preview and one-click copy.

  • Color picker and hex input

    Choose visually or paste a six-digit hex—the inverted swatch updates instantly.

  • One-step inversion

    No slider—every pick runs full color inversion in one step.

  • Side-by-side preview

    Original and inverted colors shown together for quick comparison.

  • Copy HEX, RGB, HSL

    One-click copy for the inverted result in three common formats.

  • RGB channel negative

    Each channel becomes 255 minus the source—predictable reverse color output.

  • No account

    Free, unlimited previews in modern browsers.

How to invert colors from a hex

Two steps to get a fast color inverse result.

  1. Set the original color

    Use the picker or paste a six-digit hex—brand colors and UI tokens both work.

  2. Copy the inverted result

    Copy HEX, RGB, or HSL from the inverted panel into CSS, Figma, or code.

Tips for inverted colors

Better results when inverting hex values.
  • 01

    Photos use another route

    For whole images, open /invert-image-colors—same RGB negative on every pixel.

  • 02

    Double invert resets

    Paste an inverted hex back in to verify you return to the original.

  • 03

    Not HSL complement

    Need hue-wheel complementary pairs? Inversion is RGB math, not a 180° hue rotate.

  • 04

    Paste from a picker

    Sample on /image-color-picker, then paste the hex here for an instant inversion.

  • 05

    Pair with greyscale

    After inversion, desaturate on /greyscale-desaturate-color if you need a neutral variant.

  • 06

    Check contrast

    Inverted text on inverted backgrounds still needs readable pairs—use /contrast-checker when unsure.

When to invert a color

Typical uses for hex color inversion.

  • Opposite color checks

    Quickly answer questions like opposite color of green, red, blue, orange, or purple in RGB workflows.

  • Dark mode accents

    Derive a high-contrast accent from a light-theme brand hex for dark UI shells.

  • Negative-style previews

    See how a hue reads when reversed before building inverted palettes.

  • Accessibility checks

    Compare a foreground hex with its inversion against alternate backgrounds.

  • CSS variables

    Copy RGB or HSL of the inverted value into custom properties.

  • Design handoff

    Share inverted hex codes without manual 255 − channel math.

  • Quick complements

    Get a bold opposite for wireframes when you need a fast reverse color, not a full scheme.

Why use this invert color tool

Benefits of one-click hex inversion.

  • Instant

    No apply step—pick a color and copy the inverted result.

  • Private

    Colors never leave your device.

  • Predictable output

    Standard RGB negative every time—same math as image color inversion.

  • Multiple formats

    HEX, RGB, and HSL for different handoff workflows.

  • Free

    Unlimited previews and copies.

  • Honest scope

    Single hex inversion—not batch photo conversion.

Technical details

How hex inversion works here.
Algorithm
Per channel: output = 255 − input (RGB negative).
Input
Six-digit hex via picker or text field.
Output
Inverted hex where each R, G, and B channel is negated.
Output formats
Lowercase HEX, rgb(), and hsl() strings.
Processing
Client-side only—no network requests.
Browser support
Modern Chromium, Firefox, and Safari.

Sources & References

Authoritative references on RGB color inversion, complementary colors, and the client-side processing this tool uses.
  • “A color negative transforms each RGB channel value x to 255 − x. This operation reverses the tonal range: white becomes black, black becomes white, and each hue shifts to its RGB complement.”
    — Wikipedia — Color negative

    RGB color inversion and negative images: Each input hex is decomposed into its R, G, and B components, then each channel is negated using the formula output = 255 − input. The inverted result is reassembled into the output hex. en.wikipedia.org/wiki/Color_negative

  • “Complementary colors are pairs of colors that, when combined or mixed, cancel each other out to produce a grayscale color. In the RGB model, the complement of a color is its RGB negative.”
    — Wikipedia — Complementary colors

    Complementary colors: RGB inversion produces a result that is often visually similar to the hue-based complementary color, though it follows channel-wise negation rather than rotating hue on the color wheel. en.wikipedia.org/wiki/Complementary_colors

  • “Applying the bitwise NOT operation twice returns the original value. For 8-bit channels: 255 − (255 − x) = x for any integer x between 0 and 255.”
    — Wikipedia — Bitwise operation

    Self-inverse property of bitwise NOT: Color inversion is self-inverse: inverting the same hex twice returns the original color, since 255 − (255 − x) = x for each channel. en.wikipedia.org/wiki/Bitwise_operation#NOT

Frequently Asked Questions

Quick answers about this tool—open a question to read more.