Shader for color picker

colorpicker.frag

// Shader to display a full rainbow and grayscales.
// A 2D color picker in a single pane.
//
// adapted from https://github.com/wsmind/js-pride/blob/master/shaders/rainbow.glsl

#define SMOOTH 1

// level is [0,5], assumed to be a whole number
vec3 rainbow(float level)
{
	/*
		Target colors
		=============
		
		L  x   color
		0  0.0 vec4(1.0, 0.0, 0.0, 1.0);
		1  0.2 vec4(1.0, 0.5, 0.0, 1.0);
		2  0.4 vec4(1.0, 1.0, 0.0, 1.0);
		3  0.6 vec4(0.0, 0.5, 0.0, 1.0);
		4  0.8 vec4(0.0, 0.0, 1.0, 1.0);
		5  1.0 vec4(0.5, 0.0, 0.5, 1.0);
	*/
	
	float r = float(level <= 2.0) + float(level > 4.0) * 0.5;
	float g = max(1.0 - abs(level - 2.0) * 0.5, 0.0);
	float b = (1.0 - (level - 4.0) * 0.5) * float(level >= 4.0);
	return vec3(r, g, b);
}

vec3 smoothRainbow (float x)
{
    float level1 = floor(x*6.0);
    float level2 = min(6.0, floor(x*6.0) + 1.0);
    
    vec3 a = rainbow(level1);
    vec3 b = rainbow(level2);
    
    return mix(a, b, fract(x*6.0));
}

float gray (float x)
{
    // 0    0.5
    // 0.25 0
    // 0.75 1
    // 1    0.5
    float y = x - 0.25;
    return abs(2.0 * (y - floor(0.5 + y)));
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 uv = fragCoord.xy / iResolution.xy;
    
    #if SMOOTH
    vec3 color = smoothRainbow(uv.x);
    #else
    vec3 color = rainbow(floor(uv.x*6.0));
    #endif
    float shade = gray(uv.y);
    float hascolor = float(uv.y >= 0.25 && uv.y <= 0.75);
    
	fragColor = vec4(mix(color, vec3(shade), 2.0 * abs(shade - 0.5)), 1.0) * hascolor + vec4(vec3(shade), 1.0) * (1.0 - hascolor);
}