Color Scale Generator

Turn one approved color into an ordered light-to-dark scale for UI states, charts, and token systems before you commit the final style spec.

This page is for quick digital token planning. It is not a design file exporter or a physical paint simulator.

Other languages 日本語 | English

How to use

  1. Start from one approved base color.
  2. Choose a 5, 7, or 9-step scale depending on how many token levels or chart bands you need.
  3. Click a step, then copy HEX, RGB, or HSL into the next tool or spec sheet.

Wave 47 expansion

Move from palette choice to system-ready steps

This page sits after palette or gradient exploration and before final contrast or handoff checks. It helps when one approved color now needs an ordered scale for repeated UI or chart use.

Build an ordered color scale from one base color.

How to choose between nearby pages

Use Color Picker when you still need the first working swatch. Use Color Temperature Checker when the color direction still needs a warm / cool / neutral check. Use Color Palette Generator when you want nearby tints, shades, and accent candidates. Use this page once one approved color now needs ordered light-to-dark steps for system tokens or chart states. Move to Gradient Generator when selected steps need a CSS-ready gradient, move to Color Converter for notation handoff, and move to Contrast Checker when the final step/background pair must pass readability checks.

FAQ

What does this page do?

It builds a 5, 7, or 9-step color scale from one base color and shows copyable color values for each step.

When should I use this instead of Color Palette Generator?

Use Color Palette Generator when you want nearby candidate swatches such as tints, shades, and accents. Use this page when the next task needs an ordered light-to-dark scale for UI tokens, charts, or states.

Does it export design files?

No. It creates ordered scale swatches and copyable color values only.

What is stored in the share URL?

The share URL stores the base color, selected step count, and the currently selected step key.