By Vinnie Garcia · All experiments

A color wheel you can turn sideways

Look down from above and the spheres form rings of hue. Turn the view sideways and you can see the lightness layers. The neutral colors sit on the central axis, with more colorful samples farther out.

Drag to orbit, then scroll or pinch to zoom. Follow a row outward to change chroma without changing hue or lightness. Follow a vertical column to change lightness while the other two coordinates stay put.

The page sits under the Munsell experiments, but these colors are calculated in OKLCH. The systems both separate hue, lightness, and colorfulness. Their numbers aren't interchangeable.

What's in the cloud

The code samples 72 hue angles, five degrees apart. Each gets eleven chroma positions from 0 to 0.4 and five lightness levels from 0.3 to 0.9. Hue becomes an angle, chroma becomes distance from the center, and lightness becomes height.

Culori converts those coordinates to hex colors. Three.js draws them on unlit spheres, so a light in the scene doesn't brighten one side and darken the other. At zero chroma the repeated samples share the same center position. Hue is undefined there because changing it can't change a neutral color.

The outer edge is just where the sampling stops. It isn't the boundary of what your screen can display. The code keeps colors outside the RGB gamut, and conversion to hex can clip them. Two different coordinates can end up looking the same, especially farther out in the saturated rings. This is a view of requested coordinates, not a set of calibrated swatches.

The interactive version lets you change the sampling and click a sphere for its coordinates. CSS Color Level 4 has the definitions behind OKLCH.