如何计算Less的百分比色差

Question

说我有两种颜色#595b5c和#424545。我想知道它们之间的百分比差异，怎么做？我之所以要使用较少的lighten和darken函数，以百分比作为参数。

例如：

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

我如何知道#424545的百分比多于#595b5c

的百分比

Answer 1

我必须每天解决完全相同的问题，所以我创建了一个tool for color function suggestions。它列出了从一种颜色到另一种颜色的大多数LESS函数，因此您可以专注于使用darken或softlight颜色，在设计方面更有意义。

（墨鱼具有惊人的变色能力，因此名称/标识）

Answer 2

变亮和变暗功能会改变HSL色彩空间中颜色的亮度。如果将每种颜色转换为HSL，您将看到亮度差异多少。

我使用了在线RGB to HSL converter。

颜色#595b5c（rgb(89,91,92)）为hsl(200,1.7,35.5)。

颜色#424545（rgb(66,69,69)）为hsl(180,2.2,26.5)。

因此，亮度的差异是9.0％单位。

请注意，#424545的确切色调和饱和度不是#595b5c。如果你使一个人变暗，你就不会得到另一个。

Answer 3

可以通过多种方式完成，但这里有一个使用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);   
    }

以下是Source