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

Palette generatorGenerate accessible color palettes, export CSS, Tailwind, SCSS, JSON, SVG and PNG palette assets, check WCAG contrast and extract colors from images locally.WCAG checkerCheck whether text and background colors meet WCAG AA and AAA contrast ratios. Free, instant, no upload required.Image extractorExtract a dominant color palette from PNG, JPG or WebP images. Processed locally in your browser — nothing uploaded.
Can I use this with the main generator?

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

What is the difference between primitive and semantic tokens?

Primitives name raw values, such as blue-500 or gray-900. Semantic tokens name intent, such as color-action-background or color-text-muted, and point at a primitive. Components should only ever consume semantic tokens, so a rebrand or a new theme changes one indirection layer instead of every component.

Which export format should I commit to the repository?

CSS custom properties when the theme must switch at runtime in the browser. JSON when tokens feed a multi-platform pipeline such as Style Dictionary and have to reach iOS or Android too. SCSS variables only when everything is resolved at build time and no runtime theming is needed.