3
\$\begingroup\$

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

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

2 Answers 2

5
\$\begingroup\$

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;
    }
}
\$\endgroup\$
3
\$\begingroup\$

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.

\$\endgroup\$

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.