question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Include invert to color functions

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 12 years ago
  • Reactions:4
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
ascottmccauleycommented, Jun 19, 2012

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

hsl(hue(@color), saturation(@color), 100 - lightness(@color));
1reaction
seven-phases-maxcommented, Feb 20, 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);

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I generate the opposite color according to current ...
Invert the R,G and B components; Convert each component back to HEX; Pad each component with zeros and output. function invertColor(hex) ...
Read more >
invert() - CSS: Cascading Style Sheets - MDN Web Docs
The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function> .
Read more >
How to invert color using CSS - Nathan Sebhastian
CSS allows you to invert the color of an HTML element by using the invert() CSS function that you can pass to the...
Read more >
How to Invert the Colors on a Picture (and Why You Might ...
All it takes is to go to Adjustments and then Invert Colors. You can also simply press Ctrl + Shift + I keyboard...
Read more >
Invert Pixel Colours - Home and Learn Courses
Invert Image Pixels ... Colour inversion is the colour left over when you deduct one RGB value from 255, which is the highest...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found