PhotoTones
Brand Kit

Design Tokens from an Image

Updated

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. PhotoTones Pro ($7/month) exports these tokens individually or inside a full brand kit ZIP.

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 — or download the full brand kit ZIP

Export design tokens from your image

W3C JSON, Tokens Studio, Tailwind v4 @theme, and Figma Variables — or grab the full brand kit ZIP with the print-ready guide.

Export Design Tokens — Pro See brand kit ZIP

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. The W3C Design Tokens Community Group defines the emerging JSON standard that PhotoTones Pro exports.

Frequently Asked Questions

What are design tokens?

Design tokens are named variables that store design decisions — colors, spacing, typography — in a platform-agnostic format. W3C Design Tokens JSON is the emerging standard. PhotoTones Pro generates color tokens directly from extracted image colors.

Which design token formats does PhotoTones Pro export?

PhotoTones Pro exports W3C Design Tokens JSON, Tokens Studio JSON, Style Dictionary JSON, Tailwind v4 @theme CSS, Figma Variables JSON, SCSS variables, and CSS custom properties — all from one palette extraction.

Do I need Pro to extract colors from an image?

No. The core extractor is free — 6 colors with hex, RGB, and HSL copy. PhotoTones Pro ($7/month) adds design token exports, extended 12-color palettes, brand kit ZIP, and Figma workflows.

Which design token format should I export?

Use W3C Design Tokens JSON for standards-based pipelines, Tokens Studio JSON for Figma Token Studio, Style Dictionary JSON for multi-platform builds, and Tailwind v4 @theme CSS for Tailwind projects. PhotoTones Pro exports all four from one image.

Related Guides