用于选择类似于浅色的暗色的算法

时间:2013-02-24 07:50:21

标签: algorithm colors

我正在聊天,用户可以选择自己喜欢的文字颜色。同一个聊天将显示在网站的几个地方。在某些地方,背景将是黑暗的,而在其他地方 - 光线。因此,大多数选定的颜色在某些聊天框中可能难以识别。

所以我正在寻找一种算法,给定一种在一种背景(浅色或深色)上效果很好的颜色,产生另一种颜色,在相反的背景类型上看起来很好,并且与第一种颜色相似尽可能(因此用户会得到他到处使用相同颜色的印象)。

我知道这可能不可能完美,但欢迎任何尝试。

3 个答案:

答案 0 :(得分:2)

查看http://en.wikipedia.org/wiki/HSL_and_HSV

只要你保持色调和饱和度不变就会看起来颜色相同,你可以用亮度来对比背景

答案 1 :(得分:2)

好的,在看完这里和那里的几件事之后。这是我到目前为止能够找到的。

首先,我想强调几点,并确保正在阅读我的答案的任何人都能够理解我在这里谈论的内容。

什么是色彩空间?

可以通过颜料的原色创建一系列颜色,然后这些颜色定义特定的颜色空间。颜色空间,也称为颜色模型(或颜色系统),是一种抽象的数学模型,它简单地将颜色范围描述为数字元组,通常为3或4个值或颜色分量(例如RGB)。基本上,色彩空间是坐标系和子空间的精细化。系统中的每种颜色都由一个点表示。

我们大多数开发人员使用以下颜色空间之一( HEX RGB RGBA )甚至可以使用( CMYK HSV & HSL )哪些可以为您提供任何颜色你想要通过主要颜色的组合(红色绿色蓝色 Alpha )。

如果我们想知道颜色是否接近另一种颜色,我们会用眼睛看它,但是既然我们希望以编程方式为我们做计算机,那么我们就会用数学方式来看待它。 / p>

鉴于 HEX 颜色空间中的 A 红色 #FF0000 ,颜色 B < / strong>在 HEX 色彩空间中绿色以及#00FF00 以及我们对 RGB 的理解我们有前两个值是红色颜色的表示,后两个值是绿色颜色的表示,后两个值是的表示蓝色颜色,因为我们知道这些值中的每一个都是其值(0-9)的数字表示,然后(A,B,C,D,F)=(10,11,12,13,14) )。然后我们可以在3D维度上绘制颜色,并使用像欧几里得这样的法则计算它们之间的距离。

EX: A =(R1 = FF,G1 = 00,B1 = 00)
B =(R2 = 00,G2 = FF,B2 = 00)
我们在这里有两点,现在我们可以使用欧几里德法则 距离= sqrt((R2 - R1)^ 2 +(G2 - G1)^ 2 +(B2 - B1)^ 2)

到目前为止一切顺利,对吧? 的 都能跟得上 即可。

我们使用HEX,RGBA,CMYK或任何其他颜色空间我们都不知道除了颜色空间中两种颜色之间的距离,有时可能是完全不同的颜色但距离介于两者之间它们很低,因为它们没有考虑我们的眼睛是如何看到颜色的。

但是存在其他颜色空间(科学那些),它们考虑到我们的眼睛看到颜色的方式以及我们的思维如何解释它们。其中一个是实验室

颜色转换

一般来说,一个绝对色彩空间中的颜色可以转换成另一个绝对色彩空间,然后又可以转换回来。但是,某些颜色空间可能具有色域限制,并且转换位于该色域之外的颜色将不会产生正确的结果。也可能存在舍入误差,特别是如果使用每个组件(8位颜色)仅有256个不同值的流行范围。

什么是色域?

在色彩再现中,包括计算机图形和摄影,色域或色域是一定的完整颜色子集。最常见的用法是指在给定环境中可以准确表示的颜色子集,例如在给定的颜色空间内或由某个输出设备。

现在我们已经了解了我们要实现的基本功能,让我们开始编码,了解下面的等式。

十六进制到RGB

我们将十六进制值作为十六进制值的颜色表示,我们只需要得到它们的十进制值,现在我们在RGB颜色空间中有颜色。
A = RGB(255,0,0)红色
B = RGB(0,255,0)绿色

RGB到XYZ

我们必须遵循以下数学法 color =当前颜色/ 255
如果颜色&gt; 0.04045
color =((color + 0.055)/ 1.055)^ 2.4
否则
color = color / 12.92
color = color * 100
X = colorRed * 0.4124 + colorGreen * 0.3576 + colorBlue * 0.1805
Y = colorRed * 0.2126 + colorGreen * 0.7152 + colorBlue * 0.0722
Z = colorRed * 0.0193 + colorGreen * 0.1192 + colorBlue * 0.9505
那&#39;它

EX: - A = RGB(255,0,0)红色
colorRed = 255/255
colorGreen = 0/255
colorBlue = 0/255

if (colorRed > 0.04045){
    colorRed = ( ( colorRed + 0.055 ) / 1.055 ) ^ 2.4
}else{
    colorRed = colorRed / 12.92
}
if (colorGreen > 0.04045){
    colorGreen = ( ( colorGreen + 0.055 ) / 1.055 ) ^ 2.4
}else{<br/>
    colorGreen = colorGreen / 12.92
}
if (colorBlue > 0.04045){
    colorBlue = ( ( colorBlue + 0.055 ) / 1.055 ) ^ 2.4
}else{
    colorBlue = colorBlue / 12.92
}

colorRed = colorRed * 100
colorGreen = colorGreen * 100
colorBlue = colorBlue * 100

X =(colorRed * 0.4124)+(colorGreen * 0.3576)+(colorBlue * 0.1805)
Y =(colorRed * 0.2126)+(colorGreen * 0.7152)+(colorBlue * 0.0722)
Z =(colorRed * 0.0193)+(colorGreen * 0.1192)+(colorBlue * 0.9505)

XYZ(X,Y,Z)

XYZ To Lab

// Reference-X,Reference-Y和Reference-Z指的是特定的光源和观察者。

X = X /参考-X
Y = Y /参考-Y
Z = Z /参考-Z

if ( X > 0.008856 ) {
    X = X ^ ( 1/3 )
}else{
    X = ( 7.787 * X ) + ( 16 / 116 )
}
if ( Y > 0.008856 ) {
    Y = Y ^ ( 1/3 )
}else{
    Y = ( 7.787 * Y ) + ( 16 / 116 )
}
if ( Z > 0.008856 ) {
    Z = Z ^ ( 1/3 )
}else{
    Z = ( 7.787 * Z ) + ( 16 / 116 )
}

CIE-L * =(116 * Y) - 16
CIE-a * = 500 *(X-Y)
CIE-b * = 200 *(Y-Z)

<强>参考

// 2o Observer(CIE 1931)
// X2,Y2,Z2
CIE2_A = {109.850f,100f,35.585f} //白炽灯
CIE2_C = {98.074f,100f,118.232f}
CIE2_D50 = {96.422f,100f,82.521f}
CIE2_D55 = {95.682f,100f,92.149f}
CIE2_D65 = {95.047f,100f,108.883f} //日光
CIE2_D75 = {94.972f,100f,122.638f}
CIE2_F2 = {99.187f,100f,67.395f} //荧光灯 CIE2_F7 = {95.044f,100f,108.755f}
CIE2_F11 = {100.966f,100f,64.370f}

// 10o Observer(CIE 1964)
// X2,Y2,Z2
CIE10_A = {111.144f,100f,35.200f} //白炽灯
CIE10_C = {97.285f,100f,116.145f}
CIE10_D50 = {96.720f,100f,81.427f}
CIE10_D55 = {95.799f,100f,90.926f}
CIE10_D65 = {94.811f,100f,107.304f} //日光
CIE10_D75 = {94.416f,100f,120.641f}
CIE10_F2 = {103.280f,100f,69.026f} //荧光灯 CIE10_F7 = {95.792f,100f,107.687f}
CIE10_F11 = {103.866f,100f,65.627f}

圈色空间中两种颜色之间的距离

将颜色视为我们之前所做的三维尺寸,现在我们可以确定两种颜色相对于人眼的确切距离。

包含

研究更多我们应该使用的技术,以改变颜色,但具有相同的颜色,但感觉就像人眼的另一种技术,通过它我们可以看到背景和在它上面绘制的东西使用相同的颜色。

-

更新#1(10/09/2018)

有一些数学方程式可以计算出与人类感知相关的颜色差异,称为CIE。这些年来,他们已经进行了一些迭代。 (CIE 1976,CIE 1994,CIE 2000)。

CIE 1976

它是3D空间中两种颜色之间的距离,它几乎就是欧几里德距离公式。

CIE 1994

1994年,原来的Delta E公式得到了改进。新公式将考虑每种亮度,色度和色调值的某些加权因子。

CIE 2000

CIE组织决定通过引入dE00来解决轻微不准确问题。它是目前最复杂但最准确的CIE色差算法。

由于CIE 2000是最准确的,我们将直接采用它。

P.S

您不需要自己实施。我在github Is This Colour Similar Repository上用Javascript创建了一个版本。

在运行代码之后,我们将得到一个值,该值只表示两种颜色相对于人类感知的差异,其值为0到100.检查下表以获得更多说明。

╔═══════════════╦════════════════════════════════════════╗
║ Delta E Value ║               Perception               ║
╠═══════════════╬════════════════════════════════════════╣
║ <= 1.0        ║ Not perceptible by human eyes.         ║
║ 1 - 2         ║ Perceptible through close observation. ║
║ 2 - 10        ║ Perceptible at a glance.               ║
║ 11 - 49       ║ Colors are more similar than opposite. ║
║ 100           ║ Colors are exact opposite.             ║
╚═══════════════╩════════════════════════════════════════╝

现在我们知道颜色A是否更接近颜色B或者是否更接近颜色B.

这是第一点。现在我们知道了。我们应该怎么做来处理这样的事情。我们可以在颜色值中玩3件事。

实验室色彩空间在以下意义上是独一无二的。

亮度值L *表示L * = 0时最暗的黑色,L *表示最亮的白色= 100。

a *和b *表示绿红色和蓝黄色成分。

颜色通道a *和b *表示在* = 0和b * = 0时的真实中性灰度值。

a *轴表示绿红色成分,负方向为绿色,正方向为红色。

b *轴代表蓝黄色成分,负方向为蓝色,正方向为黄色。

因为我们现在需要相同的颜色,但是你需要的颜色稍暗或更亮。

我们将获取该颜色的Lab值并更改L值。因为它是负责颜色的亮度或暗度的人。通过将(更多亮度)添加到已存在的L值的一小部分(0.05)或减去已存在的L值的(更暗)(0.05)。

在代码中提供了一个完整的工作示例,您可以查看以下网址Is This Colour Similar Online example

希望这会对你有所帮助。

答案 2 :(得分:0)

要使较暗的颜色将RGB分量乘以0.5或0.75,例如。

通过相同的因子缩放RGB值,可以在不改变色调的情况下使颜色更暗或更亮。