demo.js

/*global window, $ */

$(function () {
        /** From 
http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
*/
        /**
         * Converts an HSL color value to RGB. Conversion formula
         * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
         * Assumes h, s, and l are contained in the set [0, 1] and
         * returns r, g, and b in the set [0, 255].
         *
         * @param   Number  h       The hue
         * @param   Number  s       The saturation
         * @param   Number  l       The lightness
         * @return  Array           The RGB representation
         */
    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];
    }
    /**
     * Converts an HSV color value to RGB. Conversion formula
     * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
     * Assumes h, s, and v are contained in the set [0, 1] and
     * returns r, g, and b in the set [0, 255].
     *
     * @param   Number  h       The hue
     * @param   Number  s       The saturation
     * @param   Number  v       The value
     * @return  Array           The RGB representation
     */
    function hsvToRgb(h, s, v){
        var r, g, b;

        var i = Math.floor(h * 6);
        var f = h * 6 - i;
        var p = v * (1 - s);
        var q = v * (1 - f * s);
        var t = v * (1 - (1 - f) * s);

        switch(i % 6){
            case 0: r = v, g = t, b = p; break;
            case 1: r = q, g = v, b = p; break;
            case 2: r = p, g = v, b = t; break;
            case 3: r = p, g = q, b = v; break;
            case 4: r = t, g = p, b = v; break;
            case 5: r = v, g = p, b = q; break;
        }

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

    /**
     * Returns a random integer between min (inclusive) and max (inclusive)
     * Using Math.round() will give you a non-uniform distribution!
     */
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    $('#calculate').on('click', function (event) {
        event.preventDefault();
        var a=getRandomInt(0,255);
        var b=getRandomInt(0,255);
        var c=getRandomInt(0,255);

        console.log([a, a*360/255]);
        var rgb1=hslToRgb(a/255,b/255,c/255);
        var rgb2=hsvToRgb(a/255,b/255,c/255);

        var color =  [];
        //color.push({c:"#"+Math.floor(a).toString(16)+Math.floor(b).toString(16)+Math.floor(c).toString(16), i:"myrgb"});
        color.push({c:"rgb(" + a + "," + b + "," + c + ")",i:"rgb"});
        //color.push({c:"#"+Math.floor(rgb1[0]).toString(16)+Math.floor(rgb1[1]).toString(16)+Math.floor(rgb1[2]).toString(16),i:"myhsl"});
        color.push({c:"hsl(" + a*360/255 + "," + b*100/255 + "%," + c*100/255 + "%)" ,i:"hsl f"});
        color.push({c:"hsl(" + a*360/255 + "," + 50 + "%," + 50 + "%)",i:"hsl sl=fixe1"});
        color.push({c:"hsl(" + a*360/255 + "," + 70 + "%," + 50 + "%)",i:"hsl sl=fixe1.1"});
        color.push({c:"hsl(" + a*360/255 + "," + 50 + "%," + 30 + "%)",i:"hsl sl=fixe1.2"});
        color.push({c:"hsl(" + a*360/255 + "," + 70 + "%," + 30 + "%)",i:"hsl sl=fixe1.3"});
        //color.push({c:"hsl(" + (a+256*b)*360/(65536) + "," + 50 + "%," + 50 + "%)",i:"hsl sl=fixe2"});
        //color.push({c:"#"+Math.floor(rgb2[0]).toString(16)+Math.floor(rgb2[1]).toString(16)+Math.floor(rgb2[2]).toString(16),i:"myhsv"});


        var str='<tr>'
        for (var i=0; i< color.length; i++) {
            var str=str+'<td style="background-color:' + color[i].c + '">' +color[i].i + '</td><td>&nbsp</td>';
        }
        var str=str+"</tr>"
        $('#list').append(str);
    });
});

test.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Color Demo</title>
  </head>
  <body>
    <h1>Color Demo</h1>
    <button id="calculate">Calculate</button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="demo.js"></script>
        <table id="list">
        </table>
  </body>
</html>

Try to generate different colors and human eye different color from random number.