Home▸Colours & Light▸Color Theory Interactive Experiment

🧪 Color Theory Interactive Experiment

Interactive 3D HSV colour-cylinder explorer: pick a base hue, saturation and value, then reveal complementary, analogous, triadic, split-complementary or tetradic harmony schemes as geometric shapes inscribed in the colour solid.

Colours & Light2DModerate60 FPS📱 Mobile-adapted
arts-color-theory-simulation ↗ Open standalone

Colour theory becomes concrete once you can see it: every colour a screen can show sits at one point inside the HSV cylinder, where angle is hue, radius is saturation and height is value. This simulation renders that solid as a real 3D point cloud, drops a marker on the colour you choose with the Hue/Saturation/Value sliders, and lets you reveal the classic harmony rules — complementary, analogous, triadic, split-complementary, tetradic — as rigid geometric shapes (a diameter, an arc, a triangle, a square) inscribed around the cylinder's axis. Rotate the view to watch a harmony scheme stay a perfect polygon no matter where you move the base colour, and read the resulting swatches, hex codes and hue offsets live.

⚙ Under the hood

This simulation demonstrates the principles of color theory, allowing users to experiment with hue, saturation, and value. It explores how colors interact and create different visual effects, illustrating fundamental concepts related to optics and perception.

Color Theory2D

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)