Tuesday, November 22, 2011

Color wheel


Painters and computer artists, often use a color wheel which is composed of color hues arranged along a circle. There are some interesting features in such a presentation of this color table (also available in the HSV/HSL color space): primary, secondary, and complementary colors...


Here, I assume that we work in a RGB color space. If you don't know what it is, check my previous post [Link].

1- Red, green, and blue: the primary colors...

In a color wheel, each color is defined by an angle in the range of 0 to 360°. By convention, the red color is located at 0°, the green at 120°, and blue at 240° as shown in Fig.1.

Fig.1: Red, green, and blue: the three first colors in the wheel.

In the RGB color space, red corresponds to (255,0,0)RGB, green to (0,255,0)RGB, and blue to (0,0,255)RGB.

2- Cyan, magenta, and yellow: the secondary colors

By adding the adjacent colors in the color wheel, you obtain the following colors:
Cyan (0,255,255)RGB: green and blue at 180°.
Magenta (255,0,255)RGB: blue and red at 300°.
Yellow (255,255,0)RGB a mixture of red and green at 60°.
Fig.2: Cyan, magenta, and yellow are obtained by adding the adjacent primary colors.

Note: If you work in a subtractive color model like CMY, the primary colors are cyan, magenta, and yellow and the secondary ones are red, green, and blue.

3- Complementary colors


When a color is  added to its complementary color, the result yields a gray level. For example, in RGB color space, red is complementary of cyan
Red (255,0,0)RGB + Cyan (0,255,255)RGB = White (255,255,255)RGB

Thanks to the color wheel, that's very simple to find the complementary color, you just look at the shade diametrically opposed (yellow and blue, green and magenta,etc.).

4- The other shades

By interpolating two neighboring colors (among the six previously defined in Fig.2), you compute all the other color shades as shown in Fig. 3.
Fig.3: Color wheels with A) 90 shades  and B) 360 shades.
Here is the evolution of the red, green, and blue values in the color table.
Fig.4: Evolution of the red, green, and blue channels in the color wheel
In ImageJ (Image > Lookup Tables), such a color table exists and is entitled 'Spectrum'.

5- Scripts for drawing a color wheel.

5-1- Basic script
In this script, each color is drawn in the ith slice of a stack where i represents the rotation (expressed in degrees) as shown in the scheme of Fig.4. Then, this stack is summed to yield the color wheel. Two parameters are added to select the line width and the subdivision number.

Drawing primary and secondary colors
First, the 6 colors are initialized as an array containing the red, green, and blue components plus the rotation (in degrees).

// I N I T
rgb=newArray(255,0,0,0,255,255,0,60,0,255,0,120,
0,255,255,180,0,0,255,240,255,0,255,300);


Then, the drawing is done in a function called drawRay(..)

 function drawRay(r,g,b,rot) {
  setSlice(rot+1); setLineWidth(lw); setColor(r,g,b);
  drawLine(128,30,128,60);
  run("Rotate... ", "angle="+rot+" grid=1 interpolation=Bilinear fill");
}

The last step is the interpolation calculation ...

Here is the whole script...
+++ IJ snippet +++ +++ End of IJ snippet +++

5-2- Faster and simpler script
This script is composed of 2 parts:
(i) A gray-level ramp image is created in polar coordinates.
(ii) This gray-level image is converted in RGB using the Spectrum LUT.

To create the gray-level ramp wheel, the function Process > Math > Macro... is used...

Once the gray-level ramp image is created, the LUT table 'Spectrum' corresponding to the colors of the wheel are applied and converted to a RGB-image.

newImage(in, "8-bit Ramp", 360, 40, 1);
run("Spectrum");
run("RGB Color");

Finally, this image is masked to get a black background.

Here is the whole script...
+++ IJ snippet +++ +++ End of IJ snippet +++

No comments:

Post a Comment