自动改变文字颜色，以确保可读性

本文介绍了自动改变文字颜色，以确保可读性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 FF00FF ， ccaa22 用户可以通过接受RGB十六进制的文本框设置一个按钮的背景颜色>等，所以我需要设置文本颜色相反。不知道的术语（相反的颜色），但这个想法是保证可读性。

解决方案

您可以反转背景颜色，并用它作为前景色。下面的算法产生的结果等同于图像>调整>反相命令颜色在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