Make your own free website on
Color picker

download zipped fla of color picker

Flash does not support "getPixelRGB" function. so we can not get what color is that pixels.  For bitmap, we can read the bitmap file by other program and get that offset and find the color according to the bitmap file format. But this can not be done by Flash itself. 

Fortunately the standard hue diagram is created by a function. We can use that function to create a hue diagram and of-course, we can use that function to get the color of pixel offset.

Here is how the diagram is constructed.

Typically, the diagram contains 6 segments. Each segment is a combinationof gradient fill and a solid fill. See the diagram below. For example, the first segment is constucted by a red value from 255-255 combining with an increasing gradient of green value of 0-255; The second segment is decreasing r value with solid g value. ...... etc. So, it is easy to construct a hue diagram by this combination.

To construct or read the hue diagram:

function getHue(cOffset, fadeWidth) {
    //fadeWidth=50, so 50 solid and 50 fade;
    var cHue = 255-Math.round((256/fadeWidth)*(cOffset-fadeWidth));
    if (cHue<0) {
        cHue = 0;
    if (cHue>255) {
        cHue = 255;
    return cHue;

Here, the fadeWidth is a segment width, that is 1/6 of the width of this diagram. cOffset is how far that pixel is away from the center. If distance is less than a segment width, it is solid fill. If distance is greater than a segment width, then it is gradient fill.

getColor = function (k, pickerWidth) {
    bCenter = pickerWidth/3;
    gCenter = pickerWidth*2/3;
    rCenter = pickerWidth;
    fadeWidth = pickerWidth/6;
        // k is offset from 0 to whole range pickerWidth
        // 100 Green,200 blue;
    gHue = getHue(gOffset, fadeWidth);

    bOffset = Math.abs(k-bCenter);
    bHue = getHue(bOffset, fadeWidth);

    if (k<bCenter) {
        rOffset = k;
    } else {
        rOffset = rCenter-k;
    rHue = getHue(rOffset, fadeWidth);

    return {rHue:rHue, gHue:gHue, bHue:bHue};

We can construct this diagram by attaching multiple stripes and setting the rgb of stripe to the color we calculated out.

Or, you can even copy the diagram in any graph software. If that diagram is standard type, this function can be applied well. We just need to adjust the sequence of rgb (some use r- b- g- r such as photoshop); It will be much easier to import bitmap of color hue diagram than created by stripes.

If you like, you can use this function to create hue wheel instead of hue band. No problem, just a difference of _x and angle;