lib/oklch-utils. The base is centered in each; click a swatch to copy it.oklch(60.0% 0.000 255.0)Real <Button> / <Badge> components: they follow the glass style from the top menu and take your color as their tint. Glass text uses the APCA foreground (Lc 104 on this surface); destructive keeps its red.
Gradient schemes
The oklch gradient generator (lib/gradient-utils): four harmony schemes from one base hue, plus a stable seeded gradient: all emitted as linear-gradient(… in oklch).
Harmonic color tokens
CSS custom properties derived from the harmony anchor hue (--harmony-h), no JS. Each is calc(var(--harmony-h) + N°), and they follow the active theme: switch it from the header (◇) to see the harmony in context. Selenite + moonstone anchor the wheel at 0°, so their accents stay a colorful red-based set.
One row per harmony style: --hue-* angle tokens at a fixed illustrative chroma (mono row: --mono-1..3)
--color-*: ready tokens at a fixed vivid chroma (colorful in every theme, incl. selenite/moonstone)
Alpha tiers: accent at 0.04 → 0.5
Crystal flavors: white · tonal · hue
The crystal shine has three flavors (data-gloss): White is the classic flat specular, Tonal is a tonally-close single-hue tint of the theme, and Hue is iridescent: the highlight sweeps hues shifted up & down from the tint. The knobs apply site-wide, so switching the glass style to Crystal shows the same everywhere.
Foreground source
Pick the text foreground ramp, Tonal or Linear, and it sets the site's text palette live (via AutoForeground), band-picked for legibility (ARC Bronze). The panel below is a single glass-solid card on the page background, the real surface text sits on, so its Lc matches production. Tune the base color in the generator above; icons are demoed separately (lightness solved for the ui band at any hue).
readableForeground(ui): Lc 60| tier | color | L | chroma | Lc / band |
|---|---|---|---|---|
| large / heading | 77% | 0.000 | 61 / 45–76 | |
| body (default) | 87% | 0.000 | 79 / 75–90 | |
| fine / small | 93% | 0.000 | 93 / 90–100 |
Picking a ramp sets the site's text foreground live. The strip is the full Linear ramp (via themeForeground): extreme → base → extreme; each tier takes the swatch in its [floor–ceiling] band nearest target, so fine stays ≥ 90 (a floor, not a cap). Lc is modeled on the solid floor. Linear holds the theme's chroma; Tonal fades toward gray. Icons are separate: readableForeground solves lightness for the ui band at your chosen harmonic angle (complement / triad / split / tetrad / square, the same --hue-* tokens as the swatches), so they stay legible while tracking the theme.