{"id":275426,"date":"2026-01-19T02:19:27","date_gmt":"2026-01-19T02:19:27","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/image-to-design-tokens\/"},"modified":"2026-01-20T01:04:51","modified_gmt":"2026-01-20T01:04:51","slug":"image-to-design-tokens","status":"publish","type":"plugin","link":"https:\/\/fa.wordpress.org\/plugins\/image-to-design-tokens\/","author":13633582,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.0","stable_tag":"trunk","tested":"6.9.4","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Image to Design Tokens","header_author":"Breon Williams","header_description":"Extract color palettes from images and generate accessible design tokens for light and dark modes. All processing happens in your browser - no uploads, no external APIs.","assets_banners_color":"","last_updated":"2026-01-20 01:04:51","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/breonwilliams.com\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":136,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":{"1.0.0":"<p>Initial release of Image to Design Tokens.<\/p>"},"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3442159,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3442880,"resolution":"1","location":"assets","locale":""}},"screenshots":{"1":"Main interface showing color extraction and token generation","2":"Light mode preview with contrast indicators","3":"Dark mode preview with contrast indicators","4":"Saved palettes panel"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[1953,131581,215460,254228,1956],"plugin_category":[34],"plugin_contributors":[254229],"plugin_business_model":[],"class_list":["post-275426","plugin","type-plugin","status-publish","hentry","plugin_tags-accessibility","plugin_tags-color-palette","plugin_tags-design-system","plugin_tags-design-tokens","plugin_tags-wcag","plugin_category-accessibility","plugin_contributors-breonwilliams","plugin_committers-breonwilliams"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/image-to-design-tokens\/assets\/icon-256x256.png?rev=3442159","icon_2x":"https:\/\/ps.w.org\/image-to-design-tokens\/assets\/icon-256x256.png?rev=3442159","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/image-to-design-tokens\/assets\/screenshot-1.png?rev=3442880","caption":"Main interface showing color extraction and token generation"}],"raw_content":"<!--section=description-->\n<p>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.<\/p>\n\n<h4>Key Features<\/h4>\n\n<ul>\n<li>Browser-Only Processing \u2013 Images are processed locally in the browser using the Canvas API and are never uploaded to a server.<\/li>\n<li>Light and Dark Mode Tokens \u2013 Generates design tokens for both light and dark modes with contrast ratio indicators.<\/li>\n<li>Color Extraction \u2013 Uses the median cut algorithm with a bias toward preserving saturated accent colors.<\/li>\n<li>Live Preview \u2013 Preview how generated tokens appear in a sample user interface before exporting.<\/li>\n<li>Contrast Checking \u2013 Displays WCAG contrast ratio calculations to help evaluate accessibility.<\/li>\n<li>Export \u2013 Copy generated CSS custom properties to the clipboard.<\/li>\n<li>Save Palettes \u2013 Store up to 5 palettes locally using browser localStorage.<\/li>\n<\/ul>\n\n<h4>How It Works<\/h4>\n\n<ol>\n<li>Upload or drag-and-drop an image (such as a screenshot, logo, or visual reference)<\/li>\n<li>The tool extracts dominant colors using the median cut algorithm<\/li>\n<li>Design tokens are generated for both light and dark modes<\/li>\n<li>Review contrast ratio indicators and preview the tokens<\/li>\n<li>Copy the generated CSS custom properties<\/li>\n<\/ol>\n\n<h4>Generated Tokens<\/h4>\n\n<ul>\n<li>Background (bg)<\/li>\n<li>Surface<\/li>\n<li>Border<\/li>\n<li>Text<\/li>\n<li>Heading<\/li>\n<li>Muted Text<\/li>\n<li>Primary (accent or brand color)<\/li>\n<li>On Primary (text displayed on the primary color)<\/li>\n<\/ul>\n\n<h3>Additional Information<\/h3>\n\n<p>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.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin files to <code>\/wp-content\/plugins\/image-to-design-tokens\/<\/code><\/li>\n<li>Activate the plugin through the Plugins menu in WordPress<\/li>\n<li>Navigate to Tools &gt; Design Tokens to use the tool<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20plugin%20upload%20my%20images%20to%20a%20server%3F\"><h3>Does this plugin upload my images to a server?<\/h3><\/dt>\n<dd><p>No. All image processing happens entirely in your browser using the HTML5 Canvas API. Images are never uploaded to any server.<\/p><\/dd>\n<dt id=\"what%20image%20formats%20are%20supported%3F\"><h3>What image formats are supported?<\/h3><\/dt>\n<dd><p>JPEG, PNG, and WebP images are supported.<\/p><\/dd>\n<dt id=\"how%20does%20the%20color%20extraction%20work%3F\"><h3>How does the color extraction work?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt id=\"what%20do%20the%20contrast%20indicators%20mean%3F\"><h3>What do the contrast indicators mean?<\/h3><\/dt>\n<dd><p>The plugin calculates contrast ratios based on WCAG guidelines:<\/p>\n\n<ul>\n<li>PASS \u2013 Indicates the contrast ratio meets WCAG AA contrast recommendations (4.5:1 for normal text)<\/li>\n<li>MEETS MINIMUM \u2013 Indicates the contrast ratio is at the minimum WCAG AA threshold<\/li>\n<li>FAIL \u2013 Indicates the contrast ratio is below WCAG AA contrast recommendations<\/li>\n<\/ul>\n\n<p>These indicators are provided as a reference tool only. Final accessibility compliance depends on how colors are implemented in a specific design or context.<\/p><\/dd>\n<dt id=\"can%20i%20lock%20a%20specific%20primary%20color%3F\"><h3>Can I lock a specific primary color?<\/h3><\/dt>\n<dd><p>Yes. Click any swatch in the extracted palette to lock it as the primary color. Click it again to unlock.<\/p><\/dd>\n<dt id=\"where%20are%20saved%20palettes%20stored%3F\"><h3>Where are saved palettes stored?<\/h3><\/dt>\n<dd><p>Saved palettes are stored in your browser\u2019s localStorage. They persist between sessions but are not synced across devices or browsers.<\/p>\n\n<p>Clearing browser data or localStorage will remove any saved palettes.<\/p><\/dd>\n<dt id=\"does%20this%20plugin%20require%20an%20account%3F\"><h3>Does this plugin require an account?<\/h3><\/dt>\n<dd><p>No. The plugin works entirely standalone and does not require an account, registration, or login.<\/p><\/dd>\n<dt id=\"does%20this%20plugin%20track%20users%20or%20collect%20data%3F\"><h3>Does this plugin track users or collect data?<\/h3><\/dt>\n<dd><p>No. The plugin does not track users, collect analytics, or transmit data externally. All processing happens locally in the browser.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<li>Browser-only image color extraction<\/li>\n<li>Light and dark mode token generation<\/li>\n<li>Contrast ratio indicators<\/li>\n<li>CSS custom properties export<\/li>\n<li>Local palette storage (up to 5)<\/li>\n<\/ul>","raw_excerpt":"Extract color palettes from images and generate design tokens for light and dark modes. All processing happens in your browser.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/275426","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=275426"}],"author":[{"embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/breonwilliams"}],"wp:attachment":[{"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=275426"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=275426"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=275426"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=275426"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=275426"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/fa.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=275426"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}