HEX to Design Token Exporter

Turn any color palette into CSS variables, SCSS, Tailwind config, or JSON design tokens — copy-paste ready.

Paste or build your color palette, give each swatch a semantic name like primary or surface, then pick CSS, SCSS, Tailwind, or JSON and copy the generated tokens straight into your codebase.

Color Tokens

Token Preview

Export


                    


                    

                        
⚡ Quick actions

                        

                            

                                
                                
                            

                        

                    


                    
Ship a palette as real code with the HEX to design token exporter


The HEX to design token exporter turns a flat list of color values into the four artifacts every modern front-end actually consumes: CSS custom properties on :root, SCSS variables for Sass codebases, a Tailwind theme.extend.colors object, and a JSON file shaped for design-token pipelines. Paste your HEX values, name each swatch, and copy the output — no Style Dictionary config, no Node script, no manual reformatting.


Tokens are the connective tissue between design and engineering. Design tokens act as a single source of truth for design decisions, defined in a JSON file and processed by a transformer that outputs them in multiple formats — for the web, tokens become Tailwind config values or CSS variables. This tool gives you those same outputs without standing up a build pipeline first.


What you can export


    

  • CSS custom properties — declared on :root so any selector can reference them with var(--color-primary). Drop straight into a global stylesheet or Tailwind v4's @theme block.
    • 

  • SCSS variables — $color-primary: #2563eb; declarations ready to @use in a partial.
    • 

  • Tailwind config — a theme.extend.colors object you paste into tailwind.config.js to unlock bg-primary, text-surface, and other utility classes.
    • 

  • JSON design tokens — nested objects with value fields, compatible with Style Dictionary and aligned with the W3C Design Tokens Community Group draft.
    • 



A workflow that scales


Once your palette lives as tokens, you can build the rest of your system on top of them. Generate a full numeric scale with the tint & shade scale generator, validate every swatch pair with the palette contrast grid, and wire up semantic light/dark variables in the CSS theme builder. The exporter is the final step that hands the result to your codebase.


Naming tips


    

  1. Prefer semantic names (primary, surface, danger) over literal ones (blue) so a rebrand doesn't rename every variable.
    2. 

  2. Use numeric suffixes 50–950 for tonal scales, matching the convention used across Tailwind CSS and Material Design.
    3. 

  3. Keep raw tokens platform-agnostic and layer aliases on top for component-specific colors.
    4. 



Why design tokens?


Hard-coded HEX values scatter the same decision across dozens of files. Tokens centralize each color behind a name so one edit propagates everywhere — to CSS custom properties, Sass maps, Tailwind utilities, and any downstream platform that consumes the JSON. The result is a palette that's easy to theme, easy to audit, and easy to hand off.

                        

        

            
            Frequently Asked Questions