Browser not supported

This site needs a newer browser. On iPhone or iPad, update to iOS 16.4 or later if your device allows it. Otherwise, open this page on a recent Chrome, Safari, Edge, or Firefox.

Handwritten product notes and sketches

This was an internal project inspired by my background in fine art. Many classically trained painters keep a mental model (a 3D map) of all colours so they can mix them with confidence.

When researching how I could apply this to additive colour mixing, I discovered the benefits of OKLCH—its human-centric geometry and expanded gamut. By adopting this model, I realised I could vector between points to create naturally harmonising palettes.

The missionDevelop a product that outputs beautiful colour palettes for brand and UI design.

Precise Harmony

I built Volume to produce more naturally beautiful colour palettes for UI design, brand work, and illustration. The foundation is a precisely calibrated colour framework, one that makes perfectly even spacing of colour swatches possible across lightness, chroma, and hue simultaneously. The palettes that emerge feel as considered as they are mathematically correct.

swatch-0oklch(90% 0.065 228)
swatch-1oklch(90% 0.1 208)
swatch-2oklch(90% 0.13 188)
swatch-3oklch(90% 0.13 168)
swatch-4oklch(90% 0.13 148)
swatch-5oklch(90% 0.13 128)
swatch-6oklch(90% 0.13 108)
swatch-7oklch(90% 0.13 88)
swatch-8oklch(90% 0.09 68)
swatch-10oklch(70% 0.13 228)
swatch-11oklch(70% 0.13 208)
swatch-12oklch(70% 0.13 188)
swatch-13oklch(70% 0.13 168)
swatch-14oklch(70% 0.13 148)
swatch-15oklch(70% 0.13 128)
swatch-16oklch(70% 0.13 108)
swatch-17oklch(70% 0.13 88)
swatch-18oklch(70% 0.13 68)
swatch-20oklch(50% 0.125 228)
swatch-21oklch(50% 0.11 208)
swatch-22oklch(50% 0.115 188)
swatch-23oklch(50% 0.13 168)
swatch-24oklch(50% 0.13 148)
swatch-25oklch(50% 0.13 128)
swatch-26oklch(50% 0.125 108)
swatch-27oklch(50% 0.115 88)
swatch-28oklch(50% 0.125 68)
swatch-0oklch(73% 0.22 8)
swatch-1oklch(73% 0.23 358)
swatch-2oklch(73% 0.23 348)
swatch-3oklch(73% 0.23 338)
swatch-4oklch(73% 0.23 328)
swatch-5oklch(73% 0.23 318)
swatch-6oklch(73% 0.2 308)
swatch-7oklch(73% 0.175 298)
swatch-8oklch(73% 0.16 288)
swatch-10oklch(56% 0.22 8)
swatch-11oklch(56% 0.23 358)
swatch-12oklch(56% 0.23 348)
swatch-13oklch(56% 0.23 338)
swatch-14oklch(56% 0.23 328)
swatch-15oklch(56% 0.23 318)
swatch-16oklch(56% 0.2 308)
swatch-17oklch(56% 0.175 298)
swatch-18oklch(56% 0.16 288)
swatch-20oklch(41% 0.22 8)
swatch-21oklch(41% 0.23 358)
swatch-22oklch(41% 0.23 348)
swatch-23oklch(41% 0.23 338)
swatch-24oklch(41% 0.23 328)
swatch-25oklch(41% 0.23 318)
swatch-26oklch(41% 0.2 308)
swatch-27oklch(41% 0.175 298)
swatch-28oklch(41% 0.16 288)

GPS for Colour

Most colour tools give you a wheel and a slider. Volume gives you a map. By modelling the OKLCH colour space as a true 3D solid, Volume reveals relationships between colours that flat tools simply cannot show: how lightness, chroma, and hue interact spatially, and where the boundaries of the sRGB and P3 gamuts actually fall. The result is a colour selection process grounded in human perception rather than arbitrary geometry.

Three simultaneous views of the OKLCH colour solid: 3D map, 2D lightness slice, and isolated node view
Three simultaneous views: the full colour solid, a 2D lightness slice, and an isolated node view.
2D OKLCH slice showing nodes at identical chroma and 20 degree hue intervals
Nodes at identical chroma (C=0.24) and 20° hue intervals, resulting in perfectly even steps.

Geometry First

Volume's colour solid doesn't exist as a mathematical abstraction rendered on the fly. Instead, I opted to make each lightness slice a physical mesh, constructed in Blender with thousands of precisely placed vertices. This makes the app lightning fast once loaded, even with over 100 nodes (colour swatches) moving in unison.

3D mesh construction of Volume colour solid lightness slices in Blender

Sync to Figma

I ported Volume into a Figma plugin so designers, myself included, could use it without leaving their existing workflow. Palettes sync into Figma as design tokens, and to the web through Volume's API for saving and organising.

Mobile dashboard using Volume palette tokens synced from Figma
Sample UI mockup, designed using swatches exported from Volume
Volume Figma plugin syncing OKLCH design tokens to Figma
Volume plugin running in Figma

The outcomeHundreds of installs from designers within the first two months of release.