Practical color tool

Design Tokens Generator

Create color design tokens from a palette and export CSS variables, SCSS maps, JSON and Tailwind-ready values.

Open in the main toolBack to tool
EnglishItalianoEspañolFrançaisDeutsch

What this page gives you

  • Convert raw HEX values into named implementation tokens.
  • Use shade scales for numeric tokens and semantic names for UI roles.
  • Export JSON when tokens need to move between design and build tools.

Good for

  • Design systems
  • Token handoff
  • Frontend teams

How to use it

Create color design tokens from a palette and export CSS variables, SCSS maps, JSON and Tailwind-ready values.

Palette generatorCreate color design tokens from a palette and export CSS variables, SCSS maps, JSON and Tailwind-ready values.WCAG checkerCreate color design tokens from a palette and export CSS variables, SCSS maps, JSON and Tailwind-ready values.Image extractorCreate color design tokens from a palette and export CSS variables, SCSS maps, JSON and Tailwind-ready values.
Can I use this with the main generator?

Yes. Start from this page, then open the main Chromaforge tool with the same base color and export the palette.