How do I pick a color from an image?

Upload an image using the button above, drag and drop a file, or paste a screenshot with Ctrl+V. Once loaded, move your cursor over the image and click on any pixel to lock its color. The magnifier loupe shows a zoomed-in view so you can pick colors with precision.

Can I pick a color from a screenshot?

Yes. Take a screenshot and press Ctrl+V (or Cmd+V on macOS) anywhere on the page. The image color picker automatically pastes it onto the canvas so you can immediately start sampling colors from it.

Does the image get uploaded to a server?

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images and color data never leave your device, and nothing is stored on any server.

What color formats does the tool provide?

The tool provides HEX, RGB, HSL, HSV, OKLCH, and CMYK color values for every sampled pixel. You can copy any format with one click or export all values at once.

What is the difference between HEX, RGB and HSL?

HEX is a six-character code used in HTML and CSS to represent colors. RGB defines a color by its red, green, and blue channel values. HSL stands for Hue, Saturation, and Lightness, making it easier to adjust a color's warmth or brightness intuitively.

Can I pick colors from a high-resolution image?

Yes. The image color picker supports images of any resolution. You can zoom in up to 3200% to see individual pixels clearly, making it easy to pick exact colors even from very large or detailed images.

Why can neighboring pixels have different colors?

Digital images often have slight color variations between neighboring pixels due to JPEG compression, anti-aliasing at edges, or camera sensor noise. This is normal. The tool offers 3x3, 5x5, and 11x11 area sampling to average out these variations when needed.

What is color sampling?

Color sampling is the process of reading the color value of one or more pixels from an image. Point sampling reads a single pixel, while area sampling averages a grid of pixels (such as 3x3 or 5x5) to give a more representative color, which is useful for photographs and textured surfaces.

Can I extract a color palette from an image?

Yes. The palette extractor analyzes your image and returns its dominant colors in modes like Dominant, Vibrant, Muted, and Balanced. You can export the palette as CSS variables, JSON, SVG, or a downloadable PNG card.

Can I use the tool on mobile?

Yes. The image color picker works on modern mobile browsers. You can upload photos from your gallery or paste screenshots directly on your phone or tablet.

Does the tool work with PNG, JPG and WebP images?

Yes. The tool supports PNG, JPG, JPEG, WebP, GIF, and SVG image formats. You can also load images directly from a public URL.

How accurate is the color picker?

The color picker reads the exact sRGB pixel values stored in the image file, so the colors are as accurate as the source data. Any perceived difference between screens is usually caused by display calibration, color profile settings, or brightness differences between devices.

图片颜色拾取器 – 从任何图片中选取颜色

Image Color Picker – Upload & Pick Colors

上传图片，缩放到任何像素，即时获取 HEX、RGB、HSL 等。所有处理都在浏览器本地完成。

drag & drop•Ctrl + V 粘贴•

或使用示例图片即时测试：

🔒 所有处理都在浏览器本地完成。零服务器存储。

#171717

最接近的 CSS 颜色: Black

HEX#171717

RGBrgb(23, 23, 23)

HSLhsl(0, 0%, 9%)

颜色属性:Hue: 0° (Red)Saturation: 0%Lightness: 9%Neutral

WCAG 对比度检查器WCAG 2.1

计算所选背景色相对于白色和黑色的无障碍对比度比率。

Best: White (18.2 : 1)

白色文本 (#FFFFFF)18.20 : 1

大标题预览 (18pt / 24px)

标准 14px 正文文本预览。对比度比率决定低视力用户的可读性。

AA Normal

AA Large

AAA Normal

AAA Large

黑色文本 (#000000)1.15 : 1

大标题预览 (18pt / 24px)

标准 14px 正文文本预览。对比度比率决定低视力用户的可读性。

AA Normal

AA Large

AAA Normal

AAA Large

色彩和谐

从活动颜色数学推导的和谐调色板。点击任何色块进行选择。

提取的图片调色板

使用客户端颜色量化从上传的图片中派生真实调色板。

颜色:

导出选项:

关于图片颜色拾取您需要知道的一切

关于颜色空间、精确采样、对比度无障碍和客户端处理的综合指南。

1如何从任何图片中选取颜色

1. 加载您的图片Drag and drop any PNG, JPG, WebP, GIF, or SVG file, paste directly from clipboard (<kbd class="px-1 py-0.5 rounded bg-white dark:bg-[#2a2a2a] border border-[#d1d5db] dark:border-[#2e2e2e]">Ctrl+V</kbd>), or enter a public image URL.

2. 缩放并采样Use mouse wheel or toolbar buttons to zoom in up to 3200%. The magnifier loupe displays a 9×9 real-time pixel grid. Hover over any target pixel and click to lock.

3. 复制并导出Instantly copy color codes in HEX, RGB, HSL, HSV, OKLCH, or CMYK. Extract authentic palettes and export to CSS, JSON, SVG, or high-res PNG cards.

2理解图片颜色采样 (1×1 vs 3×3 vs 5×5)

在数字图像中，单个像素通常会因有损 JPEG 压缩、矢量边缘周围的抗锯齿或相机传感器的自然噪声而略有变化。采样模式让您完全控制像素颜色的测量方式：

1×1 单像素（点采样）

读取光标下单个像素的精确 RGB 颜色。适用于平面 UI 模型、矢量艺术、像素艺术和数字徽标，其中边界锐利且颜色区域均匀。

3×3 和 5×5 区域平均

以光标为中心采样方形矩阵（9 或 25 个像素）并计算代表色。平均值计算颜色通道的算术平均值，而中值过滤异常噪声和颗粒。适用于照片和纹理材料。

3颜色空间和模型比较

格式	示例	主要用例
HEX	#0070F3	通用 Web 设计、HTML、CSS 样式表、UI 令牌。
RGB	rgb(0, 112, 243)	屏幕显示硬件、Canvas API、CSS rgba() 不透明度操作。
HSL	hsl(212, 100%, 48%)	人类直觉调整：轻松调整亮度或饱和度而不改变色相。
HSV / HSB	hsv(212, 100%, 95%)	Figma、Sketch、Adobe Photoshop 颜色选择器。
OKLCH	oklch(0.58 0.22 254.2)	现代 CSS Color 4 标准，在亮度和色度上具有感知均匀性。
CMYK	cmyk(100%, 54%, 0%, 5%)	商业胶印和数字物理印刷制作。

🔒隐私政策 – 图像颜色选择器

与许多将您的个人图片上传到远程云服务器的在线颜色选择器不同，Image Color Picker 使用原生 HTML5 Canvas API 和 JavaScript TypedArrays 在浏览器中直接处理 100% 的数据。

您的图片永远不会离开您的本地计算机或智能手机。
没有用户帐户、跟踪令牌或服务器端数据库。
页面加载到浏览器后完全离线工作。

从任何图片中选取任何颜色。