Free Online Image Color Picker & Palette Extractor
Telekit's free online image color picker lets you extract exact color codes from any photo, design, screenshot, or graphic with 100% offline privacy. Unlike cloud-based color pickers that upload your images to remote servers, our tool processes everything locally in your browser using HTML5 Canvas. Hover over images with an interactive 4x–10x magnifier loupe, click to pick colors instantly, and get HEX, RGB, RGBA, HSL, HSV, CMYK, HWB, CSS variables, and Tailwind classes. Extract dominant color palettes, inspect tints & shades, test color blindness accessibility simulations, and check WCAG 2.1 contrast compliance—all without uploading files. For additional graphic adjustments, explore our Hue Shift Generator, Image Cropper, and Image Compressor.
How to Pick Colors from Any Image
Load Image or Preset
Drag & drop your file, paste from clipboard (Ctrl+V), enter an image URL, or click any starter demo preset.
Inspect with Loupe
Hover or drag across the canvas on mobile to activate the interactive 4x–10x zoom loupe crosshair for pixel precision.
Select & Check Contrast
Click on any pixel to lock its color codes. Inspect WCAG AA/AAA contrast compliance, tints, shades, and color harmonies.
Copy & Export
Copy HEX, RGB, HSL, CSS values, download swatch PNG images, or export dominant palettes as CSS, JSON, Tailwind, SVG, or PNG.
Color Format Comparison Reference
| Color Format | Structure / Syntax | Primary Use Case |
|---|---|---|
| HEX | #06B6D4 | Web CSS, Figma, Adobe Suite, Tailwind CSS tokens |
| RGB / RGBA | rgb(6, 182, 212) | HTML5 Canvas, CSS opacity, graphic rendering engines |
| HSL | hsl(189, 95%, 43%) | Design systems, theme manipulation, color harmony math |
| HSV / HSB | hsv(189, 97%, 83%) | Digital painting software, color picker sliders |
| CMYK | cmyk(97%, 14%, 0%, 17%) | Physical printing, ink mixing, brochure layout publishing |
| HWB | hwb(189 2% 17%) | CSS Color Module Level 4, intuitive tint/shade adjustments |
WCAG 2.1 Contrast Compliance Standards
| Conformance Level | Minimum Ratio | Applicability / Requirements |
|---|---|---|
| Level AA (Normal Text) | 4.5:1 | Standard body text (< 18pt or < 14pt bold) on background |
| Level AA (Large Text) | 3.0:1 | Headings & large text (≥ 18pt or ≥ 14pt bold), UI components, icons |
| Level AAA (Enhanced) | 7.0:1 | High-accessibility normal body text across government & healthcare apps |
⌨️ Desktop Keyboard Shortcuts Reference
| Category | Keybinding | Action Description |
|---|---|---|
| Navigation & Layout | Alt + V | Toggle 2-Column Split Studio vs Full-Width Stacked layout |
| Navigation & Layout | Alt + K | Open Keyboard Shortcuts Guide modal (Alt+K or ?) |
| Navigation & Layout | / or U | Focus Image URL input field |
| Navigation & Layout | Escape | Dismiss modal, clear tooltips, or blur inputs |
| Color Inspection & Controls | Alt + P | DevToys Smart Clipboard Auto-Detect (Images, URLs, HEX/RGB/HSL, Palettes) |
| Color Inspection & Controls | Alt + D | Toggle Star Tool favorite bookmark persistence |
| Color Inspection & Controls | Alt + R | Cycle through creative demo presets (Surprise Me) |
| Color Inspection & Controls | Alt + B | Pin active color to Custom Palette pinboard |
| Color Inspection & Controls | Alt + W | Swap Primary and Secondary color swatches |
| Color Inspection & Controls | Arrow Keys | Nudge pixel crosshair when inspecting canvas |
| Quick Formats & Export | Alt + 1 | Quick copy HEX code to clipboard |
| Quick Formats & Export | Alt + 2 | Quick copy RGB string to clipboard |
| Quick Formats & Export | Alt + 3 | Quick copy HSL string to clipboard |
| Quick Formats & Export | Alt + 4 | Quick copy CSS variable definition |
| Quick Formats & Export | Alt + 5 | Quick copy Tailwind CSS arbitrary class |
| Quick Formats & Export | Alt + 6 | Quick copy JSON color object |
| Quick Formats & Export | Alt + S | Open Developer API Code Studio modal |
| Quick Formats & Export | Alt + M | Copy Markdown summary table to clipboard |
🚀 Related Developer & Color Utilities
Convert colors between HEX, RGB, HSL, HSV, CMYK, and XYZ formats instantly.
Generate cohesive color schemes, harmonious palettes, and CSS variables.
Shift hue angle, adjust saturation, and preview live image color alterations.
Compress PNG, JPG, and WebP images locally with zero cloud upload.
Convert image files across PNG, JPEG, WebP, SVG, and modern formats.
Crop, rotate, and aspect-ratio scale photos directly inside your browser.
Frequently Asked Questions
Are my uploaded images kept private when picking colors?
Yes. 100% of image rendering, pixel reading, color quantization, and loupe zoom calculations execute locally inside your browser's HTML5 Canvas memory. No image files or pixel data are ever transmitted to external servers.
What is the difference between 1x1, 3x3, and 5x5 pixel sampling?
1x1 reads the exact single pixel directly beneath your cursor. 3x3 and 5x5 calculate the mathematical average color across a 3x3 or 5x5 pixel matrix around the cursor, which helps smooth out JPEG noise, grain, or high-frequency graphic textures.
Can I pick colors from applications outside the browser window?
Yes! If you are using Google Chrome, Microsoft Edge, or Opera, click the 'Use System Eyedropper' button to select pixel colors from any application, desktop background, or window on your computer screen.
How does the Dominant Palette Extractor work?
The tool automatically samples pixels across your image and groups similar colors using color quantization. It identifies dominant brand palette colors (5, 8, or 12 swatches) and lets you export them as CSS variables, JSON, Tailwind CSS configuration, SVG vector swatches, structured JSON audit reports, or PNG images with 1-click.
What are Color Harmonies and how do I use them?
Color Harmonies calculate mathematically complementary (opposite 180°), analogous (adjacent ±30°), triadic (+120°, +240°), and split-complementary (+150°, +210°) colors based on HSL color wheel angles for your selected color. You can click any harmony swatch to select and copy it instantly.
How are WCAG 2.1 contrast ratios calculated?
Contrast ratios measure the relative luminance difference between foreground text and background colors according to the W3C WCAG 2.1 algorithm. Ratios of 4.5:1 pass AA standard for normal text, while 7.0:1 achieves enhanced AAA compliance.
Why does the canvas offer a Checkered Grid backdrop and zoom scaling?
Transparent PNG and SVG graphics often contain alpha channels, white icons, or dark outlines. The Checkered Grid backdrop prevents transparent regions from blending into a dark background, while 1.5x and 2x zoom scaling lets you inspect small icons, sprites, and pixel art with sub-pixel precision.
Can I export code snippets for React, Tailwind, Swift, Flutter, and Android?
Yes. Press Alt+S or click 'API Code' to access production-ready integration tokens for CSS Variables, Tailwind CSS 3/4 config, React CSSProperties, HTML5 Canvas 2D, Python Pillow, SwiftUI, Jetpack Compose Kotlin, Flutter Dart, and SVG swatches with 1-click script file downloads.
How do Dual Swatch Pairings and color distance metrics work?
Click on either the Primary or Secondary swatch slot to assign picked colors. The tool calculates the real-time contrast ratio, 3D Euclidean RGB distance, and approximate perceptual Delta E percentage between the two colors with 1-click swap (Alt+W).
What keyboard shortcuts are supported in the image color picker?
Press Alt+K or ? to open the full Shortcuts Guide. Key shortcuts include Alt+P (DevToys Smart Clipboard Auto-Detect for images, URLs, HEX/RGB/HSL, and palettes), Alt+D (Star Tool favorite toggle), Alt+B (Pin active color to Custom Palette), Alt+1 through Alt+6 (1-Click Quick Formats for HEX, RGB, HSL, CSS, Tailwind, and JSON), Alt+S (Developer API Code Studio), Alt+V (Split Studio vs Stacked layout density), Alt+R (Surprise Me / Load demo presets), Alt+W (Swap Primary/Secondary colors), Alt+M (Copy Markdown table), Ctrl+Enter or C (Copy HEX), / or U (Focus Image URL), and Arrow keys (precision pixel loupe nudge).