Developer color tool
Tailwind color scale generator.
Turn any brand color into an editable 50–950 scale, compare balanced, vivid, soft, and high-contrast profiles, and export code for Tailwind v4, Tailwind v3, CSS, or JSON.
Tailwind color generator
Create a perceptual 50–950 shade scale from HEX, RGB, CMYK, OKLCH, or a CPS reference.Base color
#2563EB
The scale keeps the base hue while adjusting OKLCH lightness and chroma. Shade 500 carries the CPS reference when one is used.
Profile: Balanced
50
100
200
300
400
500
600
700
800
900
950
Web design mockup
See the generated scale applied to a realistic responsive interface.
Northstar
SaaS workspace
Project overview
GrowthLast 30 days
Surface 50Border 200Action 600Text 950CPS 23500E
@theme {
--color-brand-50: oklch(96.8% 0.018 233); /* #E9F7FF */
--color-brand-100: oklch(93.1% 0.036 242); /* #D4ECFF */
--color-brand-200: oklch(86% 0.072 248); /* #ACD6FF */
--color-brand-300: oklch(77% 0.119 256); /* #80B7FF */
--color-brand-400: oklch(67.3% 0.173 260); /* #5493FF */
--color-brand-500: oklch(58.9% 0.215 263); /* #3271FA */
--color-brand-600: oklch(50% 0.203 263); /* #1D56D4 */
--color-brand-700: oklch(41.9% 0.177 263); /* #1241AB */
--color-brand-800: oklch(34% 0.143 263); /* #0B2F80 */
--color-brand-900: oklch(26.9% 0.104 263); /* #082158 */
--color-brand-950: oklch(17.9% 0.064 263); /* #030F2D */
}Developer handoff
Build a color scale that is easier to use consistently
A useful Tailwind scale needs more than eleven unrelated swatches. Color Pick varies perceptual lightness and chroma across the range, while keeping every shade editable before export.
How to use this tool
- 1Enter the base color
Choose the color that should anchor the scale and confirm its HEX value.
- 2Select a generation profile
Use Balanced, Vivid, Soft, or High Contrast, then regenerate to compare different scale behavior.
- 3Review UI previews
Inspect surfaces, text, borders, buttons, and dark-mode examples instead of judging isolated swatches.
- 4Edit and export
Adjust individual shades, then copy or download Tailwind v4, Tailwind v3, CSS, JSON, PNG, or SVG.
Useful for
- Brand scales for Tailwind projects
- Design-system primitive tokens
- Light and dark interface themes
- Fast developer handoff
Why OKLCH helps
OKLCH separates perceptual lightness, chroma, and hue. That makes it easier to create a scale with more predictable visual progression than changing RGB channels independently.
Important limitations
- Generated scales still need contrast testing in their actual foreground and background roles.
- Very bright or highly saturated colors may clip to the display gamut.
- Review state colors, dark mode, and real component usage before shipping.
Common questions
Answers before you export.
Does the generator support Tailwind v4?
Yes. It exports Tailwind v4 theme variables as well as Tailwind v3 configuration, CSS variables, and JSON.
What does Regenerate Scale change?
It cycles through distinct scale profiles and recalculates lightness and chroma. Manual shade edits are reflected in the exported result.
Are all generated shades accessible?
No shade is universally accessible. Contrast depends on the paired foreground or background. Test important combinations in the Contrast Checker.
Color Guides
Browse all guides