Color Picker
Click an image to read the pixel color as HEX, RGB and HSL and copy it. A palette of the main colors is extracted automatically.
Main color palette
You can also type a color into the HEX, RGB or HSL field and the others convert. e.g. #ff8800, rgb(255, 136, 0), hsl(32, 100%, 50%)
Saved colors
How to use
- Upload an image.
- Click or drag over the image to pick a color. You can also click a color in the palette.
- Copy with the buttons next to HEX, RGB and HSL, and save favorites to copy them all at once.
View detailed guide
What this tool does
Picks the color of any pixel in an image and shows and copies it as HEX, RGB or HSL. It also takes a dominant color palette from the image automatically. Useful for choosing reference colors for design.
Steps
- Upload an image.
- Click on the image, or hold and move, to pick a color. You can also click a swatch in the palette below.
- Copy the notation you want with the "Copy" button beside HEX, RGB or HSL.
- Collect colors you use often with "Save current color" and copy them all at once with "Copy all saved".
Settings
- Color value boxes: typing a value in any of HEX, RGB or HSL updates the others. The formats #RGB, #RRGGBB, rgb(r, g, b) and hsl(h, s%, l%) are accepted.
- Colors: how many colors the dominant palette shows (5, 8, 12, 16).
- Eyedropper: appears only in supporting browsers (Chrome, Edge and so on) and can pick colors from elsewhere on the screen, not only the image.
- Saved colors: up to 20, and the same color is not saved twice. They stay when you change the image.
How it works
The image is drawn at its original size on a canvas and the pixel value at the clicked position is read to get the color. For the dominant colors, all pixels that are not more than half transparent are reduced to 4 bits per channel and similar colors are counted together, then chosen from the most common, skipping colors close to ones already chosen (RGB distance under 40). If there are not enough candidates the rule is relaxed to fill the count. Large images are counted from a sample of pixels for speed.
Good to know
- The color values are read straight from the image as it appears, so if the image has a color profile it may look different in other programs.
- For a semi-transparent pixel the color is picked but the opacity is not part of the color value; it is shown only in the info line above.
- For a GIF, colors are picked from the first frame.
- Results are gone when you close the tab.