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

我就是我 2022-12-05 12:08 164阅读 0赞

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

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

[2014/03/18][http_blog.ipodmp.com_2014_03_web-and-calculation-of-complementary-and-contrasting-colors-to-obtain.html] [ChinaBUG][]％1 $ S

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

**互补色**

摘自：[互补色简单计算法 ][Link 1]

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

![46437f21a460b785d0b6e79a72ea016f.png][]

要计算某种颜色的互补色，首先取得这个颜色的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\]

[http_blog.ipodmp.com_2014_03_web-and-calculation-of-complementary-and-contrasting-colors-to-obtain.html]: http://blog.ipodmp.com/2014/03/web-and-calculation-of-complementary-and-contrasting-colors-to-obtain.html
[ChinaBUG]: http://blog.ipodmp.com/author/chinabug
[Link 1]: http://www.blueidea.com/tech/graph/2003/616.asp
[46437f21a460b785d0b6e79a72ea016f.png]: /images/20221123/1f8a3e58adea403fb127e6d2d853ba43.png