Tailwind color palette generator
Make a Tailwind-style 50–950 scale from your brand colour.
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.
@theme {
--color-brand-50: #f1f7ff;
--color-brand-100: #dfedfd;
--color-brand-200: #c5dffe;
--color-brand-300: #9cc9ff;
--color-brand-400: #60aaff;
--color-brand-500: #1e90ff;
--color-brand-600: #0076da;
--color-brand-700: #0062b7;
--color-brand-800: #005098;
--color-brand-900: #00427e;
--color-brand-950: #05294e;
}- 1Pick a colour.
- 2See its scale from light to dark.
- 3Copy it as Tailwind config or CSS.
- Good to know
- Paste the config into tailwind.config or the @theme block.
- 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.
Related tasks
Ready-made settings for common jobs.
Other tools
More tools for working with colour.