CSS Color Inverter

Turn your CSS stylesheet into its color negative

Change colors!

Paste your CSS or HTML code into the following box. (See explanation below.)

To achieve a perfect negative effect, don't forget to turn all images used on your pages negative as well.

About the CSS Interver

This tool processes a CSS stylesheet and returns all hexadecimal color codes into their negative value. This means that a page with black text and a white background will be turned into a page with white text on a black background (and so forth).
You can paste a CSS stylesheet or HTML code.

Entering your input

You can enter whole HTML documents or CSS stylesheets. Beware that all occurrences of colors are searched for and replaced regardless of context. For instance, any occurrence of #fff will be inverted to #000, even if it is part of the document text and not part of a CSS declaration.

Examples (paste the list into the field!)

  • #fff becomes #000
  • #AFA983 becomes #50567C
  • rgb(255, 0, 0) becomes rgb(0, 255, 255)
  • rgb(100%, 0, 50%) becomes rgb(0, 100%, 50%)
  • rgba(255, 255, 255, 0.3) becomes rgba(0, 0, 0, 0.3)

As defined in the CSS specification, percentages and absolute numbers may not be mixed in the rgb and rgba color notation; something like rgb(100%, 20, 0) will not be recognized.


CSS negative colors, invert CSS colors, RGB color inverse, get negative design of a webpage, transform HTML colors to negative