--- title: "Color Eyedropper - Pick colors from any point in an image" description: "Pick a color from any point in an image and read it as HEX, RGB, HSL, or OKLCH. Sample a single pixel or the average of a 3 × 3 or 5 × 5 area, and copy the value you need. Picked colors are kept in a history. Images stay in your browser." canonical_url: "https://web-toolbox.dev/en/tools/color-eyedropper" meta: author: K "og:description": "Pick a color from any point in an image and read it as HEX, RGB, HSL, or OKLCH. Sample a single pixel or the average of a 3 × 3 or 5 × 5 area, and copy the value you need. Picked colors are kept in a history. Images stay in your browser." "og:image": "https://web-toolbox.dev/og/en/tools/color-eyedropper-1e7c4ac8.png" "og:image:alt": "Color Eyedropper" "og:image:height": "630" "og:image:width": "1200" "og:title": "Color Eyedropper - Pick colors from any point in an image" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **Color Eyedropper** Pick colors from any point in an image **Drop image here**or click to select an image PNG / JPEG / WebP / GIF / BMP / AVIF ## **Picked color** Pick a color to see its details here. ## **History** 0 Choose an image to keep picked colors here. ## What is Color Eyedropper? Color Eyedropper picks a color from any point in an image and shows it as a HEX, RGB, HSL, or OKLCH value. Use it to match a button color or a shadow gray from a screenshot, mockup, or photo. Images are processed in your browser and are not uploaded. ## How to Use 1. Choose an image file. You can also drag and drop it. 2. Move the pointer over the image. The loupe shows the surrounding pixels and the color to pick. 3. Click or tap to pick the color. Click a value row to copy it. With the image focused, the arrow keys move the cursor one pixel at a time, and Enter or Space picks the color. ## Sample Area - **1 px**: the color of the pixel under the cursor. - **3 × 3** and **5 × 5**: the average of the area around the cursor. Red, green, blue, and alpha are averaged independently. This smooths out compression noise and soft edges. Near the edge of the image, the area shifts to stay inside the image. If the image is smaller than the area, the area shrinks to fit. ## Picked Colors Colors are shown as HEX, RGB, HSL, and OKLCH. Colors with transparency use an 8-digit HEX, and the alpha is included in the RGB, HSL, and OKLCH values. Picked colors are kept in the history, newest first. The same color is not added twice. Select a row to see its values. You can remove a row, clear the history, or copy all. Copy all writes one HEX value per line. The history is cleared when you reload the page or change the image. ## Supported Formats PNG, JPEG, WebP, GIF, BMP, and AVIF are supported. Export SVG as PNG or another raster format before loading it. ## Use Cases - Matching button or heading colors from a design mockup or screenshot - Pulling accent colors out of a photo - Checking UI colors on an existing site before recreating them - Collecting a few candidate colors before building a palette To get the overall palette of an image at once, [**Color Code Extractor**](https://web-toolbox.dev/en/tools/color-extractor) pulls out its main colors. **How was your experience?** Last updated: October 30, 2026 ### **Related Tools** - [

**Color Code Extractor**

](https://web-toolbox.dev/en/tools/color-extractor) - [

**Color Contrast Checker**

](https://web-toolbox.dev/en/tools/color-contrast-checker) - [

**Color Code Converter**

](https://web-toolbox.dev/en/tools/color-converter) - [

**Tailwind Color Palette Generator**

](https://web-toolbox.dev/en/tools/tailwind-color-palette) - [

**Heading Extractor**

](https://web-toolbox.dev/en/tools/heading-extractor) - [

**Suggest Keyword Extractor**

](https://web-toolbox.dev/en/tools/suggestion-extractor) - [

**Video Frame Extractor**

](https://web-toolbox.dev/en/tools/video-frame-extractor) - [

**ASCII to HEX Converter**

](https://web-toolbox.dev/en/tools/ascii-to-hex) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/en#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"en-US","name":"Web ToolBox","url":"https://web-toolbox.dev/en","translationOfWork":{"@id":"https://web-toolbox.dev/#website"}},{"@id":"https://web-toolbox.dev/en/tools/color-eyedropper#webpage","@type":"WebPage","description":"Pick a color from any point in an image and read it as HEX, RGB, HSL, or OKLCH. Sample a single pixel or the average of a 3 × 3 or 5 × 5 area, and copy the value you need. Picked colors are kept in a history. Images stay in your browser.","name":"Color Eyedropper - Pick colors from any point in an image","url":"https://web-toolbox.dev/en/tools/color-eyedropper","isPartOf":{"@id":"https://web-toolbox.dev/en#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/en/tools/color-eyedropper"]}]},{"@id":"https://web-toolbox.dev/en/tools/color-eyedropper#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"Pick a color from any point in an image and read it as HEX, RGB, HSL, or OKLCH. Sample a single pixel or the average of a 3 × 3 or 5 × 5 area, and copy the value you need. Picked colors are kept in a history. Images stay in your browser.","name":"Color Eyedropper - Pick colors from any point in an image","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.