GLSL shader example
Rainbow Gradient (HSV to RGB)
Convert HSV to RGB in GLSL to get an animated rainbow gradient, with a compact branch-free hsv2rgb function.
Live example
Edit the code and the preview updates as you type.
How it works
RGB is how screens mix light, but it is awkward for picking colors. HSV describes a color the way people do:
- Hue: which color on the color wheel. 0% is red, 33% green, 67% blue, 100% back to red.
- Saturation: how vivid. 0% is gray, 100% is the pure color.
- Value: how bright. 0% is black, 100% full brightness.
Sweeping hue from 0 to 1 across the screen gives a rainbow for free, which is very hard to do by mixing RGB values by hand.
hsv2rgb computes each of the red, green and blue channels as a triangle wave over the hue, shifted by a third of the wheel for each channel. clamp flattens the tops of the triangles, and mix with the saturation fades toward white.
Try changing it
| Change | Result |
|---|---|
saturation to 0.3 | Soft pastel colors |
uv.x to length(uv - 0.5) | A circular rainbow from the center |
u_time * 0.1 to u_time * 0.5 | Colors flow five times faster |
fract(uv.x + ...) to 0.6 | A single blue hue, getting brighter toward the top |