ASW Palette Explorer

Open Props gives you 16 oklch steps from one --palette-hue value. Drag the slider — the whole palette shifts.

The 16 steps — --color-1 to --color-16

Your dark mode mapped to this palette

On the Craft of Invisible Systems

There is a particular quality to systems that work well. They recede. The thermostat that holds a room at precisely the right temperature.

A link in blue — the OG HTML blue

Muted secondary text for metadata and captions.

OK Warn Error Info

What this means for ASW

--surface = --color-16
10% lightness — body background. Currently --gray-12 (#030507)
--surface-1 = --color-15
16% lightness — cards, sidebars
--text = --color-3
93% lightness — primary text, easy on the eyes (not pure white)
--text-2 = --color-5
80% lightness — secondary text
--text-3 = --color-7
66% lightness — muted text
--link = blue at hue 250, chroma pushed
Links stay blue regardless of palette hue — the OG HTML convention
--accent = --color-8
58% lightness, peak chroma — the most vivid step in the palette

Change the hue above: 250 = indigo (current), 220 = blue, 145 = green, 45 = amber, 0 = red, 330 = pink. The whole surface/text system shifts. Links stay blue.