Design Tokens from an Image

Updated May 21, 2026

Design tokens from an image are platform-agnostic color variables — named, structured values like color.primary — generated from dominant hues extracted from a photo, logo, or UI screenshot and exported as JSON or CSS for design systems.

Generate Design Tokens in 3 Steps

1. Upload an image to PhotoTones
2. Click “Generate Color Palette” — up to 12 colors on Pro
3. Export W3C tokens, Tokens Studio JSON, Tailwind config, or Figma Variables

Supported Token Formats

PhotoTones Pro exports color tokens in every format modern design systems use:

• W3C Design Tokens JSON — emerging open standard
• Tokens Studio JSON — for Figma Tokens Studio plugin import
• Style Dictionary JSON — for Amazon Style Dictionary pipelines
• Tailwind v4 @theme CSS — native Tailwind v4 token syntax
• Tailwind config.js — classic Tailwind v3 config snippet
• Figma Variables JSON — direct Figma import
• SCSS variables and CSS custom properties

Example: W3C Design Tokens Output

{
  "color": {
    "palette": {
      "vibrant": { "$value": "#3B82F6", "$type": "color" },
      "dark-vibrant": { "$value": "#1E3A8A", "$type": "color" },
      "light-vibrant": { "$value": "#DBEAFE", "$type": "color" },
      "muted": { "$value": "#64748B", "$type": "color" }
    }
  }
}

Example: Tailwind v4 @theme

@theme {
  --color-palette-vibrant: #3B82F6;
  --color-palette-dark-vibrant: #1E3A8A;
  --color-palette-light-vibrant: #DBEAFE;
  --color-palette-muted: #64748B;
}

Why Generate Tokens from Images?

Design systems often start from brand photography, mood boards, or competitor analysis — not from a blank color picker. PhotoTones bridges inspiration to implementation:

• Extract real-world colors instead of guessing hex values
• Skip manual token JSON authoring
• Keep confidential imagery private (100% browser-based)
• Ship tokens to Figma and code in one workflow

For web-specific workflows, see Color Palette for Web Design and Hex Codes from an Image.

Frequently Asked Questions