Color Scale Generator: Derived 50–950 CSS and Tailwind Config
Derive an eleven-step 50–950 sRGB color scale with the base at 500, copy colors and export CSS variables or Tailwind theme configuration.
Enabling local controls…
Generator settings
Base at 500, mixed toward white/black in sRGB. Derived scale, not official Tailwind colors or a perceptually uniform ramp. Tailwind output uses theme.extend configuration; CSS variables work independently. Check text contrast separately.
Inputs stay in page memory without transmission, storage or URL insertion.
Static source date: 2026-10-17
Preview and complete output
Set fields or load a sample, then generate.
How to use this tool
Name the scale, enter a HEX base and generate. Inspect each derived step before copying CSS variables or a Tailwind theme.extend config.
When not to use it
This is a derived sRGB scale, not an official Tailwind palette or perceptually uniform ramp. Config output uses the theme.extend format; CSS variables also work independently.