如何检查hex颜色是否“太黑”？
我试图评估颜色select器select颜色的黑暗程度，看它是否“太黑”，如果是，则将其设置为白色。 我以为我可以使用hex值的第一个字符将其closures。 它正在工作，但它也正在切换一些合法的“光”色。
我有这样的代码：
if (lightcolor.substring(0,3) == "#00"|| lightcolor.substring(0,3) == "#010"){ lightcolor="#FFFFFF"; color=lightcolor; } 用hexmath必须有一个更有效的方法来知道一种颜色已经超出了一定程度的黑暗？ 就像lightcolor +“一些hex值”<=“hex值”，然后将其设置为白色。
我添加了tinyColor，这可能是有用的，但我不知道。
一堆！
您必须逐个提取三个RGB分量，然后使用标准公式将产生的RGB值转换为其感知的亮度。
假设六个字符的颜色：
var c = c.substring(1); // strip # var rgb = parseInt(c, 16); // convert rrggbb to decimal var r = (rgb >> 16) & 0xff; // extract red var g = (rgb >> 8) & 0xff; // extract green var b = (rgb >> 0) & 0xff; // extract blue var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709 if (luma < 40) { // pick a different colour }
编辑
自2014年5月以来， tinycolor现在具有getBrightness()函数，尽pipe使用了CCIR601加权因子，而不是上面的ITU-R加权因子。
TinyColor库（你已经提到过）提供了几个检查和操作颜色的函数，其中包括：
-
getBrightness
按照Web内容可访问性准则（1.0版）的定义，返回从0到255的颜色的感知亮度。
tinycolor("#fff").getBrightness(); // 255 -
isLight
返回一个布尔值，指示颜色的感知亮度是否轻。
tinycolor("#fff").isLight(); // true tinycolor("#000").isLight(); // false -
isDark
返回一个布尔值，指示颜色的感知亮度是否是黑暗的。
tinycolor("#fff").isDark(); // false tinycolor("#000").isDark(); // true -
getLuminance
根据Web内容可访问性准则（2.0版）的定义，返回0-1的颜色感知亮度。
tinycolor("#fff").getLuminance(); // 1
亮度和亮度之间有一个重要的区别。 在一天结束的时候，亮度是衡量能量在某个区域传播的程度，完全忽略了我们的感知系统如何感知能量。 另一方面，亮度是衡量我们如何感知能量，并考虑到亮度与感知系统之间的关系的一个指标。 （作为混淆的一点，有一个术语叫做“相对亮度”，这个术语似乎与亮度术语是同义的，它使我很好）。
确切地说，您正在寻找其他人所build议的“亮度”，“数值”或“相对亮度”。 你可以用几种不同的方式来计算（比如人类！） http://en.wikipedia.org/wiki/HSL_and_HSV#Lightness
- 取R，G和B的最大值
- 取R，G和B的最大值和最小值的平均值
- 取三者的平均值。
- 像别人在这里所说的那样使用一些加权平均值
你可以计算亮度 ：
因此，亮度是表面表面会有多亮的指标。
所以select文本应该是白色还是黑色是很好的select。
var getRGB = function(b){ var a; if(b&&b.constructor==Array&&b.length==3)return b; if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b))return[parseInt(a[1]),parseInt(a[2]),parseInt(a[3])]; if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b))return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]; if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b))return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3], 16)]; if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b))return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]; return (typeof (colors) != "undefined")?colors[jQuery.trim(b).toLowerCase()]:null }; var luminance_get = function(color) { var rgb = getRGB(color); if (!rgb) return null; return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]; }
上面的方法允许你以不同的格式传递颜色，但algorithm基本上只在luminance_get 。
当我使用它时，如果亮度大于180 ，则将颜色设置为黑色，否则为白色。
一个可能的解决办法是将你的颜色从RGB转换成HSB 。 HSB代表色调，饱和度和亮度（也称为HSV，其中V代表价值）。 那么你只有一个参数来检查：亮度。
我意识到这个谈话已经过了几年了，但是它还是相关的。 我想补充一点，我的团队在Java（SWT）中遇到了同样的问题，并且发现这个问题更加准确：
private Color getFontColor(RGB bgColor) { Color COLOR_BLACK = new Color(Display.getDefault(), 0, 0, 0); Color COLOR_WHITE = new Color(Display.getDefault(), 255, 255, 255); double luminance = Math.sqrt(0.241 * Math.pow(bgColor.red, 2) + 0.691 * Math.pow(bgColor.green, 2) + 0.068 * Math.pow(bgColor.blue, 2)); if (luminance >= 130) { return COLOR_BLACK; } else { return COLOR_WHITE; } }
这工作与hex#fefefe
function isTooDark(hexcolor){ var r = parseInt(hexcolor.substr(1,2),16); var g = parseInt(hexcolor.substr(3,2),16); var b = parseInt(hexcolor.substr(4,2),16); var yiq = ((r*299)+(g*587)+(b*114))/1000; // Return new color if to dark, else return the original return (yiq < 40) ? '#2980b9' : hexcolor; }
您可以将其更改为通过更改返回true或false
return (yiq < 40) ? '#2980b9' : hexcolor;
至
return (yiq < 40);
