3D HSV Color Visualizer

About

A personal project to get a feel for how the HSV colour model maps onto a solid shape. It renders the HSV cone in 3D and lets you pick a colour with sliders while a marker shows where that colour sits on the cone. It uses no libraries: the orbit camera, the world-to-view transform, the perspective projection, the depth sorting and the HSV→RGB conversion are all hand-written. It is a single static page.

Features

• 3D HSV cone with a full hue disc on top and the black apex at the bottom.
• Sliders and number boxes for Hue, Saturation and Value, with a live RGB / HEX preview.
• Marker on the cone for the selected colour, drawn as a dashed ring when it is on the far side.
• Hue in degrees (0–360) or in the OpenCV range (0–179), converted exactly.
• Drag with mouse, finger or pen to orbit; eased motion, sharp on HiDPI screens.

How it works

• Geometry — hue is the angle around the vertical axis, saturation the distance from it, value the height. The mesh is 48 hue segments × 24 rings for the side plus 8 saturation rings for the disc, each triangle coloured with the HSV value at its centre.
• Camera — an orbit camera on a sphere around the cone; a look-at basis is built from azimuth and elevation, clamped short of the poles so it never degenerates.
• Projection — pinhole model x = cx + f·x/z, y = cy − f·y/z; points behind the near plane are culled.
• Visibility — back faces are dropped using the analytic surface normal; the rest are sorted far-to-near and filled in that order (painter's algorithm), which is enough for a convex shape like this cone.