Colour Wheel using pixels in DOM

HTML

<div id="wheel"></div>

CSS

.pixel {
    display: block;
    float: left;
    height: 3px;
    width: 3px;
    margin: 0 1px 1px 0;
    border-radius: 3px;
}

.first {
    clear: left;
}

JavaScript

var dim = 25; // Beware of setting too high
var html = '';

for(var i = 0; i < dim; i++) {
    // Draw row
    for(var j = 0; j < dim; j++) {
        // Draw pixel
        html += '<span class="pixel' + (j == 0 ? ' first' : '') 
        + '" style="background-color: ' + getColour(i,j,dim/2) 
        + '"></span>';
    }
}

$('#wheel').append(html);

// Returns colour of pixel based on its offset
//   and circle's radius (square width / 2)
function getColour(i, j, radius) {
    var angle;
    var col = '#fff';
    var x = j - radius;
    var y = radius - i;
    
    var dist = Math.sqrt(x*x + y*y);
    
    // If inside the circle
    if(dist <= radius) {
        angle = Math.round(180 * Math.acos(x / dist) / Math.PI 
           * (y < 0 ? 1 : -1))
           + 90;
        col = 'hsl(' + angle + ', ' 
           + (Math.round(dist / radius * 100)) + '%, ' 
           + (80 - Math.round(dist / radius * 20)) + '%)';
    }
    
    return col;
}