Inspect exact HEX, RGB, HSL codes with a magnifying loupe, extract dominant harmonious color palettes, check contrast, and export CSS or Tailwind tokens. 100% private in your browser.
Hover to inspect any pixel with precision zoom, or click to lock colors
rgb(6, 182, 212) • hsl(189°, 94%, 43%)
Inspect exact colors from any image or screenshot with a live magnifying loupe. Automatically extract harmonious dominant palettes, evaluate accessibility contrast against black and white text, and copy HEX, RGB, HSL, CSS variables, or Tailwind classes in one click. 100% private in-browser image analysis.
Fast and easy from start to finish
Upload any image file, paste directly from your clipboard (Ctrl + V), or click a sample preset image.
Move your cursor over the image to inspect individual pixels through the magnifying loupe, and click to lock a color.
Review the extracted dominant colors and matching harmonies in the side panel.
Click any color chip to copy its HEX code, or use the export buttons to copy CSS tokens or download a swatch card.
What you can do with this tool
Precision Loupe Inspector: Hover over individual pixels with a 9x9 zoomed grid and real-time crosshair reticle.
Instant Dominant Palette: Automatically detects top harmonious colors and visual frequency weights.
Color Harmonies & Tints: Explore complementary contrasts, analogous flows, triadic balances, and light-to-dark shades.
WCAG 2.1 Contrast Scoring: Real-time readability check for white and black text with AA/AAA compliance ratings.
Multi-Format Code Export: 1-Click copy for HEX, RGB, HSL, CSS Custom Properties, and Tailwind CSS configuration.
Downloadable Palette Swatch Card: Generate a high-resolution 1200x630 PNG swatch sheet for design system documentation.
Everyday walkthroughs and starter ideas for Image Color Picker & Palette Extractor
Paste a screenshot of a dashboard to quickly extract its primary, secondary, and background colors.
Upload a nature photo to generate a cohesive earth-tone palette for a web project.
File requirements, capabilities, and system limits
Extremely large multi-gigapixel images will be scaled proportionally to ensure smooth 60 FPS cursor inspection.
Helpful definitions of features and parameters
A 6-character hexadecimal color code (e.g. #06B6D4) widely used in web design and digital media.
Web Content Accessibility Guidelines measuring the difference in brightness between text and background colors.
How creators, students, and professionals use Image Color Picker & Palette Extractor
Brand & Logo Design: Extract core brand colors and secondary accents from client logos and assets.
Front-End Web Development: Grab exact hex codes and convert them directly into CSS variables or Tailwind tokens.
UI & UX Design: Verify text readability and contrast compliance for buttons, headers, and badges.
Digital Art & Illustration: Discover harmonious complementary and analogous color schemes from photos.
Answers to common questions about Image Color Picker & Palette Extractor
No. The entire color inspection and palette extraction runs 100% locally in your browser using HTML5 Canvas. Your images never leave your computer.
Yes! Simply press Ctrl + V (or Cmd + V on Mac) anywhere on the page to immediately load and analyze your screenshot.
You can copy HEX (#06B6D4), RGB (rgb(6, 182, 212)), HSL, CSS Custom Properties (--color: #06B6D4), and Tailwind CSS classes (bg-[#06B6D4]).
Contrast is computed using the official W3C WCAG 2.1 relative luminance formula against white (#FFFFFF) and black (#000000) text to ensure your designs meet accessibility guidelines.
Popular companion tools to edit and enhance your projects