🌬️
Tailwind Palette
Generate Tailwind custom colors. This tool runs 100% locally in your browser.
Advertisement
Ad Slot: tool-top
Advertisement
Ad Slot: tool-bottom
What is Tailwind Palette?
Generate a complete 50-950 Tailwind CSS color scale from a single hex color. Use these values directly in your tailwind.config.js file.
Ensure consistency with your primary brand color.
When to Use This Tool
- 1Setting up Tailwind projects
- 2Updating brand colors
- 3Creating design systems
Examples
Input
Base: #3B82F6
Result
50: #EFF6FF, ... 500: #3B82F6, ... 900: #1E3A8A
Frequently Asked Questions
Is it v3 compatible?
Yes, it generates the standard 11-shade scale used in Tailwind CSS v2 and v3.
Privacy & Security
Privacy is our priority. Unlike many other online tools, ToolsHub doesn't upload your data to any server. Whether you're processing sensitive text, calculating financial data, or generating passwords, everything stays in your browser.