Tailwind Color Scale Generator
Generate a Tailwind-style color scale from a base color.
About This Tool
Generate a practical 50-950 scale from one base color and copy CSS variables for quick implementation.
Use it for prototypes, internal tools, brand experiments, and design tokens that need a consistent color ramp.
brand-50
#F4F7FE
brand-100
#E5ECFD
brand-200
#C2D3F9
brand-300
#96B4F5
brand-400
#628FF1
brand-500
#2563EB
brand-600
#2157CF
brand-700
#1B49AE
brand-800
#153988
brand-900
#102A63
brand-950
#0A1A3D
CSS variables
How to Use
- 1
Enter the values you need or paste your text into the input area.
- 2
Adjust any options, units, or settings for your exact use case.
- 3
Review the result and copy it into your document, workflow, or next task.
Features
Instant Results
Outputs update directly in the browser as you enter values.
Browser-Based Processing
Your inputs are handled locally and are not uploaded for calculation.
Simple Inputs
Clear fields and readable outputs keep repeat tasks fast.
Free to Use
Use the tool immediately with no sign-up or installation.
Common use cases
- ›Create a first draft of a Tailwind-style brand palette.
- ›Copy CSS custom properties into a theme file.
- ›Test whether a brand color has enough light and dark range.