The color picker widget you posted defines colors in HSV color space. In HSV space, a color is defined by three values:
hue: an angle between 0° and 360° which defines the color (0° is red, 120° is green, 240° is blue). In RGB terms, it tells you which channel (red, green or blue) is the one with the highest value, which one is the channel with the second highest value, and their ratio to each other.
saturation: the intensity of that color (a saturation of 0 is gray, hue doesn't matter in this case). In RGB terms, it represents the ratio between the highest channel and the lowest.
value: the brightness of the color (a value of 0 is black, neither hue nor saturation matter in this case). It's equal to the RGB channel with the highest value.
In the widget above, the outer ring represents the hue, the x-coordinate of the rectangle represents the saturation (0 is left), and the y-coordinate the volume (0 is at the bottom).
Here are two functions in C which convert between HSV and RGB. Source: http://www.cs.rit.edu/~ncs/color/t_convert.html
// r,g,b values are from 0 to 1
// h = [0,360], s = [0,1], v = [0,1]
// if s == 0, then h = -1 (undefined)
void RGBtoHSV( float r, float g, float b, float *h, float *s, float *v )
{
float min, max, delta;
min = MIN( r, g, b );
max = MAX( r, g, b );
*v = max; // v
delta = max - min;
if( max != 0 )
*s = delta / max; // s
else {
// r = g = b = 0 // s = 0, v is undefined
*s = 0;
*h = -1;
return;
}
if( r == max )
*h = ( g - b ) / delta; // between yellow & magenta
else if( g == max )
*h = 2 + ( b - r ) / delta; // between cyan & yellow
else
*h = 4 + ( r - g ) / delta; // between magenta & cyan
*h *= 60; // degrees
if( *h < 0 )
*h += 360;
}
void HSVtoRGB( float *r, float *g, float *b, float h, float s, float v )
{
int i;
float f, p, q, t;
if( s == 0 ) {
// achromatic (grey)
*r = *g = *b = v;
return;
}
h /= 60; // sector 0 to 5
i = floor( h );
f = h - i; // factorial part of h
p = v * ( 1 - s );
q = v * ( 1 - s * f );
t = v * ( 1 - s * ( 1 - f ) );
switch( i ) {
case 0:
*r = v;
*g = t;
*b = p;
break;
case 1:
*r = q;
*g = v;
*b = p;
break;
case 2:
*r = p;
*g = v;
*b = t;
break;
case 3:
*r = p;
*g = q;
*b = v;
break;
case 4:
*r = t;
*g = p;
*b = v;
break;
default: // case 5:
*r = v;
*g = p;
*b = q;
break;
}
}