# How to draw a Color Spectrum (Color Picker)?

This topic is 4644 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

How to create a quad with full color spectrum or "Color picker" like in paint or photoshop? When I try this: glShadeModel(GL_SMOOTH); glBegin(GL_QUADS); glColor3f(1.0,1.0,1.0); glVertex2i(200,200); glColor3f(0.0,0.0,1.0); glVertex2i(400, 200); glColor3f(0.0,1.0,0.0); glVertex2i(400, 400); glColor3f(1.0,0.0,0.0); glVertex2i(200, 400); glEnd(); It doesn't give me all colors (like black or brown), also, is there HSL color mod? cause I want a luminosity also.

##### Share on other sites
What you want to do is probably something like this?

http://clb.demon.fi/files/ui.png

That kind of color picker has the hue on the x-axis and combined saturation/lightness on the y-axis. Good theory can be found in wikipedia:

http://en.wikipedia.org/wiki/HLS_color_space

My code that draws a color picker like the one above is adapted from one of the wikipedia's links:
// Helper function called by HSL2RGBfloat Hue2RGB(float v1, float v2, float vH){   if (vH < 0) vH += 1.f;   if (vH > 1) vH -= 1.f;   if (6.f * vH < 1) return v1 + (v2 - v1) * 6.f * vH;   if (2.f * vH < 1) return v2;   if (3.f * vH < 2) return v1 + (v2 - v1) * (0.666666f - vH) * 6.f;   return v1;}// Input: hsl.x = hue, hsl.y = saturation, hsl.z = lightness, all inside [0,1].// Output: rgb inside [0,1]. D3DXVECTOR3 HSL2RGB(D3DXVECTOR3 hsl){	D3DXVECTOR3 rgb;	if (hsl.y == 0) // if saturation 0, give a grayscale color (fill with lightness component)		rgb.x = rgb.y = rgb.z = hsl.z;	else	{		float var_1 = 0;		float var_2 = 0;		if (hsl.z < 0.5f)			var_2 = hsl.z * (1.0f + hsl.y);		else           			var_2 = (hsl.z + hsl.y) - (hsl.y * hsl.z);		var_1 = 2.f * hsl.z - var_2;		rgb.x = Hue2RGB(var_1, var_2, hsl.x + 0.333333f);		rgb.y = Hue2RGB(var_1, var_2, hsl.x);		rgb.z = Hue2RGB(var_1, var_2, hsl.x - 0.333333f);	} 	return rgb;}// I use this function to fill the 2D colormap.. Loop for each pixel in the 2d map and call this function with x = [0,1] and y = [0,1].D3DXVECTOR3 ColorMap(float x, float y){	float h = x;	float s = 1.0f - y;	float l = 1.0f - y; // you may want to make this an external variable!	return HSL2RGB(D3DXVECTOR3(h,s,l));}

If you want to be able to get more finetuned colors, you could make the lightness parameter a controllable variable.

##### Share on other sites
Thanks but I need it in OpenGl.
And you are using Directx's APIs.
I want pure OpenGl if it's possible.

##### Share on other sites
This code should be easy to adapt to OpenGL. Just use your own vector or color class for the computations. The color values then can be stored in a gl texture for display. After a click you can determine the color under the cursor.

##### Share on other sites
Ok, I understood the conversion part.
Now I have to apply those functions in my drawing, the question is if I should draw this quad via glBegin(GL_QUADS) or I should draw a set of vertical lines where I set the converted color for both vertex of each line?

##### Share on other sites
another question:
who calls the
D3DXVECTOR3 ColorMap(float x, float y)
fucntion and whar are x and y?
What is this 2D map and how should I define it?

##### Share on other sites
i assume something like
vec3 col[100][100];
for ( int x=0; x<100; x++ )
for ( int y=0; y<100; y++ )
col[x][y] = ColorMap(x*0.01,y*0.01);

use col to create a texture (may need to scale nums 0->1 -> 0->255)

1. 1
Rutin
25
2. 2
3. 3
4. 4
5. 5

• 9
• 10
• 13
• 19
• 14
• ### Forum Statistics

• Total Topics
632943
• Total Posts
3009354
• ### Who's Online (See full list)

There are no registered users currently online

×