You have a logo, a screenshot, or a photo and you need the exact hex code of a specific color to use in CSS, Figma, or a design tool. Without Photoshop or Figma access, getting that exact value is surprisingly difficult. This guide explains the fastest way to do it — including a free browser-based tool that works on any device.
Advertisement
What Is a Hex Color Code?
A hex color code is a six-character code representing an RGB color value in hexadecimal notation. For example, #ff6b35 means:
CSS also accepts colors as RGB (rgb(255, 107, 53)) and HSL (hsl(18, 100%, 60%)). Each format has use cases: hex for general use, RGB when you need transparency (rgba()), HSL when you want to create lighter or darker variants.
🎨 Pick Any Color from Any Image — Free & Private
Upload an image and hover over it to preview colors. Click any pixel to lock its hex, RGB, and HSL values. The tool also extracts the 5 dominant colors from your image automatically. Everything runs in your browser — your image is never uploaded.
🎨 Open Image Color Picker →Advertisement
How to Get a Hex Code from an Image
Method 1: Free Online Color Picker (No Software)
- Open the Image Color Picker
- Upload your image by dragging it onto the tool or clicking to browse
- Hover over the image — a small preview shows the color under your cursor
- Click the pixel you want to pick
- Copy the hex, RGB, or HSL value with one click
The tool also extracts a dominant color palette — the 5 most prominent colors in your image — automatically.
Method 2: Browser DevTools Eyedropper
Chrome and Firefox include a built-in eyedropper in their DevTools color picker:
- Open DevTools (F12)
- In the Styles panel, click any color swatch
- Click the eyedropper icon in the color picker popup
- Click anywhere on the page to pick that color
Limitation: this only works for colors visible on the current browser tab — not for uploaded files.
Method 3: Figma (if you have access)
In Figma, import the image, select it, and use the eyedropper in the Fill panel to pick any pixel color. This is the most accurate method for design work but requires a Figma account.
Method 4: macOS Digital Color Meter
On macOS, open Digital Color Meter (search in Spotlight). It shows the color value under your cursor in real time across the entire screen. Change the display to “Display in hexadecimal” for CSS-ready values.
Hex vs RGB vs HSL — When to Use Each
| Format | Example | Best for |
|---|---|---|
| HEX | #ff6b35 | General CSS use, Tailwind config, design tools, copy-paste anywhere |
| RGB | rgb(255, 107, 53) | When you need rgba() transparency, Canvas API, or separate channel values |
| HSL | hsl(18, 100%, 60%) | Creating color variants (change L for lighter/darker), CSS custom properties |
Frequently Asked Questions
Why does the color I pick look slightly different from what I see?
Screen rendering, color profiles, and browser compositing can all cause slight differences between what your eye perceives and the raw pixel value. JPEG images also introduce compression artifacts that create slightly varied colors in areas that look uniform. For exact brand colors, always use the original source file (SVG, AI, or the brand guideline hex codes) rather than sampling from a rendered image.
Is my image private when I upload it to the color picker?
Yes. The Image Color Picker runs entirely in your browser using the HTML Canvas API. Your image is never uploaded to any server.
Can I extract colors from a website screenshot?
Yes — take a screenshot of the website, upload it to the Image Color Picker, and click any color. For colors on the current page you can use the browser DevTools eyedropper method instead.
What is dominant color extraction?
Dominant color extraction finds the most common color clusters in an image by sampling many pixels and grouping similar colors together. The tool shows the top 5 most prominent color clusters — useful for getting a brand palette from a logo or a color scheme from a photograph.