🎚️ Developer Tools

Color Shade Scale Generator

Pick one base color and generate a Tailwind-style 50–950 shade (tone) scale. Click any step to copy its HEX, or copy the whole ramp as CSS variables or a Tailwind object. It updates as you change the color, and your color never leaves the browser.

Examples (click to try)

Click a step to copy its HEX. 500 is roughly your base color.

How to use the shade scale generator

Pick a base color with the color picker, or type a value like #ea6379 into the HEX field (a 3-digit #RGB or a value without # also works). An 11-step lightness scale from 50 to 950 is generated on the spot, and clicking any step copies its HEX.

  • 500 is the anchor: 500 is roughly the base color you entered, and the scale spreads lighter (50–400) and darker (600–950) from there.
  • Click a step to copy: each step's HEX copies individually, ready to paste into Figma or any design tool.
  • Copy CSS variables: grabs every step as --color-50: #…; … so you can drop it into :root.
  • Copy Tailwind object: grabs { 50: '#…', 100: '#…', … } to paste into theme.colors in tailwind.config.

Handy for

  • Turning one brand color into the full range of lightness variants a UI needs (buttons, hovers, backgrounds, borders)
  • Defining a custom Tailwind CSS color and needing all the 50–950 values at once
  • Building a "same hue, different lightness" set for dark mode
  • Getting a uicolors.app / tints.dev style scale locally, with nothing sent anywhere

The lightness curve runs monotonically from the palest (50) to the deepest (950). Depending on your base color's lightness, 500 may sit close to a neighbouring step, but 500 always keeps the exact color you entered.

FAQ

Is the color I choose sent to a server?
No. The scale is calculated entirely in your browser. The color you pick and the scale it generates are never transmitted to or stored on any server, so you can use it with confidence.
What do the numbers 50 to 950 mean?
They are the lightness (tone) steps popularised by Tailwind CSS. Smaller numbers are lighter (50 is the palest) and larger numbers are darker (950 is the deepest). 500 is roughly your base color, and the scale spreads lighter tints and darker shades out from there. You assign the steps to buttons, text, backgrounds, borders and so on.
Where can I use the generated scale?
Paste it as CSS variables and reference them like --color-500, or copy the Tailwind object and drop it into theme.colors in tailwind.config to use utilities such as bg-brand-500. Each step's HEX can also be copied individually with a click, so you can hand them to Figma or other design tools.