饱和度较低的几种随机颜色,JavaScript算法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
title
>colors</
title
>
<
style
type
=
"text/css"
>
.div {width:100px; height:100px; float:left;}
</
style
>
</
head
>
<
body
>
<
div
class
=
"div"
></
div
>
<
div
class
=
"div"
></
div
>
<
div
class
=
"div"
></
div
>
<
div
class
=
"div"
></
div
>
<
div
class
=
"div"
></
div
>
<
div
class
=
"div"
></
div
>
<
script
type
=
"text/javascript"
>
window.onload=function(){
var obj=document.getElementsByClassName('div');
for(var i=0;i<
obj.length
;i++){
obj[i]
.style.backgroundColor
=
hsl2color
([radomFuc(360), 100, 70])
}
}
function radomFuc($value) { //取随机数
return parseInt($value * Math.random());
}
function hsl2color(hsl) { //HSL颜色算法
if (hsl[0] > 360 || hsl[0] <
0
|| hsl[1] > 100 || hsl[1] <
0
|| hsl[2] > 100 || hsl[2] <
0
) return "#000000";
var rgb = [0, 0, 0];
if (hsl[0] <= 60) {
rgb[0] = 255;
rgb[1] = Math.floor(255 / 60 * hsl[0]);
} else if (hsl[0] <= 120) {
rgb[0] = Math.floor(255 - (255 / 60) * (hsl[0] - 60));
rgb[1] = 255;
} else if (hsl[0] <= 180) {
rgb[1] = 255;
rgb[2] = Math.floor((255 / 60) * (hsl[0] - 120));
} else if (hsl[0] <= 240) {
rgb[1] = Math.floor(255 - (255 / 60) * (hsl[0] - 180));
rgb[2] = 255;
} else if (hsl[0] <= 300) {
rgb[0] = Math.floor((255 / 60) * (hsl[0] - 240));
rgb[2] = 255;
} else if (hsl[0] <= 360) {
rgb[0] = 255;
rgb[2] = Math.floor(255 - (255 / 60) * (hsl[0] - 300));
}
var
sat
=
Math
.abs((hsl[1] - 100) / 100);
rgb[0] = Math.floor(rgb[0] - (rgb[0] - 128) * sat);
rgb[1] = Math.floor(rgb[1] - (rgb[1] - 128) * sat);
rgb[2] = Math.floor(rgb[2] - (rgb[2] - 128) * sat);
var lum = (hsl[2] - 50) / 50;
if (lum > 0) {
rgb[0] = Math.floor(rgb[0] + (255 - rgb[0]) * lum);
rgb[1] = Math.floor(rgb[1] + (255 - rgb[1]) * lum);
rgb[2] = Math.floor(rgb[2] + (255 - rgb[2]) * lum);
} else if (lum <
0
) {
rgb[0] = Math.floor(rgb[0] + rgb[0] * lum);
rgb[1] = Math.floor(rgb[1] + rgb[1] * lum);
rgb[2] = Math.floor(rgb[2] + rgb[2] * lum);
}
return "#" + (0x1000000 + rgb[0] * 0x010000 + rgb[1] * 0x000100 + rgb[2]).toString(16).substring(1);
}
</script>
</
body
>
</
html
>
发表回复