Foundations
Seventeen hue ramps, each ten steps from 50 to 900, generated by Harmoni and shipped in the token layer for you to build with. Every swatch below shows the text colour that reads best on it.
Five of the hues are Primitiv's own semantic colours. Red is the danger ramp, amber is warning, green is success, cyan is info, and blue is the default brand, so the library never holds two reds that are almost the same.
The other twelve sit evenly between those five on the OkLCH hue wheel. Each takes its lightness and colourfulness from its two neighbours, so the whole library reads as one family. Yellow and lime are the exception: they sit lighter, because a yellow only looks yellow when it is light. Every ramp holds its hue from 50 to 900 and has a light and a dark version: the tokens switch with the theme, just like brand.
Every step is a custom property named --primitiv-color-<hue>-<step>. For text on a step, use the token in that hue's table: it is the one Harmoni picked for the best contrast, and every pairing passes WCAG AA for body text.
.tag-violet { background: var(--primitiv-color-violet-100); /* The text token the table below pairs with violet-100. */ color: var(--primitiv-color-violet-900);}Showing the dark theme. Switch the site theme to see the other set.
Same colours as danger
Same colours as warning
Same colours as success
Same colours as info
Same colours as brand