What it does
Nutilz turns a base HEX colour into an eleven-step tint and shade scale. A name field sets the variable prefix, with whole-scale exports for CSS, SCSS and Tailwind configuration.
Set the base colour and give the scale a name such as brand. Step 500 retains that exact colour; lighter steps mix it towards white and darker steps towards black. The fixed labels run from 50 to 950.
Click an individual swatch or its HEX, RGB or HSL button to copy one value. For the complete set, select CSS Variables, SCSS Variables or Tailwind Config and copy the output. The chosen name becomes the CSS prefix or configuration key.
The numbered steps are a naming system, not a contrast result. Nutilz links a separate checker for testing the actual foreground and background pair. The generator is free, needs no signup and runs locally in the browser.
Strengths
- The base colour remains identifiable at step 500.
- Named variables reduce manual renaming during a code handoff.
Watch out for
- The generated scale has a fixed eleven-step structure.
Best for
- Creating a named web colour scale from an existing accent
Sources
- Nutilz shade generator, instructions and FAQ (Oct 27, 2026)