Image to Design Tokens
·
Extract color palettes from images and generate design tokens for light and dark modes. All processing happens in your browser.
Image to Design Tokens is a privacy-focused tool for designers and developers who need to extract color palettes from images and generate design system tokens.
Key Features
- Browser-Only Processing – Images are processed locally in the browser using the Canvas API and are never uploaded to a server.
- Light and Dark Mode Tokens – Generates design tokens for both light and dark modes with contrast ratio indicators.
- Color Extraction – Uses the median cut algorithm with a bias toward preserving saturated accent colors.
- Live Preview – Preview how generated tokens appear in a sample user interface before exporting.
- Contrast Checking – Displays WCAG contrast ratio calculations to help evaluate accessibility.
- Export – Copy generated CSS custom properties to the clipboard.
- Save Palettes – Store up to 5 palettes locally using browser localStorage.
How It Works
- Upload or drag-and-drop an image (such as a screenshot, logo, or visual reference)
- The tool extracts dominant colors using the median cut algorithm
- Design tokens are generated for both light and dark modes
- Review contrast ratio indicators and preview the tokens
- Copy the generated CSS custom properties
Generated Tokens
- Background (bg)
- Surface
- Border
- Text
- Heading
- Muted Text
- Primary (accent or brand color)
- On Primary (text displayed on the primary color)
Additional Information
This plugin can be used alongside other tools. For example, Promptless WP can consume exported design tokens as part of a broader page layout workflow.