如何计算Less的百分比色差答案

【问题标题】：how to calculate color difference in percentage for Less如何计算Less的百分比色差
【发布时间】：2015-04-06 09:47:53
【问题描述】：

假设我有两种颜色#595b5c 和#424545。我想知道它们之间的百分比差异，怎么做？原因是我想使用 lighten 和 darken 以百分比为参数的 less 函数。

例如：

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

我怎么知道#424545 比#595b5c 暗多少百分比

【问题讨论】：

简单的例子是：delta: (lightness(#595b5c) - lightness(#424545));.
@seven-phases-max 你不认为它不会像下面的@Guffa那么简单吗？
视情况而定，对我而言，编写此代码大约需要 4 秒，按 F5 并查看结果。对于@Gufaa 方法，需要 2-5 分钟才能记住/找到在线转换器链接 :)（好吧，好吧，半开玩笑）。
@seven-phases-max 哈哈。我在谈论这个概念。我觉得 Guffa 有一个很好的观点！如果我只是变暗或变亮，我无法从另一种颜色中获得一种颜色
当然，“明度”和“暗度”的定义可能不同，HSL 只是几种颜色模型中的一种。

标签： html css colors less

【解决方案1】：

我每天都必须解决完全相同的问题，所以我创建了一个tool for color function suggestions。它列出了从一种颜色到另一种颜色的大多数 LESS 函数，以便您可以专注于使用 darken 或 softlight 是否更适合您的用例。

（乌贼具有惊人的变色能力，因此得名/标志）

【讨论】：

非常感谢！ +1。这就是我要找的东西！

【解决方案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 完全相同的色调和饱和度。如果你把一个变暗，你就不会得到另一个。

【讨论】：

或者使用这个链接rapidtables.com/convert/color/index.htm可以直接输入十六进制颜色值。无论如何，谢谢您的参考。
或者，可以使用计算机进行数学计算：) 检查my 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

【讨论】：