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.
An approximate match to a standard CSS color name. Use the HEX value for the exact sampled 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 is useful whenever you already have a visual reference and need to turn it into a usable digital color. From a photo, screenshot, illustration, or design mockup, sample the exact area that matters and reuse the result in your project.
If you prefer to think of the tool as an online color selector, color chooser, or color finder from an image, the workflow is the same: preview a shade, click to select it, then copy its HEX, RGB, or HSL value. This makes color picking practical for UI work, branding, graphics, and everyday design decisions.
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.
A color picker is a tool for identifying and selecting a digital color. ColorPick lets you sample a color from an image and gives you its HEX, RGB and HSL values.
Color picking is useful when you need to match a color from a photo, screenshot, illustration, product image or design reference. You can sample the color and reuse its digital value in design or code.
Choose the Color Wheel tool and explore the hue relationships around the wheel. Use complementary, analogous and other color relationships to find combinations that work well together.
Yes. Upload an image and select a pixel to see its sampled HEX, RGB and HSL values, along with the closest standard CSS color name. The color name is an approximate match; the HEX value represents the sampled color.
COLOR TOOLS
Find and reuse the exact shade you need with ColorPick, a free online color picker. Sample a color from an image, photo, or screenshot, or choose a shade and copy its HEX, RGB, or RGBA value for your website, design, or creative project. Use the image color picker, HEX color picker, RGB color picker, or color wheel to match the way you work.