我正在聊天,用户可以在其中选择自己喜欢的文本颜色。相同的聊天将显示在网站的多个位置。在某些地方,背景会很暗,而在另一些地方,背景会很亮。因此,在某些聊天框中,大多数选定的颜色可能会难以辨认。
所以我正在寻找一种算法,给定一种颜色在一种类型的背景(浅色或深色)上效果很好,产生另一种颜色,在相反类型的背景上看起来不错,并且尽可能类似于第一种颜色(所以用户得到的印象是他到处都使用相同的颜色)。
我知道这可能无法完美完成,但欢迎任何尝试。
好吧,在阅读了一些内容之后。这是到目前为止我能找到的信息。
\n首先,我想强调几点,并确保阅读我的答案的任何人都能理解我在这里所说的内容。
什么是色彩空间?
\n\n颜料的原色可以创建一系列颜色,然后这些颜色定义特定的颜色空间。颜色空间,也称为颜色模型(或颜色系统),是一种抽象的数学模型,它简单地将颜色范围描述为数字元组,通常为 3 或 4 个值或颜色分量(例如:RGB)。基本上来说,色彩空间是坐标系和子空间的细化。系统中的每种颜色都由一个点表示。
\n\n我们大多数开发人员都会使用以下颜色空间之一(HEX、RGB、RGBA),有些甚至会使用(CMYK、HSV和HSL等) ,它们可以通过主颜色的组合为您提供您想要的任何颜色(红、绿、蓝、阿尔法)。
\n\n如果我们想知道一种颜色是否接近另一种颜色,我们会用眼睛观察它,但由于我们希望计算机以编程方式为我们做到这一点,所以我们必须以数学方式观察它。
\n\n鉴于颜色A在十六进制颜色空间#FF0000中为红色,颜色B在十六进制颜色空间#00FF00中为绿色,根据我们对RGB的理解,我们有前两个值代表红色,后两个值代表红色。是绿色的表示,最后两个值是蓝色的表示,因为我们知道这些值中的每一个都是其值(0-9)的数字表示,那么(A,B,C,D, F) = (10, 11, 12, 13, 14)。然后我们可以在 3D 维度上绘制颜色,并使用欧几里得等定律计算它们之间的距离。
\n\nEX:\nA = (R1 = FF, G1 = 00, B1 = 00)
\nB = (R2 = 00, G2 = FF, B2 = 00)
\n我们在这里得到了两点,现在我们可以使用欧几里得定律
\n距离= sqrt((R2 - R1)^2 + (G2 - G1)^2 + (B2 - B1)^2)
到目前为止一切都很好,对吧?
\n不。
当我们使用 HEX、RGBA、CMYK 或任何其他颜色空间时,除了两种颜色在其颜色空间中的距离(有时可能是完全不同的颜色)之外,我们将无法知道任何内容,但它们之间的距离很小,因为他们没有考虑我们的眼睛如何看待颜色。
\n\n但是还存在其他颜色空间(科学的颜色空间),它们考虑了我们的眼睛看到颜色的方式以及我们的大脑如何解释它们。其中之一是实验室。
\n\n颜色转换
\n\n一般来说,一个绝对色彩空间中的颜色可以转换为另一个绝对色彩空间,然后再转换回来;但是,某些颜色空间可能有色域限制,转换该色域之外的颜色将不会产生正确的结果。还可能存在舍入误差,特别是如果使用每个组件仅 256 个不同值(8 位颜色)的流行范围。
\n\n什么是色域?
\n\n在色彩再现(包括计算机图形和摄影)中,色域或色域是颜色的某个完整子集。最常见的用法是指在给定情况下(例如在给定颜色空间内或通过特定输出设备)可以准确表示的颜色子集。
\n\n现在我们已经了解了要实现的基本功能,让我们开始编写了解以下等式的代码。
\n\n十六进制转RGB
\n\n我们将 HEX 作为十六进制值的颜色表示,我们只需获取它们的十进制值,现在我们在 RGB 颜色空间中拥有了颜色。
\nA = RGB(255, 0, 0) 红色
\nB = RGB(0, 255, 0) 绿色
RGB 至 XYZ
\n\n我们必须遵循以下数学定律
\ncolor = 当前颜色 / 255
\nif color > 0.04045
\ncolor = ( ( color + 0.055 ) / 1.055 ) ^ 2.4
\nelse
\ncolor = color / 12.92
\ncolor = color * 100
\nX = 红色颜色 * 0.4124 + 绿色颜色 * 0.3576 + 蓝色颜色 * 0.1805
\nY = 红色颜色 * 0.2126 + 绿色颜色 * 0.7152 + 蓝色颜色 * 0.0722
\nZ = 红色颜色 * 0.0193 + 绿色颜色 * 0.1192 + 蓝色颜色 * 0.9505
\n那个\'
例如:-\nA = RGB(255, 0, 0) 红色
\n颜色红色 = 255/255
\n颜色绿色 = 0/255
\n颜色蓝色 = 0/255
if (colorRed > 0.04045){\n colorRed = ( ( colorRed + 0.055 ) / 1.055 ) ^ 2.4\n}else{\n colorRed = colorRed / 12.92\n}\nif (colorGreen > 0.04045){\n colorGreen = ( ( colorGreen + 0.055 ) / 1.055 ) ^ 2.4\n}else{<br/>\n colorGreen = colorGreen / 12.92\n}\nif (colorBlue > 0.04045){\n colorBlue = ( ( colorBlue + 0.055 ) / 1.055 ) ^ 2.4\n}else{\n colorBlue = colorBlue / 12.92\n}\nRun Code Online (Sandbox Code Playgroud)\n\n颜色红色 = 颜色红色 * 100
\n颜色绿色 = 颜色绿色 * 100
\n颜色蓝色 = 颜色蓝色 * 100
X = (颜色红色 * 0.4124) + (颜色绿色 * 0.3576) + (颜色蓝色 * 0.1805)
\nY = (颜色红色 * 0.2126) + (颜色绿色 * 0.7152) + (颜色蓝色 * 0.0722)
\nZ = (颜色红色 * 0.0193) + (颜色绿色* 0.1192) + (颜色蓝色 * 0.9505)
XYZ(X、Y、Z)
\n\nXYZ 至实验室
\n\n// Reference-X、Reference-Y 和 Reference-Z 指的是特定光源和观察者。
\n\nX = X / 参考-X
\nY = Y / 参考-Y
\nZ = Z / 参考-Z
if ( X > 0.008856 ) {\n X = X ^ ( 1/3 )\n}else{\n X = ( 7.787 * X ) + ( 16 / 116 )\n}\nif ( Y > 0.008856 ) {\n Y = Y ^ ( 1/3 )\n}else{\n Y = ( 7.787 * Y ) + ( 16 / 116 )\n}\nif ( Z > 0.008856 ) {\n Z = Z ^ ( 1/3 )\n}else{\n Z = ( 7.787 * Z ) + ( 16 / 116 )\n}\nRun Code Online (Sandbox Code Playgroud)\n\nCIE-L* = ( 116 * Y ) - 16
\nCIE-a* = 500 * ( X - Y )
\nCIE-b* = 200 * ( Y - Z )
参考
\n\n//2o 观察者 (CIE 1931)
\n// X2, Y2, Z2
\nCIE2_A = {109.850f, 100f, 35.585f} //白炽灯
\nCIE2_C = {98.074f, 100f, 118.232f}
\nCIE2_D50 = {96.422f , 100f, 82.521f}
\nCIE2_D55 = {95.682f, 100f, 92.149f}
\nCIE2_D65 = {95.047f, 100f, 108.883f} //日光
\nCIE2_D75 = {94.972f, 100f, 122.638f}
\nCIE2_F2 = {99.187 f, 100f, 67.395f} //荧光
\nCIE2_F7 = {95.044f, 100f, 108.755f}
\nCIE2_F11 = {100.966f, 100f, 64.370f}
//10o 观察者 (CIE 1964)
\n// X2, Y2, Z2
\nCIE10_A = {111.144f, 100f, 35.200f} //白炽灯
\nCIE10_C = {97.285f, 100f, 116.145f}
\nCIE10_D50 = {96.720f , 100f, 81.427f}
\nCIE10_D55 = {95.799f, 100f, 90.926f}
\nCIE10_D65 = {94.811f, 100f, 107.304f} //日光
\nCIE10_D75 = {94.416f, 100f, 120.64 1f}
\nCIE10_F2 = {103.280 f, 100f, 69.026f} //荧光
\nCIE10_F7 = {95.792f, 100f, 107.687f}
\nCIE10_F11 = {103.866f, 100f, 65.627f}
搭接颜色空间中两种颜色之间的距离
\n\n像我们之前那样将颜色视为 3D 维度,现在我们有了两种颜色之间相对于人眼的精确距离。
\n\n包括
\n\n研究更多我们应该使用的技术,以便改变颜色但具有相同的颜色,但对于人眼来说感觉像是另一种颜色,通过它我们可以看到背景以及使用相同的颜色在其上绘制的东西颜色。
\n\n--
\n\n更新 #1 (10/09/2018)
\n\n有一些数学方程可以计算相对于人类感知的色差,称为 CIE。这些年来,它们已经有过几次迭代。(CIE 1976、CIE 1994、CIE 2000)。
\n\n国际照明委员会 1976
\n\n它是 3D 空间中两种颜色之间的距离,它几乎是欧几里得距离公式。
\n\n1994年国际照明学会
\n\n1994年,对原来的Delta E公式进行了改进。新公式将考虑每个亮度、色度和色调值的某些权重因子。
\n\n国际展览2000
\n\nCIE 组织决定通过引入 dE00 来修复亮度不准确的问题。它\xe2\x80\x99是目前最复杂但最准确的CIE色差算法。
\n\n由于 CIE 2000 是最准确的,我们将直接讨论它。
\n\n聚苯乙烯
\n\n您不需要自己实现它。我在 github Is This Color Comparison Repository上创建了一个 Javascript 版本。
\n\n运行代码后,我们将得到一个值,该值仅表示两种颜色之间相对于人类感知的差异,其值从 0 到 100。请查看下表以获取更多说明。
\n\n\xe2\x95\x94\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\xa6\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x97\n\xe2\x95\x91 Delta E Value \xe2\x95\x91 Perception \xe2\x95\x91\n\xe2\x95\xa0\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\xac\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\xa3\n\xe2\x95\x91 <= 1.0 \xe2\x95\x91 Not perceptible by human eyes. \xe2\x95\x91\n\xe2\x95\x91 1 - 2 \xe2\x95\x91 Perceptible through close observation. \xe2\x95\x91\n\xe2\x95\x91 2 - 10 \xe2\x95\x91 Perceptible at a glance. \xe2\x95\x91\n\xe2\x95\x91 11 - 49 \xe2\x95\x91 Colors are more similar than opposite. \xe2\x95\x91\n\xe2\x95\x91 100 \xe2\x95\x91 Colors are exact opposite. \xe2\x95\x91\n\xe2\x95\x9a\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\xa9\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x9d\nRun Code Online (Sandbox Code Playgroud)\n\n现在我们知道颜色 A 是否接近颜色 B 或有点远。
\n\n这是第一点。现在我们知道了。遇到这样的事情我们应该怎么办呢?我们可以在颜色值中使用 3 种东西。
\n\nLab 色彩空间在以下意义上是独特的。
\n\n亮度值 L* 表示 L* = 0 时最暗的黑色,L* = 100 时表示最亮的白色。
\n\na* 和 b* 分别代表 green\xe2\x80\x93red 和 blue\xe2\x80\x93yellow 颜色分量。
\n\n颜色通道 a* 和 b* 表示 a* = 0 和 b* = 0 时的真实中性灰度值。
\n\na*轴代表green\xe2\x80\x93red分量,负方向为绿色,正方向为红色。
\n\nb*轴代表blue\xe2\x80\x93yellow分量,蓝色为负方向,黄色为正方向。
\n\n因为我们想要相同的颜色,但稍微暗一点或亮一点,无论您此时需要什么。
\n\n我们将获取该颜色的 Lab 值并更改 L 值。因为它是决定颜色明暗的因素。通过将(更多亮度)添加到已存在的 L 值的一小部分(0.05)或减去(更多暗度)(0.05)已存在的 L 值。
\n\n代码中提供了一个完整的工作示例,您可以查看以下 URL Is This Color Comparison Online 示例。
\n\n希望这对您有帮助。
\n