ihatecolors Image Extractor

What ihatecolors Image Extractor is

ihatecolors Image Extractor is a web tool that finds a four-color palette in an uploaded mockup or screenshot. It accepts PNG, JPG, WebP, and SVG files, samples their colors, and groups them to identify prominent shades. The tool assigns the extracted colors to Background, Primary Accent, Secondary, and Body Text roles. Users can copy the palette as CSS variables or Tailwind CSS configuration and preview it in landing, blog, and dashboard mockups. A WCAG 2.1 contrast check sorts colors by luminance to identify a possible background and text combination. The site says its color tools process data with client-side algorithms. No account is required, and saved favourites remain in browser localStorage rather than being sent to the site's servers. The tool is free for personal and commercial projects. Its accessibility check does not guarantee an accessible palette, so the site advises checking scores for accessibility-sensitive work. The site's listed integrations include Google AdSense, Google Analytics, Supabase, and Google Fonts.

Who it suits

It suits developers, UI/UX designers, solopreneurs, and digital creators who want to derive and export a palette from an image. It may help those reviewing contrast, provided they check scores for accessibility-sensitive projects.

Limits

The free suite is available for personal and commercial projects. The contrast check does not guarantee accessible palettes.

Getting started

1. Open the Image Extractor on the ihatecolors website.
2. Upload a PNG, JPG, WebP, or SVG mockup or screenshot.
3. Review the extracted colors and their assigned UI roles.
4. Check the contrast information and preview the palette in a design mockup.
5. Copy the palette as CSS variables or Tailwind CSS configuration.

Verdict

Image Extractor focuses on turning an uploaded image into a role-based palette with code exports and previews. Its contrast check can inform review, but the site cautions that it does not certify accessibility.