<div>original (not inverted)</div>
<div>inverted with CSS filters</div>
<div>inverted with custom Sass function</div>
@import "compass/css3";

// Tweak these variables to check it works
$background: rgba(palegoldenrod, .73);
$text: darkgreen;
$percentage: 85%;

@function invert-channel($channel, $upper, $lower) {
    @return 255 - round($lower + $channel*($upper - $lower)/255);

@function _invert($original, $percentage) {
    $upper: ($percentage/100%)*255;
    $lower: 255 - $upper;
    $alpha: alpha($original);

    $inverted-channels: ();

    @each $channel-name in 'red' 'green' 'blue' {
        $channel: call($channel-name, $original);
        $inverted-channel: invert-channel($channel, $upper, $lower);
        $inverted-channels: append($inverted-channels, $inverted-channel);

    $inverted-channels: append($inverted-channels, $alpha);

    @return rgba($inverted-channels...);

div {
  margin: 1px auto;
  padding: .5em;
  background: $background;
  color: $text;
  font: 1em verdana, sans-serif;

div:nth-child(2) {
  -webkit-filter: invert($percentage);
  filter: invert($percentage);

div:nth-child(3) {  
  background: _invert($background, $percentage);
  color: _invert($text, $percentage);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.