WEB-互补色与对比色的计算与获取 (实用、赞)

原文出处:http://blog.ipodmp.com/2014/03/web-and-calculation-of-complementary-and-contrasting-colors-to-obtain.html

WEB-互补色与对比色的计算与获取

2014/03/18 ChinaBUG%1 $ S

今天在做界面设计是需要互补色凸显一下效果,发现手上没有工具啦,好吧,找一下计算方式吧,起码没有应手的工具之前,可以先应付一下。

互补色

摘自:互补色简单计算法

这个是色相色谱,位于180度夹角的颜色就是互补色

WEB-互补色与对比色的计算与获取 (实用、赞)_第1张图片

要计算某种颜色的互补色,首先取得这个颜色的RGB数值,再用255分别减去你现有的RGB值即可。

比如纯黄色:r255 g255 b0

那么通过计算 r(255-255) g(255-255) b(255-0)

互补色为:r0 g0 b255

就是纯蓝色

注:

只有在8位通道模式下使用255(2的8次方)

若是16位通道下则要用65535(2的16次方)来减

Photoshop默认使用8位通道模式

该模式可以显示1677万色(256 x 256 x 256)

已经超出人眼所能分辨的色彩总数了(故又称真彩色)

因此更高的通道级别就肉眼看来没有区别。

如何计算颜色对比色

网页元素的颜色对比度依赖于颜色的明亮度和色调。如果两种颜色的亮度和色调差异超过一定阈值, 那么它们之间就能形成强对比。如果这两个度量值中有一个或两个指标均下于阈值,那么W3C建议使用 别的颜色。如果你知道两个颜色的RGB值,那么你可以计算这两个颜色的对比度。让网页中的背景和文字 具有强对比,往往能改进用户体验。

计算颜色亮度差异步骤


  • 令R1, G1, B1代表文本颜色的红色,绿色和蓝色。令R2, G2, B2代表背景颜色
  • 计算(299*R1 + 587*G1 + 114*B1)/1000. 这是文本颜色的亮度,假设你使用 暗绿色,R1=20, G1=100和B1=20,那么文本颜色的亮度是66.96,因为(299*20 + 587*100 + 114*20)/1000 = 66.96
  • 计算 (299*R2 + 587*G2 + 114*B2)/1000。这是背景色的亮度。例如,你使用浅粉色 R2=255, G2=220和B2=240,那么背景色的亮度是232.75,因为(299*255 + 587*220 + 114*240)/1000 = 232.75.
  • 计算亮度值的差异。如果亮度值差异小于125,那么需要调整其中一个或者两个来增加亮度差异。例如 232.75-66.96=165.79,因此我们不需要改变这两个颜色

计算色调差异

  • 计算两个颜色红色值的差异。还是上面的例子,我们计算可得红色值差异为255-20=235
  • 重复前面一个步骤,绿色和蓝色。还是上面的例子, 绿色差异值为120(因为220-100=120), 蓝色差异值为220(因为240-20=220)
  • 把上述三个分量的差异值相加得到的是色调差异。如果色调差异小于500,那么你需要调整颜色。 例如,因为235+120+220=575,所以你不需要改变颜色。

附录:

怎么用Javascript获取对比色,互补色?

[code lang=”javascript”]

Button

Button



[/code]

你可能感兴趣的:(JavaScript,实用,赞)