Programmatically generate color chart?

This image is a HSL (not HSV, white is S=0 in HSV) color space, with S at 100%, H on the horizontal axis, and L on the vertical axis. (The grayscale gradient is S=0) You could use the conversions at https://web.archive.org/web/20141023005253/http://bobpowell.net/RGBHSB.aspx and just iterate over all the pixels in your rectangle.

As a simple eyedropper palette, this gives you fully saturated colors (and grays, with the bit on the right).

The windows color picker, for comparison, puts S on the vertical axis (with L=50%) in the big square, resulting in gray at the bottom with a separate slider for L. This is less useful as an eyedropper palette. Another commonly seen color picker form is a circle with hue around the circle and saturation as radius (generally this puts white at the center, by using HSV with V=100, and a separate slider for value)


From the looks of it, that's an HSL color chart. The below code would generate a 2d array of colors that should correspond to what's in the image. I've left the implementation of FromHSL up to you, as well as how to get from this array to an actual image:

const int size = 1000;
const double ratio = 1.0 / size;
const double saturation = 1.0;
Color[,] colors = new Color[size,size];
for (int i = 0; i < size; i++)
{
    double lightness = 1.0 - i*ratio;
    for (int j = 0; j < size; j++)
    {
        double hue = j*ratio;
        colors[i, j] = FromHSL(hue, saturation, lightness);
    }
}

There are a bunch of sample projects out there to do something like that:

  • http://www.codeproject.com/KB/miscctrl/colorwheelv1.aspx
  • http://msdn.microsoft.com/en-us/magazine/cc164113.aspx
  • http://www.koders.com/csharp/fid6227A6F88369176FF1A3CDF19B33844D254DB5CC.aspx

Tags:

C#