寻找深色/浅色答案

【问题标题】：Finding dark/light colors寻找深色/浅色
【发布时间】：2015-02-24 03:08:13
【问题描述】：

我正在尝试找到正确的颜色。例如，如果我有深绿色，那么我需要浅绿色，或者如果我有浅绿色，那么我需要深绿色。我有一个代码可以告诉我颜色是深还是浅。

function calcBrightness(red,green,blue) {
    return Math.sqrt(
        red * red * .299 +
        green * green * .587 +
        blue * blue * .114);          
}

var brightness = calcBrightness(red, green, blue);
var foreColor = (brightness < 130) ? "light" : "green";

我能够检测颜色是深色还是浅色，但如果foreColor 值为绿色，如果结果是浅色或浅色，我如何获得深色？

【问题讨论】：

标签： javascript jquery html css colors

【解决方案1】：

将 RGB 颜色转换为 HSL（色相、饱和度、亮度）使问题变得更容易。

您可以通过更改 HSL 中的 L 值轻松调整颜色的亮度。

算法可用here

（来自问题Javascript convert HSB/HSV color to RGB accurately）

【讨论】：

我将代码用作 rgbToHsv(117,106,98) 但我得到的每种颜色的值都是 0,1,2

【解决方案2】：

从技术上讲，实际上最好在 HSL 颜色空间中进行明暗处理。

为了省点麻烦，有一些很棒的 javascript 库可以进行各种颜色处理，例如 TinyColor。

您并没有真正定义颜色的“浅色”和“深色”版本，但这是我使用 TinyColor 拼凑的一个简单示例：http://jsfiddle.net/cm00kb04/1/

实际上是这样做的：

function findTextColor(backgroundColor) {
    var c = tinycolor(backgroundColor);
    return c.isDark() ? c.lighten(50) : c.darken(50);
}

您可以进行各种级别的变亮/变暗，以及在其他操作中找到mostReadable() 颜色。

什么会导致最好的结果将取决于上下文：例如，如果这是处理任何可能的颜色，如果有一个必须使用的主题，等等。

【讨论】：

为了 tinycolor.js 我只需要使用 tinycolor.js 文件对吗？因为Github上的文件太多了
@user3754676 是的，它是一个独立的库。项目中的其他文件用于演示、单元测试和构建/打包库本身（例如：npm）。听起来您对 Web 开发还很陌生，所以只需将 bower 和 npm 标记为将来可以查看的内容。

【解决方案3】：

根据您的描述，我认为这需要将颜色空间从 RGB 转换为 HSL（色调、饱和度、亮度），更改亮度值以满足您的需求，然后将新颜色转换回 RGB。你可以找到代码here Wikipedia 很好地解释了 HSL and HSV/HSB color spaces 及其与 RGB 颜色空间的关系

【讨论】：