Image Color Picker & Palette Extractor — HEX, RGB, HSL & CMYK — Core Format
Image Color Picker & Palette Extractor
Upload any picture to pick exact pixel colors with an interactive magnifying loupe, convert values instantly between HEX, RGB, HSL, and CMYK, check WCAG accessibility contrast, and extract dominant color palettes completely inside your web browser.
Drop your image here or browse
Supports JPG, PNG, WebP, GIF, SVG, and BMP images up to 50 MB
Dominant Color Palette
Extracted automatically using pixel quantization · Click any swatch to inspect or copy
How to Pick Colors and Extract Palettes in 4 Steps
- Load your image: Drag and drop your photo or graphic into the upload box, or click Try Sample Artwork to test immediately.
- Hover & inspect with loupe: Move your pointer across the canvas to view the 9× magnified pixel grid and real-time HEX code.
- Click to sample: Click or tap anywhere on the picture to select the color and view instant HEX, RGB, HSL, CMYK, and WCAG contrast readouts.
- Export palette & codes: Click Copy next to any code, or export the entire 8-color dominant palette as CSS variables, JSON, or a downloadable PNG swatch card.
Understanding Color Formats: HEX vs RGB vs HSL vs CMYK
Color models represent digital shades differently depending on whether your destination is a web browser, application interface, or physical print press:
- HEX (#RRGGBB): The fundamental standard for web development and CSS styling. Hexadecimal notation combines 00 through FF values for red, green, and blue light.
- RGB (Red, Green, Blue): The native additive color model of digital screens and image sensors, representing each channel with integer intensities from 0 to 255.
- HSL (Hue, Saturation, Lightness): A human-friendly representation created for designers. Hue spans a 360-degree color wheel, while saturation and lightness are percentages, making tint and shade adjustments intuitive.
- CMYK (Cyan, Magenta, Yellow, Key/Black): The standard subtractive ink model used in 4-color commercial offset and digital printing presses.
WCAG 2.1 Contrast Standards for Web Accessibility
When selecting background and foreground colors for web design, the Web Content Accessibility Guidelines (WCAG) require adequate contrast ratios to ensure readability for users with low vision or color vision deficiencies:
- Level AA (Minimum Contrast): Requires a contrast ratio of at least 4.5:1 for normal text (under 18pt / 24px) and 3.0:1 for large text (18pt+ or 14pt bold).
- Level AAA (Enhanced Contrast): Requires a contrast ratio of at least 7.0:1 for normal text and 4.5:1 for large text.
Comparison: CoreFormat In-Browser Color Picker vs Server-Based Tools
| Feature | CoreFormat (In-Browser) | Typical Online Tools |
|---|---|---|
| Privacy & Data Security | 100% Client-Side; images never leave your local computer | Uploads images to third-party cloud servers |
| Magnifying Loupe | Real-time 9× pixel loupe with reticle and live HEX | Static point-click without pixel magnification |
| Color Spaces | HEX, RGB, HSL, CMYK, and Color Harmonies | Often limited to HEX only |
| WCAG Accessibility | Instant AA/AAA contrast check vs White & Black | Rarely included; requires external checker |
| Palette Export | 1-Click CSS variables, JSON, and PNG swatch cards | Manual copy or requires account registration |
Frequently Asked Questions
Is my image uploaded to any server when picking colors?
No. CoreFormat renders your image entirely within your web browser using HTML5 Canvas and JavaScript. No image bytes or personal data are ever uploaded to any cloud server.
How does the dominant palette extractor work?
The extractor scans the raw RGBA pixel data of your image, groups visually similar colors using a color quantization algorithm, and ranks the clusters by visual prominence and vibrancy to deliver a harmonious 8-color palette.
Can I pick colors from anywhere on my desktop screen?
Yes. If your browser supports the modern EyeDropper API (such as Google Chrome, Edge, and Opera), clicking the Pick Screen Color button lets you sample any pixel across your entire operating system display.
Can I export the extracted color palette to Figma or CSS?
Yes. You can copy the palette as standard CSS custom properties (variables) ready to paste into your stylesheet, copy raw JSON for scripting, or download a high-resolution PNG swatch image for your Figma / design moodboard.