Colours from one seed, each at a fixed lightness, so that their contrast holds whatever the seed's hue.
A token is a map of these, e.g. {:l 0.33 :c 0.1 :turn 180}, which CSS writes as oklch(from var(--seed) 33% min(c, 0.1) calc(h + 180)):
In :lch, the lightness is CIELAB's L*, like the tones of Material 3. L* follows WCAG's luminance, but for CIELAB's adaptation to the white of D50, so a pair of tokens keeps its contrast at every hue, to within a few percent for vivid colours and less for near-greys. In :oklch, the hues look more even, but the contrast varies more with the hue. The function worst-contrast says how far it goes. https://github.com/material-foundation/material-color-utilities/blob/main/typescript/hct/hct.ts
Colours from one seed, each at a fixed lightness, so that their contrast
holds whatever the seed's hue.
A token is a map of these, e.g. {:l 0.33 :c 0.1 :turn 180}, which CSS
writes as oklch(from var(--seed) 33% min(c, 0.1) calc(h + 180)):
- :space, its polar space, by default :oklch
- :l, its lightness in that space
- :c, the most chroma that it takes from the seed
- :turn, the degrees that its hue turns from the seed's
In :lch, the lightness is CIELAB's L*, like the tones of Material 3. L*
follows WCAG's luminance, but for CIELAB's adaptation to the white of
D50, so a pair of tokens keeps its contrast at every hue, to within a few
percent for vivid colours and less for near-greys. In :oklch, the hues
look more even, but the contrast varies more with the hue. The function
worst-contrast says how far it goes.
https://github.com/material-foundation/material-color-utilities/blob/main/typescript/hct/hct.ts(relative-css {:keys [space l c turn] :or {space :oklch turn 0}} prop)The token as a relative colour of CSS from the custom property prop,
e.g. oklch(from var(--seed) 33% min(c, 0.1) calc(h + 180)). A browser
clips it where it lies outside the display's gamut.
The `token` as a relative colour of CSS from the custom property `prop`, e.g. oklch(from var(--seed) 33% min(c, 0.1) calc(h + 180)). A browser clips it where it lies outside the display's gamut.
(tone token seed)The colour that the token takes from the seed, in the token's space,
with its chroma lowered until it lies in sRGB, so that its lightness and
hue stay those of the token.
The colour that the `token` takes from the `seed`, in the token's space, with its chroma lowered until it lies in sRGB, so that its lightness and hue stay those of the token.
(tones tokens seed)The colours that the map of tokens takes from the seed, by the same
keys.
The colours that the map of `tokens` takes from the `seed`, by the same keys.
(unmapped {:keys [space l c turn] :or {space :oklch turn 0}} seed)The colour that the token takes from the seed, in the token's space,
which may lie outside sRGB.
The colour that the `token` takes from the `seed`, in the token's space, which may lie outside sRGB.
(worst-contrast a b)The least contrast ratio of the tokens a and b over seeds of every
hue, from grey to vivid, as a map of these:
The least contrast ratio of the tokens `a` and `b` over seeds of every hue, from grey to vivid, as a map of these: - :ratio - :hue and :chroma, the seed's in OKLCH - :gamut, :map where tone maps the tokens into sRGB, or :clip where a browser clips them
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |