Tints and shades generator
A full scale of tints and shades for a colour, 50 to 950, ready for Tailwind or CSS variables.
Your colour lands on step 500, unchanged. The other steps follow a smooth lightness ramp in OKLCH.
Export as
Values
Click a step to copy it. The small number is its contrast on white; 4.5:1 or more is fine for text.
:root {
--brand-50: #f1f7ff;
--brand-100: #dfedfd;
--brand-200: #c5dffe;
--brand-300: #9cc9ff;
--brand-400: #60aaff;
--brand-500: #1e90ff;
--brand-600: #0076da;
--brand-700: #0062b7;
--brand-800: #005098;
--brand-900: #00427e;
--brand-950: #05294e;
}- 1Pick a colour.
- 2See its scale from light to dark.
- 3Copy it as Tailwind config or CSS.
- Where are my colours and images worked on?
- In your browser, on your device. Colours you type and images you open stay with you.
- Does it work offline?
- Yes. Once this page has loaded, it keeps working without an internet connection.
- Which colour formats can I use?
- HEX, RGB, HSL, HWB, OKLCH, OKLab, CMYK, the 148 CSS colour names, or just three numbers like 30 144 255.
Related tasks
Ready-made settings for common jobs.
Other tools
More tools for working with colour.