Less.js: Include invert to color functions

Created on 21 Jan 2012 · 6Comments · Source: less/less.js

Currently I'm using
color: hsl(hue(@black), saturation(@black), 100 - lightness(@black));
to invert colors but
color: invert(@color)
would be much better syntax for the job.

The code for function:

    invert: function (color) {
        var rgb = [255 - color.rgb[0],
                   255 - color.rgb[1],
                   255 - color.rgb[2]]; 
        return new(tree.Color)(rgb);
    },

I tested it with less.js 1.2.1 so it works

feature request medium priority up-for-grabs

Source

Oskariok

👍3

Most helpful comment

+1 for this:
Just to clarify, do you mean that you are using

hsl(hue(@color), saturation(@color), 100 - lightness(@color));

ascottmccauley on 16 Jun 2012

👍2

All 6 comments

Updated original post

Oskariok on 2 Feb 2012

+1 for this:
Just to clarify, do you mean that you are using

hsl(hue(@color), saturation(@color), 100 - lightness(@color));

ascottmccauley on 16 Jun 2012

👍2

+1 as well.

srsgores on 2 May 2013

this can now be achieved with negation

http://lesscss.org/functions/#color-blending-negation

lukeapage on 20 Feb 2014

Not really the negation. The javascript code posted by @Oskariok is simple Less (#fff - @color) or equal difference(#fff, @color). However the Less code suggested by @ascottmccauley later is not the same, it only inverts colour lightness (so Less and javascript snippets of the first post do not match each other). "Invert lightness" can also be achieved with less verbose: spin((#fff - @color), 180);