Color Harmony in 3D HSV Space

Base Colour (HSV)

Hue 210°

Saturation 70%

Value 85%

Harmony Scheme

Current Colour

HSV 210°, 70%, 85% → #4098D9

Scheme

Complementary

Hue offsets

+180°

Harmony Swatches

How it works

Every colour is a point inside the HSV cylinder: angle = Hue (0–360°), radius = Saturation (0=axis/grey, 1=rim), height = Value (0=black base, 1=bright top). The point cloud on the right samples this solid directly, so its own colour at every position is computed the same way your screen renders it:

C = V·S,  X = C·(1 − |((H/60) mod 2) − 1|),  m = V − C
(R',G',B') by 60°-sector of H, then (R,G,B) = (R'+m, G'+m, B'+m)

A harmony scheme is just a rule for placing extra points at fixed hue offsets from the base, all sharing the same saturation/value ring, which is why the markers below always trace a regular polygon around the cylinder's central axis:

Complementary — 1 point at +180°: maximum hue contrast, a line straight through the axis.
Analogous — 3 points at −30°/0°/+30°: neighbouring hues, a narrow low-contrast arc.
Triadic — 3 points at 0°/+120°/+240°: an equilateral triangle, balanced high contrast.
Split-Complementary — 3 points at 0°/+150°/+210°: complementary contrast with less tension than a pure pair.
Tetradic (Square) — 4 points at 0°/+90°/+180°/+270°: two complementary pairs, a square.

Drag Hue/Saturation/Value to move the base point anywhere in the solid — the harmony shape rides along with it, always rigid, because the offsets between hues never change.

Base colour Harmony points

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.