jak obliczyć różnicę kolorów w procentach za mniej

Question

Powiedz, że mam dwa kolory #595b5c i #424545. Chcę poznać różnicę procentową między nimi, jak to zrobić? Powodem jest to, że chcę używać mniej funkcji, które przyjmują procent jako parametr.

Np

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

Skąd mam wiedzieć, o ile procent #424545 jest ciemniejszy niż #595b5c

Answer 1

Funkcje rozjaśnienia i przyciemnienia zmieniają jasność koloru w przestrzeni kolorów HSL. Jeśli zamienisz każdy kolor na HSL, zobaczysz, jak bardzo różni się jasność.

Użyłem online RGB to HSL converter.

Kolor #595b5c (rgb(89,91,92)) to hsl(200,1.7,35.5).

Kolor #424545 (rgb(66,69,69)) to hsl(180,2.2,26.5).

Tak więc różnica w jasności wynosi 9,0 procent jednostek.

Należy pamiętać, że #424545 nie ma dokładnego odcienia ani nasycenia jako #595b5c. Jeśli go przyciemnimy, nie dostaniesz dokładnie tego drugiego.

Answer 2

można zrobić na wiele różnych sposobów, ale tutaj jest rozwiązanie przy użyciu 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); 
    } 

Oto Source

Answer 3

Muszę rozwiązać dokładnie ten sam problem codziennie, więc stworzyłem tool for color function suggestions. Wymienia większość funkcji LESS, które przechodzą z jednego koloru do drugiego, dzięki czemu możesz skupić się na tym, czy użycie koloru darken lub softlight ma więcej sensu pod względem projektu.

(Mątwy mają niesamowite zmienia kolor umiejętności, stąd nazwa/logo)