Scales · tints & shades
Tint & shade generator
Ten steps toward white, ten toward black from a single HEX — quick hover / pressed / disabled explorations when
your token spreadsheet only shipped brand-500 and the PM wants “the same purple, but shy.”
Why tints and shades here
Design systems often ship one brand hue and expect you to invent hovers. This page generates even RGB mixes toward white and black — predictable in code review, imperfect perceptually, and fast enough for Slack debates.
How to use it
- Pick a base color with the native input.
- Scan the ten-step strips toward white and black — click any chip to copy HEX.
- Paste candidates into mock CSS or your token draft.
- Run pairs through the contrast checker — light tints fail text faster than teams expect.
Use token ramps when…
You need semantic 50–950 scales or OKLCH-aware spacing. Jump to CSS variables once direction is set.
Practical uses
- Hover backgrounds one step lighter than base.
- Pressed states slightly darker without inventing a new hue.
- Styleguide strips when Figma is overkill.
FAQ
Why ten steps each direction?
Enough granularity for UI states without turning the page into a spreadsheet. If you need twelve, duplicate the pattern manually.
Does this understand OKLCH?
This tool sticks to RGB mixing for transparency of behavior. Use the OKLCH ramp in the token exporters when you want perceptual spacing.
Can I export CSS?
Copy chips only here — paste into your own loop or use the CSS variables generator for structured output.
I see banding in gradients — is this tool wrong?
Banding comes from shallow bit depth and long ramps in CSS, not from the HEX values themselves. Add a subtle noise overlay or shorten the gradient span; our stops are still valid anchors for the endpoints.