Guide
How to use a color picker from image, screen and camera
TryColorPicker is a free online color picker built for one job: telling you the exact color of any pixel. Open a photo, screenshot or design, point at the spot you care about, and you get its HEX code along with RGB, HSL and every other format you might paste into code or a design tool. The same workspace also picks colors from your screen, your camera and live websites, so you don’t need a different tool for every source.
Pick a color from an image
Start by giving the picker an image. Upload a file, drag it onto the page, paste a screenshot straight from your clipboard with ⌘V / Ctrl+V, or paste a link to an image on the web. PNG, JPG, WebP, GIF, AVIF, BMP and SVG all work, and HEIC photos open in Safari.
As you move over the image, a magnified loupe shows the pixels under your cursor and the live HEX value, so you see what you’re about to pick before you click. Zoom with ⌘ / Ctrl + scroll or a pinch (up to 6400%), nudge one pixel at a time with the arrow keys, and click to sample. On a phone, drag your finger to move the magnifier and lift it to pick.
Photos and compressed JPEGs are noisy: two neighbouring pixels that look identical can differ by several values. Set the sample size to 3×3, 5×5 or 9×9 to average a small area and get the color your eye actually sees. For interface screenshots, use a lossless PNG and a single-pixel sample to get exact UI colors.
Get the HEX code from an image — and every other format
The HEX code comes first because it’s what most people need, and one click (or the C key) copies it. Beside it you’ll find the same color in every common notation:
- HEX — the six-digit code (eight with alpha) used across CSS, Figma and most design apps.
- RGB — red, green and blue channels from 0 to 255, handy for code and image editors.
- HSL, HSB/HSV and HWB — hue-based models that make it easy to adjust lightness or saturation by hand.
- CMYK — an approximate starting point for print work.
- OKLCH, OKLAB, CIELAB and CIELCH — perceptual spaces for even color scales and modern CSS.
- Display P3 — for wide-gamut screens.
Each pick also gets a human-readable color name, the nearest Tailwind color and ready-made snippets for CSS, Tailwind, SCSS, SwiftUI, UIKit, Jetpack Compose, Flutter, Android XML and Unity. So it works as a HEX color picker from image files and a color converter in one — you can also type or paste any color code to inspect it.
Use it as a screen color picker
Sometimes the color you need isn’t in a file — it’s in another app, a PDF, a paused video or a design tool. In desktop Chrome, Edge, Brave, Arc and Opera, press Pick from screen or the I key to turn your cursor into a system-wide eyedropper that can sample any pixel on any monitor.
Firefox and Safari don’t offer that yet, so the screen picker falls back to Capture screen: choose a screen, window or tab, and that single frame opens in the viewer where you can zoom in and pick precisely. Mobile browsers can’t pick from the screen, but you can take a screenshot and paste it.
Camera, pasted images and websites
Switch to the camera to pick colors from the real world — paint, fabric, packaging or plants. A live reticle shows the HEX value as you aim; tap to capture, or freeze the frame to zoom in. Even daylight and a larger sample size give the most faithful result. The camera color picker page has more tips for phones and webcams.
Pasting is the quickest route of all. Press ⌘V / Ctrl+V anywhere on the page and TryColorPicker works out what you copied: an image opens in the viewer, a color code opens in the inspector, and a web address is captured as a screenshot. That last path powers the website color picker, which renders any public page so you can pick the exact color of a button, link or logo.
Extract dominant colors and build palettes
Every image you open is analysed for its dominant colors. Pixels are grouped in the perceptual OKLab color space, so the swatches match what you see, and each one is snapped to a real color from the image instead of a muddy average. You’ll see how much of the image each color covers, and hovering a swatch dims everything else to show exactly where it appears. Choose between 2 and 12 colors and sort them by coverage, hue or lightness.
Save single picks or the whole set to your palette, then export it as CSS variables, a Tailwind theme, SCSS, JSON, a PNG or an SVG, or copy a share link. For a step-by-step walkthrough, see the guide to building a color palette from image.
Shades, harmonies, contrast and color blindness
Once you have a color, the color lab helps you use it. Generate a Tailwind-style 50–950 shade scale, explore complementary, analogous, triadic and other harmonies, check text contrast against WCAG and APCA with one-click fixes that reach AA or AAA, and preview how a palette looks with protanopia, deuteranopia, tritanopia or achromatopsia.
Private by design: everything runs in your browser
Many online color pickers upload your image to a server. TryColorPicker doesn’t. Files, camera frames and screen captures are decoded and read by your browser on your own device, so it’s safe for client work, unreleased designs and personal photos. Your history and saved palette stay in your browser’s local storage. The one exception is the website picker, which sends the address you enter to a screenshot service. The privacy page explains exactly what is shared.
Who uses an image color picker?
- Web designers and developers matching a brand color from a logo, mockup or screenshot, and pasting the HEX code straight into CSS or Tailwind.
- UI and product teams checking that a live app matches the design system and that text passes contrast.
- Illustrators, photographers and artists building palettes from reference photos.
- Marketers and creators keeping social graphics, slides and thumbnails on brand.
- Interior, fashion and craft projects using the camera for a digital starting point for paint, fabric or yarn.
- Anyone curious who needs a quick color identifier from an image: what is this color called, and what is its code?
Whether you came looking for an image colour picker, a color picker from screen, or simply a quick way to get a color from an image, the workflow is the same: open it, point, click and copy.