CODEWITHSUNDEEP
htmlcsscolorsless
wallop
wallop

Reputation: 2581

how to calculate color difference in percentage for Less

Say i have two colors #595b5c and #424545. I want to know the percentage difference between them, how to do that? The reason being i want to use lighten and darken functions of less which take percentage as a parameter.

Eg: 

@darkgrey1: #595b5c;
@darkgrey2: darken(@darkgrey1,10%);

How do i know by how much percent #424545 is darker than #595b5c

Upvotes: 24

Views: 16118

Answers (3)

Alex Gyoshev
Alex Gyoshev

Reputation: 11967

I have to solve the exact same problem on a daily basis, so I created a tool for color function suggestions. It lists most of the LESS functions that get from one color to another, so that you can focus on whether using darken or softlight makes more sense for your use-case.

Suggest LESS color function

(Cuttlefish have amazing color changing abilities, thus the name / logo)

Upvotes: 46

Guffa
Guffa

Reputation: 700880

The lighten and darken functions changes the lightness of the color in the HSL color space. If you convert each color to HSL, you will see how much the lightness differs.

I used an online RGB to HSL converter.

The color #595b5c (rgb(89,91,92)) is hsl(200,1.7,35.5).

The color #424545 (rgb(66,69,69)) is hsl(180,2.2,26.5).

So, the difference in lightness is 9.0 percent units.

Note that #424545 doesn't have the exact hue and saturation as #595b5c. If you darken one you won't get exactly the other.

Upvotes: 10

benscabbia
benscabbia

Reputation: 18082

Can be done in many different ways but here is a solution using javascript: 

function color_meter(cwith, ccolor) {

    if (!cwith && !ccolor) return;

    var _cwith  = (cwith.charAt(0)=="#") ? cwith.substring(1,7) : cwith;
    var _ccolor = (ccolor.charAt(0)=="#") ? ccolor.substring(1,7) : ccolor;

    var _r = parseInt(_cwith.substring(0,2), 16);
    var _g = parseInt(_cwith.substring(2,4), 16);
    var _b = parseInt(_cwith.substring(4,6), 16);

    var __r = parseInt(_ccolor.substring(0,2), 16);
    var __g = parseInt(_ccolor.substring(2,4), 16);
    var __b = parseInt(_ccolor.substring(4,6), 16);

    var p1 = (_r / 255) * 100;
    var p2 = (_g / 255) * 100;
    var p3 = (_b / 255) * 100;

    var perc1 = Math.round((p1 + p2 + p3) / 3);

    var p1 = (__r / 255) * 100;
    var p2 = (__g / 255) * 100;
    var p3 = (__b / 255) * 100;

    var perc2 = Math.round((p1 + p2 + p3) / 3);

    return Math.abs(perc1 - perc2);   
    }

Here is the Source

Upvotes: 3

Related Questions