Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm making a paint program using applets in Java, and I want to create some sort of color palette where the colors blend into each other, similar to this:

enter image description here

However, I'm having trouble understanding the correlation between the R, G, B, values and the X, Y coordinates for both the outer circular color palette, and the inner hue selecting palette.

Representation:

enter image description here

enter image description here

share|improve this question

closed as off topic by Byte56, Sean Middleditch, Josh Petrie, Trevor Powell, Laurent Couvidou Feb 13 '13 at 11:20

Questions on Game Development Stack Exchange are expected to relate to game development within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

2  
This question does not seem to include anything specific to game development. It would probably be better suited for our sister site, Stack Overflow. –  Ilmari Karonen Feb 10 '13 at 23:34
    
You could also use Java's own color chooser, if it's not too ugly for you: docs.oracle.com/javase/tutorial/uiswing/components/… –  msell Feb 11 '13 at 18:55

2 Answers 2

up vote 5 down vote accepted

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;
    }
}
share|improve this answer

Usually you would implement this sort of thing via an HSV to RGB conversion, not in RGB directly. The angle around the ring controls the hue, and the XY coordinates on the square select saturation and value. Then you convert the HSV color to an RGB color using the standard formulas, for example as written on Wikipedia.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.