Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Programmatically generate color chart?

Tags:

c#

In C#, how could I generate the following image programmatically?

http://deathmatchgame.files.wordpress.com/2010/07/color_picker.png

I am well-aware of how long this would take to process. That's fine. Performance is not top priority at the moment.

Edit Note that I am not interested in the right region of the image that only shows a gray-scale gradient.

like image 314
Mathias Lykkegaard Lorenzen Avatar asked Nov 04 '11 17:11

Mathias Lykkegaard Lorenzen


2 Answers

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);
    }
}
like image 167
Zann Anderson Avatar answered Sep 28 '22 11:09

Zann Anderson


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)

like image 38
Random832 Avatar answered Sep 28 '22 10:09

Random832