Color Palette Generator

Upload any image and extract a beautiful color palette. Get hex codes, RGB values, and WCAG contrast accessibility scores. All processing happens in your browser — your images never leave your device.

🖼

Drop an image here or click to upload

Supports JPG, PNG, GIF, WebP · Max 10MB · Your image stays private

Colors to extract:

4 6 8 10

⚡ Contrast Accessibility (WCAG 2.1)

📋 Copy All HEX 📋 Copy CSS Variables ⬇ Download Palette PNG

Frequently Asked Questions

Is this color palette generator free? ▾

Yes, completely free. No signup required, no usage limits, and no watermarks. Upload as many images as you want and extract unlimited color palettes.

Does my image leave my browser? ▾

No. All image processing happens locally in your browser using the HTML5 Canvas API. Your images are never uploaded to any server, never stored, and never seen by anyone else. This makes it safe for proprietary or confidential images.

What color formats does it support? ▾

We provide HEX codes (e.g., #4f46e5), RGB values (e.g., rgb(79, 70, 229)), and HSL values for each extracted color. You can copy individual colors by clicking on them, or export the entire palette as CSS variables or a PNG image.

How does the contrast checker work? ▾

We calculate WCAG 2.1 contrast ratios between each color and white/black backgrounds. AA level requires a ratio of 4.5:1 for normal text, while AAA requires 7:1. This helps ensure your color choices are accessible to users with visual impairments.

What algorithm extracts the colors? ▾

We use a quantized color frequency analysis with perceptual distance clustering. The algorithm analyzes every pixel in your image, groups similar colors together, and picks the most dominant representatives while ensuring sufficient visual variety in the final palette.

Related Free Tools

Image Color Palette Extractor

Upload an image to extract its dominant color scheme and hex codes instantly

📁 Click to Upload Image

Supports PNG, JPG, JPEG, and WebP images. All extraction is done locally in your browser.

Random Palette 🎨
Upload Different Image

// Sample pixels on a grid for (let i = 0; i < imgData.length; i += 16) { // step by 4 pixels (16 array slots) const r = imgData[i]; const g = imgData[i+1]; const b = imgData[i+2]; const a = imgData[i+3]; // Ignore highly transparent or almost white/black background pixels if (a < 200) continue; // Group similar colors together by rounding RGB values (color quantization) const factor = 16; const qr = Math.round(r / factor) * factor; const qg = Math.round(g / factor) * factor; const qb = Math.round(b / factor) * factor; const hex = rgbToHex(qr, qg, qb); colors[hex] = (colors[hex] || 0) + 1; } // Sort colors by frequency let sorted = Object.keys(colors).sort((a, b) => colors[b] - colors[a]);

// Filter out colors that are too similar to each other to get a diverse palette const finalPalette = []; for (let hex of sorted) { let tooSimilar = false; for (let finalHex of finalPalette) { if (colorDistance(hex, finalHex) < 60) { // threshold for similarity tooSimilar = true; break; } } if (!tooSimilar) { finalPalette.push(hex); } if (finalPalette.length >= 5) break; }

// Fallback to top sorted if not enough diverse colors while (finalPalette.length < 5 && sorted.length > finalPalette.length) { const next = sorted[finalPalette.length]; if (!finalPalette.includes(next)) finalPalette.push(next); }

renderPalette(finalPalette); }

function rgbToHex(r, g, b) { const toHex = c => { const hex = Math.max(0, Math.min(255, c)).toString(16); return hex.length === 1 ? '0' + hex : hex; }; return '#' + toHex(r) + toHex(g) + toHex(b); }

function hexToRgb(hex) { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; }

function colorDistance(hex1, hex2) { const rgb1 = hexToRgb(hex1); const rgb2 = hexToRgb(hex2); if (!rgb1 || !rgb2) return 0;

// Simple Euclidean distance in RGB space return Math.sqrt( Math.pow(rgb1.r - rgb2.r, 2) + Math.pow(rgb1.g - rgb2.g, 2) + Math.pow(rgb1.b - rgb2.b, 2) ); }

function renderPalette(hexList) { const container = document.getElementById('cpgPalette'); container.innerHTML = '';

hexList.forEach((hex, index) => { const card = document.createElement('div'); card.className = 'cpg-color-card'; card.innerHTML = `

Copy `; container.appendChild(card); });

container.classList.add('show'); }

function copyColorCode(hex) { navigator.clipboard.writeText(hex); alert('Copied hex code: ' + hex.toUpperCase()); }

function generateRandomPalette() { const list = []; for (let i = 0; i < 5; i++) { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); list.push(rgbToHex(r, g, b)); } document.getElementById('cpgPreviewBox').classList.remove('show'); renderPalette(list); } // Initial random palette generateRandomPalette();