geo*_*ged 13 javascript color-scheme
在我们目前正在处理的一个页面上,用户可以更改显示文本的背景.
我们希望自动更改前景色以保持文本的合理对比度.
我们也希望颜色范围是自由裁量的.例如,如果背景以255为增量从白色变为黑色,我们不希望看到255种色调的前景色.在这种情况下,也许是2到4,只是为了保持合理的对比度.
任何UI /设计/颜色专家/画家在那里鞭打公式？
eni*_*ent 23
根据luma做出的黑白决定很适合我.Luma是R,G和B值的加权和,根据人类对相对亮度的感知进行调整,在视频应用中显然很常见.luma的官方定义随着时间的推移而发生了变化,具有不同的权重; 见这里:http://en.wikipedia.org/wiki/Luma_(video).我使用Rec获得了最好的结果.709版本,如下面的代码所示.可能165的黑白阈值似乎很好.
function contrastingColor(color)
{
return (luma(color) >= 165) ? '000' : 'fff';
}
function luma(color) // color can be a hx string or an array of RGB values 0-255
{
var rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
}
function hexToRGBArray(color)
{
if (color.length === 3)
color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
else if (color.length !== 6)
throw('Invalid hex color: ' + color);
var rgb = [];
for (var i = 0; i <= 2; i++)
rgb[i] = parseInt(color.substr(i * 2, 2), 16);
return rgb;
}
Kev*_*ner 12
就纯粹的可读性而言,您希望在任何背景上使用黑白文本.因此将RGB转换为HSV,并检查V是否<0.5.如果是这样,白色,如果不是,黑色.
先尝试一下,看看你是否觉得它很有吸引力.
如果你不这样做,那么当你的背景太亮或太暗时,你可能希望白色和黑色不那么明显.要将其调低,请保持相同的色调和饱和度,并将这些值用于亮度:
background V foreground V
0.0-0.25 0.75
0.25-0.5 1.0
0.5-0.75 0.0
0.75-1.0 0.25
在中等颜色上,您仍然可以看到黑色或白色文本,这些文字非常易读.在深色或浅色上,您将看到相同的颜色文本,但在亮度方面至少3/4,因此仍然可读.我希望它看起来不错:)
试试这个例子,根据r,g和b值的平均值将其设置为黑色或白色.也适合测试!如果您发现不能很好地工作的情况,请在那里替换更好的算法.
<html>
<head>
<script>
function rgbstringToTriplet(rgbstring)
{
var commadelim = rgbstring.substring(4,rgbstring.length-1);
var strings = commadelim.split(",");
var numeric = [];
for(var i=0; i<3; i++) { numeric[i] = parseInt(strings[i]); }
return numeric;
}
function adjustColour(someelement)
{
var rgbstring = someelement.style.backgroundColor;
var triplet = rgbstringToTriplet(rgbstring);
var newtriplet = [];
// black or white:
var total = 0; for (var i=0; i<triplet.length; i++) { total += triplet[i]; }
if(total > (3*256/2)) {
newtriplet = [0,0,0];
} else {
newtriplet = [255,255,255];
}
var newstring = "rgb("+newtriplet.join(",")+")";
someelement.style.color = newstring;
return true;
}
function randomiseBackground(someelement)
{
var vals = [];
for(var i=0; i<3; i++) { vals[i]=Math.floor(Math.random()*256+1); }
someelement.style.backgroundColor="rgb("+vals.join(",")+")";
return true;
}
</script>
</head>
<body onload="adjustColour(document.getElementById('mypara'));">
<p id="mypara" style="background-color:#2287ea">Some text</p>
<form>
<input type=button onclick="var elem=document.getElementById('mypara'); randomiseBackground(elem); adjustColour(elem);" value="randomise background" />
</form>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
7853 次 |
| 最近记录： |