jiguang/random_color.html

## random_color.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        h1{font: bold 14px/1.5em \5FAE\8F6F\96C5\9ED1; color: #333;}
        button{cursor: pointer;}
        #opt{ margin-bottom: 15px;}
        #opt label, #opt input{font: 12px/20px arial;}
        #opt input{width: 40px; padding: 0 2px;}
        .node{float: left; margin-right: 2px; margin-bottom: 2px; width: 100px; height: 100px; padding: 5px; color: #777; font: bold 14px arial; cursor: pointer;}
    </style>
    <script type="text/javascript" src="lib/ZeroClipboard.js"></script>
    <script type="text/javascript" src="lib/jquery-1.8.3.min.js"></script>
<body>
<h1>随机一组较 浅/深 的颜色 </h1>
<div id="opt">
    <label for="light">亮度： 0.<input id="light" type="number" placeholder="Lightness" value="9" min="1" max="9"></label>
    <button type="button" id="random">RANDOM</button>
</div>
<div id="color_wrap">

</div>
<script type="text/javascript">
$(function(){

    function rgbToHsl(r, g, b){
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;

        if(max == min){
            h = s = 0; // achromatic
        }else{
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max){
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }

        return [h, s, l];
    }

    function hslToRgb(h, s, l){
        var r, g, b;

        if(s == 0){
            r = g = b = l; // achromatic
        }else{
            function hue2rgb(p, q, t){
                if(t < 0) t += 1;
                if(t > 1) t -= 1;
                if(t < 1/6) return p + (q - p) * 6 * t;
                if(t < 1/2) return q;
                if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                return p;
            }

            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

        return [r * 255, g * 255, b * 255];
    }

    function toFixedHexString(num){
        num = parseInt(num).toString(16);
        if(num.length === 1){
            num = '0' + num;
        }
        return num;
    }

    function randomColor(l){
        l = l || 0.9;

        var random_hsb = rgbToHsl(parseInt(Math.random()*255), parseInt(Math.random()*255), parseInt(Math.random()*255));
        var random_rgb = hslToRgb(random_hsb[0], random_hsb[1], l);

        return '#'
                + toFixedHexString(random_rgb[0])
                + toFixedHexString(random_rgb[1])
                + toFixedHexString(random_rgb[2]);
    }

    function flipColor(color_string){
        var color_array = color_string.replace('#', '').match(/[0-9a-f]{2}/ig);
        for(var i = 0, j = color_array.length; i<j; i++){
            color_array[i] = toFixedHexString(255 - parseInt(color_array[i], 16));
        }
        return '#' + color_array.join('');
    }

    $('#random').click(function(){
        var list = document.createDocumentFragment();

        var light = '0.' + $('#light').val();

        for(var i = 0; i < 20; i++){
            var color = randomColor(parseFloat(light));
            var node = document.createElement('div');
            node.id = 'c'+i;
            node.title = '点击复制颜色值';
            node.className = 'node';
            node.style.color = flipColor(color);
            node.setAttribute('data-clipboard-text', color);
            node.innerHTML = node.style.background = color;
            list.appendChild(node);
        }

        $('#color_wrap').empty().append(list);

        $('.node').each(function(){
            var $this = $(this);
            var temp = new ZeroClipboard(document.getElementById($this.attr("id")), {
                moviePath: "http://ecd.ecc.com/laserji/lib/ZeroClipboard.swf"
            } );
            temp.on( 'complete', function(){
                $(this).html('已复制');
            });
        });

    }).trigger('click');

});
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<style type="text/css">
	h1{font: bold 14px/1.5em \5FAE\8F6F\96C5\9ED1; color: #333;}
	button{cursor: pointer;}
	#opt{ margin-bottom: 15px;}
	#opt label, #opt input{font: 12px/20px arial;}
	#opt input{width: 40px; padding: 0 2px;}
	.node{float: left; margin-right: 2px; margin-bottom: 2px; width: 100px; height: 100px; padding: 5px; color: #777; font: bold 14px arial; cursor: pointer;}
	</style>
	<script type="text/javascript" src="lib/ZeroClipboard.js"></script>
	<script type="text/javascript" src="lib/jquery-1.8.3.min.js"></script>
	<body>
	<h1>随机一组较浅/深的颜色 </h1>
	<div id="opt">
	<label for="light">亮度： 0.<input id="light" type="number" placeholder="Lightness" value="9" min="1" max="9"></label>
	<button type="button" id="random">RANDOM</button>
	</div>
	<div id="color_wrap">

	</div>
	<script type="text/javascript">
	$(function(){

	function rgbToHsl(r, g, b){
	r /= 255, g /= 255, b /= 255;
	var max = Math.max(r, g, b), min = Math.min(r, g, b);
	var h, s, l = (max + min) / 2;

	if(max == min){
	h = s = 0; // achromatic
	}else{
	var d = max - min;
	s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	switch(max){
	case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	case g: h = (b - r) / d + 2; break;
	case b: h = (r - g) / d + 4; break;
	}
	h /= 6;
	}

	return [h, s, l];
	}

	function hslToRgb(h, s, l){
	var r, g, b;

	if(s == 0){
	r = g = b = l; // achromatic
	}else{
	function hue2rgb(p, q, t){
	if(t < 0) t += 1;
	if(t > 1) t -= 1;
	if(t < 1/6) return p + (q - p) * 6 * t;
	if(t < 1/2) return q;
	if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
	return p;
	}

	var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
	var p = 2 * l - q;
	r = hue2rgb(p, q, h + 1/3);
	g = hue2rgb(p, q, h);
	b = hue2rgb(p, q, h - 1/3);
	}

	return [r * 255, g * 255, b * 255];
	}

	function toFixedHexString(num){
	num = parseInt(num).toString(16);
	if(num.length === 1){
	num = '0' + num;
	}
	return num;
	}

	function randomColor(l){
	l = l \|\| 0.9;

	var random_hsb = rgbToHsl(parseInt(Math.random()255), parseInt(Math.random()255), parseInt(Math.random()*255));
	var random_rgb = hslToRgb(random_hsb[0], random_hsb[1], l);

	return '#'
	+ toFixedHexString(random_rgb[0])
	+ toFixedHexString(random_rgb[1])
	+ toFixedHexString(random_rgb[2]);
	}

	function flipColor(color_string){
	var color_array = color_string.replace('#', '').match(/[0-9a-f]{2}/ig);
	for(var i = 0, j = color_array.length; i<j; i++){
	color_array[i] = toFixedHexString(255 - parseInt(color_array[i], 16));
	}
	return '#' + color_array.join('');
	}

	$('#random').click(function(){
	var list = document.createDocumentFragment();

	var light = '0.' + $('#light').val();

	for(var i = 0; i < 20; i++){
	var color = randomColor(parseFloat(light));
	var node = document.createElement('div');
	node.id = 'c'+i;
	node.title = '点击复制颜色值';
	node.className = 'node';
	node.style.color = flipColor(color);
	node.setAttribute('data-clipboard-text', color);
	node.innerHTML = node.style.background = color;
	list.appendChild(node);
	}

	$('#color_wrap').empty().append(list);

	$('.node').each(function(){
	var $this = $(this);
	var temp = new ZeroClipboard(document.getElementById($this.attr("id")), {
	moviePath: "http://ecd.ecc.com/laserji/lib/ZeroClipboard.swf"
	} );
	temp.on( 'complete', function(){
	$(this).html('已复制');
	});
	});

	}).trigger('click');

	});
	</script>
	</body>
	</html>