Color Picker
Upload an image and sample colors with a zoom square or your browser color loupe, or use the native browser picker and HEX values. Copy HEX, RGB, or HSL values for CSS and design work.
Opens the color picker that comes with your browser.
Use 3 or 6 hexadecimal characters, with or without the # prefix.
Sample from an image
Move over the image to preview a color, then click to keep it.
Selected color
HEX, RGB, and HSL values
Pick a color from the image or use the browser picker.
#2563EB
rgb(37, 99, 235)
hsl(221, 83%, 53%)
On this page
How the color picker works
Upload an image to sample colors from it, open the color picker that comes with your browser, or type a HEX value directly. The preview and the HEX, RGB, and HSL values update immediately, and every value has its own copy button.
Sampling from an image
Choose a PNG, JPEG, or WebP image, then move over it with the cursor. The zoom square shows the pixels around the cursor with a small square in the middle marking the color you will pick, while the preview shows that color. Click to keep it and update the HEX, RGB, and HSL values.
In Chrome and Edge you can also press Pick with the browser magnifier: the color loupe that comes with your browser appears, and you can move it over the image and click to keep a color.
The values shown
HEX is the six-character color code used in CSS. RGB shows the red, green, and blue channels from 0 to 255. HSL shows the hue in degrees, while saturation and lightness are percentages rounded to whole numbers. All three describe the same selected color.