---
title: "Image Color Picker: HEX, RGB, HSL & OKLCH | Click Petal"
description: "Pick any color from an image with a zoom loupe. Drop, paste or open a picture and copy its HEX, RGB, HSL and OKLCH values. Free and private."
url: https://clickpetal.click/
---

Specimen no. 01 · the eyedropper

# Image color picker

Drop, paste or open a picture, hover to magnify, and click any pixel for its HEX, RGB, HSL and OKLCH values. The image never leaves your device.

## How to pick a color from an image

Open a picture by dropping it on the sheet, pasting it with `Ctrl`+`V` (`⌘`+`V` on a Mac) or choosing a file. Move the pointer over it and the loupe magnifies the pixels under the crosshair, so you can land on exactly the one you want; click or tap to pick it. From the keyboard, tab to the image, steer the crosshair with the arrow keys (hold Shift for ten-pixel steps) and press Enter.

### What the four values mean

**HEX** and **RGB** are the same three 8-bit sRGB numbers written two ways. **HSL** splits a color into hue, saturation and lightness, which makes lighter or duller variants easy to write. **OKLCH** is the newer CSS notation built on the OKLab color space: its lightness follows how bright a color really looks, which makes it the best fit for building even color scales.

### Exact pixel or average

Photos are grainy: neighboring pixels of a plain blue sky can differ by several steps. Set the sample to 3 × 3 or 5 × 5 to average a small square instead of trusting one pixel; keep it at 1 pixel for logos, icons and screenshots. Every pick is added to the tray, which you can copy as a list of HEX codes or as CSS custom properties.

## The rest of the collection

Four more ways to read the colors in a picture.

- [Palette from image](https://clickpetal.click/palette-from-image/): The 3 to 12 dominant colors of any picture, with their shares, as CSS variables, JSON or a PNG strip. No. 02
- [Color name finder](https://clickpetal.click/color-name-finder/): The nearest CSS named color and community names for any HEX, RGB, HSL or OKLCH value. No. 03
- [Color blindness simulator](https://clickpetal.click/color-blindness-simulator/): See an image as it might look with protanopia, deuteranopia, tritanopia or achromatopsia. No. 04
- [Gradient from image](https://clickpetal.click/gradient-from-image/): Draw a line across a photo and turn the colors along it into a CSS linear gradient. No. 05

## Recommended

Two free services that help with the rest of a designer's day online.

Disposable email · no sign-up

### CleanTempMail

Free stock photos, mockup kits and palette packs often sit behind an email form. CleanTempMail gives you a temporary inbox straight away: no sign-up, a random or custom address on hundreds of domains, and every message deleted automatically after 3 days.

Collect the download link; keep your real inbox for clients.

[Get a temporary inbox](https://cleantempmail.com/)

Disposable cloud browser · free site checks

### WebTraceCheck

Found a free-asset site you have never heard of? Open it in WebTraceCheck's disposable cloud browser, which runs Brave, Chrome, Edge, Firefox or Chromium on an isolated desktop that is deleted after each session, and look up its domain with the free DNS and domain tools first.

Nothing to install, with free browser time every day.

[Try WebTraceCheck](https://webtracecheck.com/)

## Questions

**Is my image uploaded anywhere?**

No. Your browser decodes and reads the image on your own device. There is no server that receives files, and a loaded page keeps working offline.

**Why is the color slightly different from my photo editor?**

Browsers convert photos with an embedded color profile, such as Display P3 pictures from phones, to sRGB before a page can read them, while an editor may show the unconverted numbers. Averaging also shifts the result a little. Flat graphics like logos and screenshots match exactly.

**Can I pick a color from outside the image?**

In Chrome and Edge on a computer, the Pick from screen button opens the browser's own eyedropper, which can read any pixel on your screen. Other browsers do not offer it yet; take a screenshot and drop it here instead.

**How large an image can I open?**

Anything your browser can decode. Pictures longer than 4,096 pixels on their longest side are scaled down to that size before reading, which is still plenty for picking colors.