piskaty
piskaty
hello@piskaty.at
all experiments
interaction study · example

Chromatic dial

A little colour, with room to turn.

Turn the dial. Change its colour. Typed CSS properties let the gradient itself interpolate.

Customize

40°
155°
80°

Checking browser support…

The idea

A quiet instrument for exploring colour. Turn an arc, widen it, or switch between moss, clay and iris. The ring stays in place while the gradient changes within it.

Teach CSS what a variable means

Ordinary custom properties are token strings. Registering a property with @property gives it a type, allowing the browser to interpolate numbers and angles instead of jumping between strings.

Example
css
@property --study-angle {  syntax: "<angle>";  inherits: false;  initial-value: 40deg;}
@property --study-hue {  syntax: "<number>";  inherits: false;  initial-value: 155;}
.dial {  background: conic-gradient(    from var(--study-angle),    oklch(76% .12 var(--study-hue)),    oklch(48% .11 var(--study-hue)) 80deg,    transparent 125deg,    oklch(90% .035 var(--study-hue))  );  transition: --study-angle .6s, --study-hue .8s;}

OKLCH separates lightness, chroma and hue. Keeping the first two relatively steady makes comparing hues easier. The demo uses restrained chroma, though the final appearance still depends on display gamut.

Try this

Select a colour preset to see interpolation clearly. Then adjust rotation and arc width. These controls change CSS variables; no animation loop runs in JavaScript.

Support and accessibility

Every control is a labelled native range input or button. Reduced motion disables interpolation. Older browsers can fall back to a neutral gradient or immediate updates. Registered property names are prefixed because registrations are document-wide, even when the surrounding stylesheet is a CSS module.

Further reading