您可以反转背景颜色,并用它作为前景色。下面的算法产生的结果等同于图像>调整>反相命令颜色在Photoshop:
\r\r
函数invertColor(hexTripletColor){\r VAR颜色= hexTripletColor;\r 颜色= color.substring(1); // 去掉 #\r 颜色= parseInt函数(颜色,16); //转换为整数\r 颜色= 0XFFFFFF ^色; //反转三个字节\r 颜色= color.toString(16); //转换为十六进制\r 颜色=(000000+彩色).slice(-6); //带前导零垫\r 颜色=#+色; // $ P $#PPEND\r 返回的颜色;\r}\r/ *\r *示范\r * /\r功能randomColor(){\r VAR色;\r 颜色= Math.floor(的Math.random()* 0x1000000); // 0x0和0XFFFFFF之间的整数\r 颜色= color.toString(16); //转换为十六进制\r 颜色=(000000+彩色).slice(-6); //带前导零垫\r 颜色=#+色; // $ P $#PPEND\r 返回的颜色;\r}\r$(函数(){\r $(。demolist李)。每个(函数(){\r 变种C1 = randomColor();\r 变种C2 = invertColor(C1);\r $(本)的.text(C1 ++ C2)的.css({\r 色:C1,\r 背景颜色:C2\r });\r });\r});\r
{体字体:大中加粗等宽; }\r.demolist {保证金:0;填充:0;列表样式类型:无;溢出:隐藏; }\r.demolist李{浮动:左;宽度:5em的;高度:5em的;文本对齐:中心; }\r
&LT; UL类=demolist&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r &LT;立GT;&LT; /李&GT;\r&LT; / UL&GT;\r&LT;脚本src=\"ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>\r\r\r请注意,这不是一个防弹溶液。颜色是接近50%的亮度和/或饱和度不会产生足够的对比度。
上的jsfiddle 演示
Users can set the background-color of a button through a textbox that accept RGB hexadecimal notation: ff00ff, ccaa22, etc. So I need to set the text color to the opposite. Not sure about the terminology (opposite color) but the idea is assure readability.
解决方案You can invert the background color and use it as foreground color. The following algorithm produces results identical to the "Image > Adjustments > Invert" color command in Photoshop:
function invertColor(hexTripletColor) { var color = hexTripletColor; color = color.substring(1); // remove # color = parseInt(color, 16); // convert to integer color = 0xFFFFFF ^ color; // invert three bytes color = color.toString(16); // convert to hex color = ("000000" + color).slice(-6); // pad with leading zeros color = "#" + color; // prepend # return color; } /* * Demonstration */ function randomColor() { var color; color = Math.floor(Math.random() * 0x1000000); // integer between 0x0 and 0xFFFFFF color = color.toString(16); // convert to hex color = ("000000" + color).slice(-6); // pad with leading zeros color = "#" + color; // prepend # return color; } $(function() { $(".demolist li").each(function() { var c1 = randomColor(); var c2 = invertColor(c1); $(this).text(c1 + " " + c2).css({ "color": c1, "background-color": c2 }); }); });body { font: bold medium monospace; } .demolist { margin: 0; padding: 0; list-style-type: none; overflow: hidden; } .demolist li { float: left; width: 5em; height: 5em; text-align: center; }
<ul class="demolist"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script src="ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Note that this is not a bullet-proof solution. Colors that are close to 50% brightness and/or saturation will not produce sufficient contrast.
Demo on jsFiddle
更多推荐
自动改变文字颜色,以确保可读性
发布评论