HSB palette

by Alexander Shutov

HTML

<canvas id="field"></canvas>

JavaScript

function generateImage() {
    var canvas = document.getElementById("field"),
        ctx = canvas.getContext('2d'),
        x, y;
    var r, g, b;
    var h, s, l;
    var color;

    canvas.width = 128;
    canvas.height = 128;

    for (x = 0; x < canvas.width; x++) {
        for (y = 0; y < canvas.height; y++) {
            h = 15;
            s = x / canvas.width;
            l = 1 - y / canvas.height;
            color = getColor(h, s, l);

            ctx.fillStyle = "rgba(" + color.r + "," + color.g + "," + color.b + "," + 1 + ")";
            ctx.fillRect(x, y, 1, 1);
        }
    }
}

function getColor(h, s, l) {
    var r, g, b;
    if (h < 60) {
        r = 255;
        g = h / 60 * 255;
        b = 0;
    } else if (h < 120) {
        r = (120 - h) / 60 * 255;
        g = 255;
        b = 0;
    } else if (h < 180) {
        r = 0;
        g = 255;
        b = (180 - h) / 60 * 255;
    } else if (h < 240) {
        r = 0;
        g = (240 - h) / 60 * 255;
        b = 255;
    } else if (h < 300) {
        r = (h - 240) / 60 * 255;
        g = 0;
        b = 255;
    } else {
        r = 255;
        g = 0;
        b = (360 - h) / 60 * 255;
    }

    r = r * l;
    g = g * l;
    b = b * l;
    var max = 255 * l;
    r = max + (r - max) * s;
    g = max + (g - max) * s;
    b = max + (b - max) * s;

    return {
        r: Math.round(r),
        g: Math.round(g),
        b: Math.round(b)
    };
}

generateImage();