Description
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.
Screenshots
Main interface showing color extraction and token generation
Installation
- Upload the plugin files to
/wp-content/plugins/image-to-design-tokens/ - Activate the plugin through the Plugins menu in WordPress
- Navigate to Tools > Design Tokens to use the tool
FAQ
-
Does this plugin upload my images to a server?
-
No. All image processing happens entirely in your browser using the HTML5 Canvas API. Images are never uploaded to any server.
-
What image formats are supported?
-
JPEG, PNG, and WebP images are supported.
-
How does the color extraction work?
-
The plugin uses the median cut algorithm to quantize colors, with adjustments to help preserve saturated colors even when they occupy a small area of the image.
-
What do the contrast indicators mean?
-
The plugin calculates contrast ratios based on WCAG guidelines:
- PASS – Indicates the contrast ratio meets WCAG AA contrast recommendations (4.5:1 for normal text)
- MEETS MINIMUM – Indicates the contrast ratio is at the minimum WCAG AA threshold
- FAIL – Indicates the contrast ratio is below WCAG AA contrast recommendations
These indicators are provided as a reference tool only. Final accessibility compliance depends on how colors are implemented in a specific design or context.
-
Can I lock a specific primary color?
-
Yes. Click any swatch in the extracted palette to lock it as the primary color. Click it again to unlock.
-
Where are saved palettes stored?
-
Saved palettes are stored in your browser’s localStorage. They persist between sessions but are not synced across devices or browsers.
Clearing browser data or localStorage will remove any saved palettes.
-
Does this plugin require an account?
-
No. The plugin works entirely standalone and does not require an account, registration, or login.
-
Does this plugin track users or collect data?
-
No. The plugin does not track users, collect analytics, or transmit data externally. All processing happens locally in the browser.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Image to Design Tokens” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Image to Design Tokens” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release
- Browser-only image color extraction
- Light and dark mode token generation
- Contrast ratio indicators
- CSS custom properties export
- Local palette storage (up to 5)