0xdump

Color Tools

Shade Generator

Generate lighter and darker tonal steps from a single base color.

Live tool

Generate tonal steps

Start from one HEX value and get a lighter-to-darker scale you can drop into tokens, button states, or a palette draft.

Preview

Generated palette

Use the gradient above as a quick sanity check for contrast and tonal spread.

CSS variables

Token-friendly output

  --brand-100: #191547;
  --brand-200: #2a2375;
  --brand-300: #3a30a3;
  --brand-400: #4b3ed1;
  --brand-500: #5b4bff;
  --brand-600: #7568ff;
  --brand-700: #8f85ff;
  --brand-800: #aaa1ff;
  --brand-900: #c4beff;
  --brand-1000: #dedbff;

What this tool does

It expands one base HEX color into a usable tonal scale for interface work.

Instead of guessing lighter and darker variants manually, the tool generates a stepped scale you can test visually, copy individually, or export as CSS variables for tokens.

How to use

The fastest way to turn one color into a small design system.

  1. Enter a base HEX value or choose it from the color picker.
  2. Review the lighter and darker steps generated from that base.
  3. Click any swatch to copy its HEX value.
  4. Copy the variable block when you want to move the full scale into a design token file.
  5. Use the preview gradient to check whether the tonal spread feels too compressed or too wide.

Example palette uses

Where shade scales help most in actual UI work.

  • Button hover and active states
  • Background and border token ramps
  • Data visualization color ladders
  • Brand accent scaling across dark and light surfaces

FAQ

A few practical notes about shade scales.

Are these shades mathematically perfect design tokens?

They are practical starting points, not a complete design system. You may still adjust a few steps manually for contrast or brand reasons.

Why use shades instead of opacity overlays?

Stable named shades are easier to reason about and usually more predictable across different backgrounds than stacked transparency effects.

Can I use this for semantic tokens too?

Yes. A generated scale is often a good raw palette underneath semantic tokens like `--button-primary-bg` or `--surface-accent-border`.

Related Tools

Keep exploring

Gradient Generator

Live

Build linear, radial, and conic gradients with live CSS output.

Open tool

Box Shadow Generator

Live

Tune offset, blur, spread, and inset values for cleaner elevation.

Open tool

Border Radius Generator

Live

Shape corners visually and export precise border-radius values.

Open tool