HomeToolsSettings
Tools
/
Color Tools

Generate Color Range

Pick any color and instantly generate two complete scales: a brightness range following Tailwind-style steps (50–950) and an alpha/opacity range (0–100%). Colors are computed in OKLCH color space for perceptually uniform steps, then output in your choice of HSLA, RGBA, HEXA, or OKLCH format. Name your color to get properly slugified CSS variable names. Export the full set as CSS custom properties, SCSS variables, Less variables, a JS/TS object, or a Tailwind config snippet. The original color is marked in each range so you can see exactly where it sits.

Go offline, it still works.

TonniTools is built to run locally in your browser. Since no data ever leaves your device, everything works, even without internet.

100%

Range settings

Brightness Range

Alpha Range