Image Color Palette Extractor & UI Theme Studio
Extract dominant colors from an image, check WCAG contrast, and export CSS or Tailwind tokens.
Advanced Color Studio & Theme Engine
Upload or drop an image to extract true dominant colors and calculate WCAG contrast.Click to browse or drag & drop an image here
Supports PNG, JPG, WEBP (Max 5MB). Or choose a default preset sample below:
Extracted Dominant Palette & Color Harmony
Live UI Theme Component Preview & WCAG Calculator
Dynamic Interface Sample
This live widget calculates real luminance contrast ratios based on your extracted primary tone.
Modern CSS & Tailwind v4 Export Hub
About this tool
Rather than guessing at a color palette, this studio reads the actual pixel data of an uploaded image using the HTML5 Canvas API and extracts the five most visually distinct dominant colors. Click any extracted swatch to inspect its HSL values, complementary hue, and analogous hues, and to copy its HEX code.
A live UI mockup preview updates with your selected color and calculates a genuine WCAG contrast ratio against white and black text, telling you whether the color passes AA or AAA accessibility standards for text use.
Exporting your palette
Export the full palette as CSS custom properties for a :root block, Tailwind v4 @theme tokens, or a plain JSON array — ready to drop into a design system or codebase.