EStore Tools

Brand Color Palette Generator

Upload a logo and get its dominant colors as hex codes, with WCAG contrast checks and ready-to-use CSS variables.

Describe the result you need. AI will set up the tool and ask for any missing details.

Configure with AI

Enter to submit · Shift + Enter for a new line

Sent to AI. Leave out passwords and private customer data.

Create or edit a palette

Enter your brand colors, or use AI above to suggest a palette from your brief.

Your logo or brand image

Click to upload, or drag an image here

How the colors are picked

The image is read entirely in your browser (nothing uploads to a server): every pixel is grouped into similar colors, and the most common, visually distinct groups become your palette, ranked by how much of the image they cover.

This samples the file's actual pixels, so a heavily compressed or very small logo can shift a hex value by a shade or two from the design file's original values. Confirm exact values against your brand guidelines for anything that needs to match precisely.

Reading the contrast numbers

Each color is checked against pure white and pure black text using the WCAG 2.1 contrast formula.

Contrast ratio = (lighter relative luminance + 0.05) ÷ (darker relative luminance + 0.05)
RatioMeaning
4.5:1 or higherPasses WCAG AA for normal text
3:1 to 4.5:1Passes AA for large text (18pt+) and UI components only
Below 3:1Fails WCAG AA; avoid for text on this background

Using the output

  1. 01

    CSS variables

    Paste the :root block into your theme's stylesheet, then reference var(--brand-1) and so on instead of hardcoding hex values everywhere.

  2. 02

    Shopify

    Copy the hex values into your theme's color settings under Theme settings → Colors. The JSON shown is a starting point for a scheme, not a drop-in replacement for settings_data.json, since every theme's exact color fields differ.

  3. 03

    WooCommerce

    Add the CSS variables to your theme's stylesheet or a custom CSS block (Appearance → Customize → Additional CSS in most themes), then use them across buttons, links and accents.

Questions people ask

Does my logo get uploaded anywhere?

No. The image is processed entirely in your browser using the Canvas API and never leaves your device.

Why is the extracted hex slightly different from my brand guide?

The tool reads pixels from the file you upload, which may be compressed, resized or color-shifted from the original design file. Treat the result as a close starting point and confirm exact values against your brand guidelines.

What file types work?

Any image your browser can display: PNG, JPG and WebP all work well. A vector file (SVG, AI, EPS) needs to be exported as a PNG or JPG first.

What does the WCAG contrast check actually tell me?

Whether text in that color would be readable on a white or black background, per the W3C's accessibility guidelines. It's a useful sanity check before picking a brand color for body text or buttons, not a full accessibility audit.

Related tools

Size Chart GeneratorBuild a responsive size chart table from your own measurements and paste the HTML straight onto a product page.Product QR Code GeneratorBuild a QR code for packaging or a hang tag that links to your product page with UTM tracking already attached.Business Name GeneratorGet business names in the style you want, built from what you sell and who buys it, with a domain for each one and a trademark check to run before you choose.Online Store Name GeneratorGet online store names checked against the rules that make a name work as a domain: no doubled letters, no awkward reading when run together, and a length that fits.

Want this builtinto your store?

I'm Emmanuel, a Shopify and WooCommerce developer. If this tool pointed at something you'd rather have fixed for you (a faster store, cleaner product data, a migration, a custom feature), send me a note.

Emmanuel Asika

Emmanuel Asika

Shopify & WooCommerce developer, Dublin

I build and fix online stores: new builds, migrations, speed, SEO and the custom bits apps can't do.

hello@emmanuelasika.com
See my work

Last reviewed 30 September 2026.

Sources: W3C: WCAG 2.1, contrast (minimum)