Need a cheap way to get HEX from pictures without buying expensive design software? Good news: you can extract accurate HEX color codes from any image using tools you already have, free web apps, or a few lines of code. This guide walks you through the fastest workflows, accuracy tips, and even sample scripts for those who want to automate the process.
Quick Answer
- On Mac: Use Digital Color Meter (built-in, set to sRGB) and copy HEX.
- On Windows: Install PowerToys > Color Picker (free) for instant HEX.
- In a browser: Drag the image into Chrome/Edge, open DevTools’ eyedropper, sample, and copy HEX.
- Online: Use a free image color picker site or Photopea to eyedrop and copy HEX.
- Code: Use Python (Pillow) or JavaScript (Canvas) to pick pixels and convert to HEX.
Why HEX and what matters for accuracy
HEX is a compact way to represent colors for digital design (e.g., #3A7BD5). It’s essentially RGB expressed in base-16. While extracting HEX is straightforward, accuracy depends on a few factors:
- Color space: Convert to or measure in sRGB for web consistency.
- Sampling area: Average a small region to avoid noise/compression artifacts.
- Lighting/white balance: Photos with warm or cool light shift perceived colors.
- Gamut differences: Display P3 images can show colors outside sRGB; these will be mapped when you copy HEX.
Free and Cheap Methods: Step-by-step
1) macOS: Digital Color Meter (free, built-in)
- Open your image in Preview and zoom to the area you want to sample.
- Launch Digital Color Meter (Applications > Utilities).
- In the menu, set View > Display values > as Hexadecimal.
- Set View > Display in sRGB for web-accurate values.
- Use Command + Shift + C to copy the color (or read the HEX on screen).
- Optional: Increase the aperture size (sampling area) under View to average pixels.
Cost: $0. Best for quick one-off picks. Ensure you’re in sRGB for consistent HEX.
2) Windows: PowerToys Color Picker (free)
- Install Microsoft PowerToys from the official GitHub or Microsoft Store.
- Enable Color Picker in PowerToys settings.
- Open your image in the Photos app or any viewer. Press the hotkey (default Win + Shift + C).
- Hover and click to pick a color; the overlay shows formats like HEX, RGB, HSL.
- Copy the HEX code directly to your clipboard.
Cost: $0. Supports zoom and a history panel for multiple picks.
3) Browser-only: Chrome/Edge DevTools eyedropper (free)
- Open the image in a browser tab (drag and drop the file into Chrome/Edge).
- Open DevTools (F12 or Ctrl/Cmd + Shift + I).
- Create a temporary style with a color (e.g., select body, add
color: #000;in the Styles panel). - Click the color swatch to open the color picker, then click the eyedropper icon.
- Hover over the image to sample a pixel and copy the HEX shown.
Cost: $0. Quick if you’re already in a browser; useful on locked-down machines.
4) Free online tools
- Photopea (photopea.com): Open the image, use the Eyedropper, read the HEX in the color panel.
- Image Color Picker sites: Upload the image; click to get HEX immediately.
- Figma (free tier): Import the image; use the eyedropper to sample and copy HEX (browser may prompt for screen permission).
Cost: $0. Pros: dead simple. Cons: some sites compress or resize images; check privacy before uploading sensitive images.
5) Mobile: Free or low-cost apps
- iOS/Android color picker apps: Many free options let you open a photo and tap to copy HEX. Look for features like sRGB export and sampling radius.
- Device caveat: Modern phones often use wide-gamut displays. For web use, ensure the app exports in sRGB.
Cost: $0–$5 typically. Ideal for quick picks while on the go.
Code it yourself (free): Python and JavaScript
If you want full control or batch processing, writing a tiny script is the cheapest way to get HEX from pictures at scale.
Python (Pillow) single-pixel and averaged sampling
from PIL import Image
def rgb_to_hex(rgb):
return '#%02x%02x%02x' % rgb
# Single pixel at (x, y)
def pick_pixel_hex(path, x, y):
with Image.open(path).convert('RGB') as im: # converts to RGB (sRGB by default)
r, g, b = im.getpixel((x, y))
return rgb_to_hex((r, g, b))
# Average color in a box around (x, y)
def pick_avg_hex(path, x, y, radius=3):
with Image.open(path).convert('RGB') as im:
left = max(0, x - radius)
top = max(0, y - radius)
right = min(im.width, x + radius + 1)
bottom = min(im.height, y + radius + 1)
region = im.crop((left, top, right, bottom))
pixels = list(region.getdata())
n = len(pixels)
r = sum(p[0] for p in pixels) // n
g = sum(p[1] for p in pixels) // n
b = sum(p[2] for p in pixels) // n
return rgb_to_hex((r, g, b))
print(pick_pixel_hex('image.jpg', 120, 200))
print(pick_avg_hex('image.jpg', 120, 200, radius=5))
Notes: convert('RGB') gives you an sRGB-like RGB. If your images carry embedded profiles and you need strict color management, consider using ImageCms to convert to sRGB explicitly.
JavaScript (Canvas) in the browser
<input type="file" id="file" accept="image/*" />
<canvas id="c" style="display:none"></canvas>
<div id="out"></div>
<script>
function rgbToHex(r, g, b){
return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
}
const fileInput = document.getElementById('file');
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d', { willReadFrequently: true });
const out = document.getElementById('out');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if(!file) return;
const img = new Image();
img.src = URL.createObjectURL(file);
await img.decode();
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
canvas.addEventListener('click', (ev) => {
const rect = canvas.getBoundingClientRect();
const x = Math.floor((ev.clientX - rect.left) * (canvas.width / rect.width));
const y = Math.floor((ev.clientY - rect.top) * (canvas.height / rect.height));
const data = ctx.getImageData(x, y, 1, 1).data;
const hex = rgbToHex(data[0], data[1], data[2]);
out.textContent = `HEX: ${hex}`;
}, { once: true });
});
</script>
This minimalist snippet loads a local file and returns the HEX of the clicked pixel. For smoother results, sample a small area around the click and average the values.
Cost and feature comparison
| Method | Platform | Cost | Sampling/Averaging | Color Space Control | Outputs |
|---|---|---|---|---|---|
| Digital Color Meter | macOS | $0 | Aperture size adjustable | sRGB selectable | HEX, RGB |
| PowerToys Color Picker | Windows | $0 | Zoom + precise cursor | System-managed | HEX, RGB, HSL, more |
| Chrome/Edge DevTools | Win/macOS/Linux | $0 | Single pixel | Browser-managed | HEX, RGB, HSL |
| Online pickers | Any | $0 | Varies by site | Depends on engine | HEX, RGB, HSL |
| Mobile apps | iOS/Android | $0–$5 | Often includes radius | Check for sRGB export | HEX, RGB, HSB/HSL |
| Code (Python/JS) | Any | $0 | Fully customizable | Full control (sRGB) | Any format |
Accuracy tips that save time
- Convert to sRGB before sampling: In Photoshop/GIMP, convert the image to sRGB. In code, ensure conversion to an sRGB space prior to reading pixels.
- Average, don’t guess: Real-world photos have noise and JPEG artifacts. Average a small area (3–11 px radius) for stable HEX values.
- Beware compression and resizing: Online tools may downscale your image; upload the original for precise picks.
- Consistent lighting: If you’re sampling a physical object from a photo, neutral daylight or gray-card correction improves reliability.
- Transparency (alpha): If a pixel is semi-transparent, its displayed color may blend with the page background. Prefer sampling with a checkerboard/off-white background or flatten the image first.
- Gamma matters: Most web workflows assume sRGB gamma (~2.2). Avoid mixing linear and gamma-encoded spaces when comparing color values.
Two quick workflows to copy
Social banner color matching (browser-only)
- Drag brand photo into Chrome.
- Open DevTools, create a dummy rule with a color, open the swatch.
- Use the eyedropper to pick the brand accent from the image.
- Copy HEX and paste into your design tool or CSS.
Fast, no installs, perfect for social posts or landing-page tweaks.
Interior palette from a room photo (Windows + free)
- Open the image at full resolution in the Photos app.
- Invoke PowerToys Color Picker (Win + Shift + C).
- Pick wall, flooring, and decor accents; copy 5–7 HEX colors.
- Use an online palette visualizer to check contrast and harmony.
Tip: Average across subtle gradients on walls to avoid shadow-biased picks.
FAQ
Is HEX universal across devices?
HEX encodes RGB values, but displays vary. For web use, treat HEX as sRGB. On wide-gamut screens, the same HEX can appear slightly different if color management is off. Always design/test in color-managed apps and browsers.
How many colors should I sample from a photo?
For a balanced palette, 5–7 colors work well: 1–2 neutrals, 2–3 mid-tones, and 1–2 accents. Use averaged sampling to avoid noise.
What about extracting a whole palette automatically?
Use algorithms like k-means or median cut. In JavaScript, libraries such as color-thief can generate dominant colors. In Python, run k-means on pixel data with scikit-learn, then convert centroids to HEX.
Do I need to worry about P3 images from phones?
If you copy HEX in an sRGB context, out-of-gamut P3 colors will be clipped/mapped. For web, that’s typically fine. If you need faithful wide-gamut reproduction, keep the image/profile intact and work in a color-managed pipeline.
Conclusion
The cheapest way to get HEX from pictures depends on your device and workflow: built-in pickers on macOS/Windows are instant, browser devtools work anywhere, online tools cover quick needs, and tiny scripts give you automation and precision. Whichever route you choose, prioritize sRGB, average small regions, and keep originals uncompressed for the most reliable results.
If you prefer an iOS workflow with palette layouts and multiple export formats alongside instant HEX, RGB, HSL, and HSB values, consider a lightweight app like Color Viewfinder.
