Build the ramps in OKLCH
Lightness changes predictably while hue stays recognizable. Chroma tapers near white and black, then each tone is mapped safely into sRGB.
One color. A usable interface.
Tint turns your brand color into the colors a real product needs: surfaces, text, actions and focus states for one selected theme at a time. Change the color above—the preview is the explanation.
Ship a theme that holds up.
Actions carry the brand voice. Surfaces stay quiet, while controls and feedback remain readable.
The colors that carry the interface.
The useful minimum: foundations, readable text, the main action and its supporting container. Secondary joins the row when you add one. Click a swatch to copy it.
What Tint does with your source color.
Assign UI roles by theme
Primary drives the accent and a restrained neutral family. Optional Secondary gets its own roles without recoloring the base surfaces.
Move the tone when necessary
Tint tests the pairs that matter. If the source tone cannot meet the chosen ratio, the semantic tone moves—and the change stays visible.