Upload an image, click anywhere on it, and instantly get the exact HEX, RGB and HSL color values.
🖱️ Move your mouse over the image and click to select a color.
Discover 100+ carefully selected color combinations for your next project.
ColorPick helps designers, developers, artists and creators extract colors from images quickly. You can also explore beautiful ready-made palettes for your next creative project.
ColorPick guide
ColorPick is designed for a practical problem: finding a usable digital color when you already have an image, screenshot, photograph, illustration, or design reference. Instead of guessing a color by eye, upload the image, sample the exact area you need, and copy the resulting HEX, RGB, or HSL value into your design or code.
When you select an image, the picker reads it in your browser and lets you inspect the pixels visually. Move over the image to preview a color, then click to keep the selection. The selected color is shown with multiple formats so you can choose the notation that fits your workflow. You can also add sampled colors to a personal palette and continue collecting related colors from the same image.
HEX represents a color with hexadecimal channel values and is common in CSS. RGB describes the red, green, and blue channel amounts. HSL describes hue, saturation, and lightness, which can make controlled color adjustments easier to understand. These formats describe the same digital color in different ways; converting between them does not create a new color.
Start with one image and sample the colors that matter most: a background, primary accent, text color, illustration detail, or product element. Save the important samples to My Palette, then use the Color Code, Color Suggestions, or Color Wheel tools to explore shades and supporting colors. Before publishing a design, check the actual colors in their final context because contrast and surrounding colors can change how a color appears.
Use the original or highest-quality image available when possible. Avoid sampling from compressed screenshots when you need an exact source color, because compression and image effects can change nearby pixels. For gradients, shadows, photographs, and textured areas, sample several points instead of assuming one pixel represents the whole area. ColorPick gives you the sampled digital value; your final design should still be tested on the real screen, background, and interface where it will be used.
ColorPick
Practical answers to common questions about this ColorPick tool.
Upload an image, move the pointer over it, and click the area you want. ColorPick shows the selected color and its HEX, RGB and HSL values.
The image picker reads the selected image in your browser so you can sample colors locally. The contact form is a separate feature that can send a message when you submit it.
The picker provides HEX, RGB and HSL values so you can use the same color in web design, UI, graphics and other digital projects.