Color picker code needed

1

what i have is this:

function drawGradientBox(size:uint, col:Array, alph:Array, rat:Array, matRot:Number):Sprite {
    var sp:Sprite = new Sprite();
    var mat:Matrix = new Matrix();
    var fill:String = GradientType.LINEAR;
    mat.createGradientBox(size, size, matRot, 0, 0);
    sp.graphics.beginGradientFill(fill, col, alph, rat, mat);
    sp.graphics.drawRect(0, 0 ,size, size);
    return sp;
}
var colorPicker:Sprite = new Sprite();
var colors:Array = [0xFF0000, 0XFFFF00, 0X00FF00, 0X00FFFF, 0X0000FF, 0XFF00FF, 0XFF0000];
var alphas:Array = [1, 1, 1, 1, 1, 1, 1];
var ratios:Array = [0, 42, 84, 126, 168, 210, 255];
var spectrum:Sprite = drawGradientBox(200, colors, alphas, ratios, 0);
colorPicker.addChild(spectrum);

var colors2 = [0x000000, 0X000000];
var alphas2 = [1, 0];
var ratios2 = [0, 255];
var overlay:Sprite = drawGradientBox(200, colors2, alphas2, ratios2, deg2rad(-90));
colorPicker.addChild(overlay);
colorPicker.x = colorPicker.y = 100;
this.addChild(colorPicker);

function deg2rad(deg:Number):Number {
    return deg * Math.PI / 180;
}
/////////// color picker functionality
var col:uint;
var bmd:BitmapData = new BitmapData(colorPicker.width, colorPicker.height, false, 0xFFFFFFFF);
bmd.draw(colorPicker);
colorPicker.addEventListener(MouseEvent.MOUSE_DOWN, onClick, false, 0 , true);

function onClick(e:MouseEvent):void {
    if (spectrum.hitTestPoint(mouseX, mouseY, true)) {
        col = bmd.getPixel(spectrum.mouseX, spectrum.mouseY);
        trace(prependZeros(col));
    }
}
function prependZeros(hex:uint):String {
    var hexString = hex.toString(16).toUpperCase();
    var cnt:int = 6 - hexString.length;
    var zeros:String = "";
    for (var i:int = 0; i < cnt; i++) {
        zeros += "0";
    }
    return "0x" + zeros + hexString;
}

and it looks like this:

but i want it to look like the flash color picker component where all colors are divided:

i forgot to mention that i dont want to use flash components :smiley: