come calcolare la differenza di colore in percentuale per Meno

Question

Dire che ho due colori #595b5c e #424545. Voglio sapere la differenza percentuale tra loro, come farlo? Il motivo è che voglio usare le funzioni lighten e darken di meno che prendono la percentuale come parametro.

Esempio:

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

Come faccio a sapere da quanto cento #424545 è più scuro #595b5c

Answer 1

Le funzioni Chiaro e Scuro cambiano la luminosità del colore nello spazio colore HSL. Se convertite ciascun colore in HSL, vedrete quanto varia la luminosità.

Ho utilizzato un online RGB to HSL converter.

Il colore #595b5c (rgb(89,91,92)) è hsl(200,1.7,35.5).

Il colore #424545 (rgb(66,69,69)) è hsl(180,2.2,26.5).

Quindi, la differenza di luminosità è 9,0 percento unità.

Nota che #424545 non ha la tonalità e la saturazione esatte come #595b5c. Se scurisci uno non otterrai esattamente l'altro.

Answer 2

può essere fatto in molti modi diversi, ma qui è una soluzione utilizzando 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); 
    } 

Ecco lo Source

Answer 3

Devo risolvere lo stesso identico problema su base giornaliera, quindi ho creato uno tool for color function suggestions. Elenca la maggior parte delle funzioni LESS che passano da un colore a un altro, in modo da poter mettere a fuoco se utilizzare darken o softlight con un colore, ha più senso in termini di progettazione.

(seppie hanno sorprendente cambiamento di colore abilità, da cui il nome/logo)