chinabug：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度夹角的颜色就是互补色

要计算某种颜色的互补色，首先取得这个颜色的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”]
<script type="text/javascript" language="javascript">// <![CDATA[
var asHex=new Array(16);
asHex[0]="0";
asHex[1]="1";
asHex[2]="2";
asHex[3]="3";
asHex[4]="4";
asHex[5]="5";
asHex[6]="6";
asHex[7]="7";
asHex[8]="8";
asHex[9]="9";
asHex[10]="a";
asHex[11]="b";
asHex[12]="c";
asHex[13]="d";
asHex[14]="e";
asHex[15]="f";

function lightColor(sColor, iStep) // eg. sColor="#23a3df", iStep=-4
{
var sRslt="#";
var iTemp;
for(var i=1; i<7; i++) {
iTemp=parseInt("0x"+sColor.substr(i,1))+iStep;
if(iTemp>15)
iTemp=15;
if(iTemp<0)
iTemp=0;
sRslt+=asHex[iTemp];
}
return sRslt;
}
// ]]></script></pre>
<div id="mybutton" style="text-align: center; padding-top: 2px; color: white; height: 20px; width: 100px; font-size: 9pt; cursor: default;">Button</div>
<div id="mybutton1" style="text-align: center; padding-top: 2px; color: white; height: 20px; width: 100px; font-size: 9pt; cursor: default;">Button</div>
<pre>
<script type="text/javascript" language="javascript">// <![CDATA[
Chang("#6699CC");
function Chang(color)
{
var lcolor = lightColor(color,4);
var dcolor = lightColor(color,-4);
var bcolor = lightColor(color,-2);
mybutton.style.backgroundColor = color;
mybutton.style.borderLeft = "1px solid " + lcolor;
mybutton.style.borderTop = "1px solid " + lcolor;
mybutton.style.borderRight = "1px solid " + dcolor;
mybutton.style.borderBottom = "1px solid " + dcolor;

mybutton1.style.backgroundColor = bcolor;
mybutton1.style.borderLeft = "1px solid " + dcolor;
mybutton1.style.borderTop = "1px solid " + dcolor;
mybutton1.style.borderRight = "1px solid " + lcolor;
mybutton1.style.borderBottom = "1px solid " + lcolor;
}

// ]]></script>
[/code]