# HSV color

The HSV color space is based on how humans perceive color, and as such, makes various aesthetically-pleasing color transformations very simple.

- Hue describes where in the spectrum the color is. As Hue increases, a color will transition in the following order: Red, orange, yellow, green, teal, blue, violet, purple, magenta, red.
- Saturation denotes how vibrant a color is. Ranges from grey to pure color.
- Value is how saturated an image is, the amount of each color.

This function converts HSV values to RGB:

    -- Converts HSV to RGB. (input and output range: 0 - 255)

    function HSV(h, s, v)
        if s <= 0 then return v,v,v end
        h, s, v = h/256*6, s/255, v/255
        local c = v*s
        local x = (1-math.abs((h%2)-1))*c
        local m,r,g,b = (v-c), 0,0,0
        if h < 1     then r,g,b = c,x,0
        elseif h < 2 then r,g,b = x,c,0
        elseif h < 3 then r,g,b = 0,c,x
        elseif h < 4 then r,g,b = 0,x,c
        elseif h < 5 then r,g,b = x,0,c
        else              r,g,b = c,0,x
        end return (r+m)*255,(g+m)*255,(b+m)*255
    end

and the same function implemented in GLSL, for those that need it:

        vec3 HSV(float h, float s, float v)
        {
        	if (s <= 0 ) { return vec3 (v); }
            h = h * 6;
        	float c = v*s;
        	float x = (1-abs((mod(h,2)-1)))*c;
        	float m = v-c;
        	float r = 0.0;
            float g = 0.0;
            float b = 0.0;

        	if (h < 1) { r = c; g = x;b = 0.0;}
    	    else if (h < 2) { r = x; g = c; b = 0.0; }
    	    else if (h < 3) { r = 0.0; g = c; b = x; }
    	    else if (h < 4) { r = 0.0; g = x; b = c; }
    	    else if (h < 5) { r = x; g = 0.0; b = c; }
    	    else  { r = c; g = 0.0; b = x; }

        	return vec3(r+m,g+m,b+m);
        }

Or for those who want to save up on space (and achieve better performance, as branching is quite costly on GPUs), here's one-liner:

    vec3 hsv(float h,float s,float v) { return mix(vec3(1.),clamp((abs(fract(h+vec3(3.,2.,1.)/3.)*6.-3.)-1.),0.,1.),s)*v; }

##

Category:

- Snippets