ThemeZee

<p>The <em>Custom Color Palette</em> plugin allows you to change the default color palette in the new WordPress Gutenberg Editor.</p>
<p>It replaces the color palette of WordPress Core and the theme.</p>
<h4>Enable and change colors from three categories</h4>
<ul>
<li><strong>Main Colors</strong><br />
Primary, Secondary and Accent colors</li>
<li><strong>Grayscale Colors</strong><br />
White, Light Gray, Dark Gray, Black</li>
<li><strong>Primary Colors</strong><br />
Red, Green, Blue, Yellow, etc.</li>
</ul>
<h4>Requirements</h4>
<p>This plugin only works with the new Editor. You have to use WordPress 5.0 or the <a href="https://wordpress.org/plugins/gutenberg/" rel="ugc">Gutenberg</a> plugin.</p>
<p><strong>Note:</strong> Changing colors works with CSS variables and is not supported in outdated browsers like Internet Explorer.</p>


Custom Color Palette for Gutenberg

A small and simple plugin to adjust the default color palette of the new WordPress Gutenberg Editor.

BreonWilliams

<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>
<h4>Key Features</h4>
<ul>
<li>Browser-Only Processing – Images are processed locally in the browser using the Canvas API and are never uploaded to a server.</li>
<li>Light and Dark Mode Tokens – Generates design tokens for both light and dark modes with contrast ratio indicators.</li>
<li>Color Extraction – Uses the median cut algorithm with a bias toward preserving saturated accent colors.</li>
<li>Live Preview – Preview how generated tokens appear in a sample user interface before exporting.</li>
<li>Contrast Checking – Displays WCAG contrast ratio calculations to help evaluate accessibility.</li>
<li>Export – Copy generated CSS custom properties to the clipboard.</li>
<li>Save Palettes – Store up to 5 palettes locally using browser localStorage.</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Upload or drag-and-drop an image (such as a screenshot, logo, or visual reference)</li>
<li>The tool extracts dominant colors using the median cut algorithm</li>
<li>Design tokens are generated for both light and dark modes</li>
<li>Review contrast ratio indicators and preview the tokens</li>
<li>Copy the generated CSS custom properties</li>
</ol>
<h4>Generated Tokens</h4>
<ul>
<li>Background (bg)</li>
<li>Surface</li>
<li>Border</li>
<li>Text</li>
<li>Heading</li>
<li>Muted Text</li>
<li>Primary (accent or brand color)</li>
<li>On Primary (text displayed on the primary color)</li>
</ul>
<h3>Additional Information</h3>
<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>


Image to Design Tokens

Extract color palettes from images and generate design tokens for light and dark modes. All processing happens in your browser.

Custom Color Palette for Gutenberg vs Image to Design Tokens