如何获得随机光色
How to get random light color
我想随机生成颜色十六进制代码和Javascript。这种颜色需要足够亮才能在上面放置黑色字体。
确保生成浅色的最佳方法是什么?在下面的函数中限制letters
会有帮助吗?
function getRandomColor() {
var letters = '0123456789ABCDEF'.split(''),
color = '#';
for(var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
This stack answer 似乎对你有用。一个这样的答案使用:
var randomColor = (function lol(m, s, c) {
return s[m.floor(m.random() * s.length)] +
(c && lol(m, s, c - 1));
})(Math, '3456789ABCDEF', 4);
JS Fiddle 来自上面的回答。
编辑:
更改此行以更改 light/dark 您希望的随机颜色(更改为 ABCDEF 将使它们更亮):
})(Math, '3456789ABCDEF', 4);
如果您可以忽略 IE8 及以下版本,您可以通过随机更改色调并将饱和度设置为 50% 并将光分量设置为 75%,在 hsl 中获得随机 'light' 颜色。
var lightColor='hsl('+Math.floor(Math.random()*361)+',50%,75%)';
var lightColor= 'hsl('+Math.floor(Math.random()*361)+',50%,75%)';
如果旧版浏览器需要,您可以将 hsl 颜色(足够接近)转换为 rgb-
function hslToRgb(hsl){
if(typeof hsl== 'string'){
hsl= hsl.match(/(\d+(\.\d+)?)/g);
}
var sub, h= hsl[0]/360, s= hsl[1]/100, l= hsl[2]/100,
t1, t2, t3, rgb, val;
if(s== 0){
val= Math.round(l*255).minmax(0, 255);
rgb= [val, val, val];
}
else{
if(l<0.5) t2= l*(1 + s);
else t2= l + s - l*s;
t1= 2*l - t2;
rgb= [0, 0, 0];
for(var i= 0; i<3; i++){
t3= h + 1/3*-(i - 1);
t3<0 && t3++;
t3>1 && t3--;
if(6*t3<1) val= t1 +(t2 - t1)*6*t3;
else if(2*t3<1) val= t2;
else if(3*t3<2) val= t1 +(t2 - t1)*(2/3 - t3)*6;
else val= t1;
rgb[i]= Math.round(val*255).minmax(0, 255);
}
}
return 'rgb('+rgb.join(',')+')';
}
lightColor+'~='+hslToRgb(lightColor);
/* 返回值:(字符串)
hsl(88,50%,75%)~= rgb(193,223,159)
*/
我想随机生成颜色十六进制代码和Javascript。这种颜色需要足够亮才能在上面放置黑色字体。
确保生成浅色的最佳方法是什么?在下面的函数中限制letters
会有帮助吗?
function getRandomColor() {
var letters = '0123456789ABCDEF'.split(''),
color = '#';
for(var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
This stack answer 似乎对你有用。一个这样的答案使用:
var randomColor = (function lol(m, s, c) {
return s[m.floor(m.random() * s.length)] +
(c && lol(m, s, c - 1));
})(Math, '3456789ABCDEF', 4);
JS Fiddle 来自上面的回答。
编辑: 更改此行以更改 light/dark 您希望的随机颜色(更改为 ABCDEF 将使它们更亮):
})(Math, '3456789ABCDEF', 4);
如果您可以忽略 IE8 及以下版本,您可以通过随机更改色调并将饱和度设置为 50% 并将光分量设置为 75%,在 hsl 中获得随机 'light' 颜色。
var lightColor='hsl('+Math.floor(Math.random()*361)+',50%,75%)';
var lightColor= 'hsl('+Math.floor(Math.random()*361)+',50%,75%)';
如果旧版浏览器需要,您可以将 hsl 颜色(足够接近)转换为 rgb-
function hslToRgb(hsl){
if(typeof hsl== 'string'){
hsl= hsl.match(/(\d+(\.\d+)?)/g);
}
var sub, h= hsl[0]/360, s= hsl[1]/100, l= hsl[2]/100,
t1, t2, t3, rgb, val;
if(s== 0){
val= Math.round(l*255).minmax(0, 255);
rgb= [val, val, val];
}
else{
if(l<0.5) t2= l*(1 + s);
else t2= l + s - l*s;
t1= 2*l - t2;
rgb= [0, 0, 0];
for(var i= 0; i<3; i++){
t3= h + 1/3*-(i - 1);
t3<0 && t3++;
t3>1 && t3--;
if(6*t3<1) val= t1 +(t2 - t1)*6*t3;
else if(2*t3<1) val= t2;
else if(3*t3<2) val= t1 +(t2 - t1)*(2/3 - t3)*6;
else val= t1;
rgb[i]= Math.round(val*255).minmax(0, 255);
}
}
return 'rgb('+rgb.join(',')+')';
}
lightColor+'~='+hslToRgb(lightColor);
/* 返回值:(字符串) hsl(88,50%,75%)~= rgb(193,223,159) */