🎨 Everything runs in your browser. No install, no sign-up.
Where each step goes
- · 50~200 Backgrounds, soft highlights, disabled states
- · 400~600 Buttons and links — the brand colour proper
- · 700~900 Pressed states, and text on dark backgrounds
- The note on the right of each row says whether white or black text clears the accessibility threshold (4.5:1) on that background.
What this tool does
- Ten steps from 50 to 900
- HEX and HSL per step
- Marks whether white or black text reads
- Copy the set as CSS variables
Other colour tools
Colours may look slightly different depending on your screen and its colour profile.