取色器/屏幕颜色拾取工具
从屏幕上拾取任意颜色，立即以HEX、RGB、HSL和CMYK格式显示。
关于此工具
使用浏览器的EyeDropper API对屏幕上可见的任意颜色进行采样——包括浏览器窗口外部。拾取的颜色以HEX、RGB、HSL和CMYK格式显示；点击任意值可将其复制到剪贴板。最近拾取的10种颜色作为色板保存在localStorage中，便于快速复用。
使用方法
- 1 点击「拾取颜色」按钮激活取色器光标。
- 2 点击屏幕任意位置对该颜色进行采样。
- 3 以HEX、RGB、HSL和CMYK格式查看显示的颜色。
- 4 点击任意格式值将其复制到剪贴板。
What the EyeDropper API does
An eye dropper lets you point at any pixel on your screen and read its exact color. This tool is a thin, friendly wrapper around the browser's native EyeDropper API — a built-in capability in Chromium-based browsers. When you click "Pick Color," the operating system hands the browser a magnifier; the next pixel you click anywhere on your display, even outside the browser window, is sampled and returned as a hex value. Because the API reads the rendered screen, it works on a photo in another app, a desktop icon, a video frame, or a design tool, not just web pages. That cross-application reach is the feature that makes it genuinely useful for designers.
From one hex value to four color formats
The API returns a single sRGB hex code like #1A73E8. The tool then converts that into the formats you actually paste into code and design software, all computed locally:
| Format | Example | Where you use it |
|---|---|---|
| HEX | #1A73E8 | CSS, HTML, most design tools |
| RGB | rgb(26, 115, 232) | CSS, canvas, image editing |
| HSL | hsl(217, 82%, 51%) | CSS; easiest for tweaking lightness/saturation |
| CMYK | cmyk(89%, 50%, 0%, 9%) | Print design |
HSL is worth understanding because it matches how people think about color: hue is the position on the color wheel (0–360°), saturation is how vivid it is, and lightness is how bright. To make a button's hover state, you usually just lower the L value by 10% and keep H and S fixed — far more intuitive than guessing new hex digits.
A worked example of the conversion
Take the blue #1A73E8. Splitting the hex gives R=26, G=115, B=232. To find lightness, the tool scales each channel to 0–1, averages the largest and smallest (232 and 26 → about 0.506), giving L ≈ 51%. Saturation comes from how far apart the brightest and darkest channels are. The CMYK conversion first finds K (black) as 1 − max(R,G,B) in the 0–1 range, then derives cyan, magenta, and yellow relative to what's left. This is why a pure, bright color has a low K and a dark muddy one has a high K — the math mirrors how ink is actually laid down.
Practical tips
- Click a value to copy it. Each format has a copy button, so you can grab the exact string for your stylesheet without retyping.
- Your last 10 colors are remembered. Picked swatches are stored in your browser and shown as a history strip; click any swatch to reload all four formats for that color.
- Sample from images, not just solid fills. Photographs and gradients have subtle pixel-level variation, so pick from the exact spot you care about — neighboring pixels can differ by several values.
- CMYK here is a screen approximation. True print color depends on your printer, ink, and paper profile. Use the CMYK readout as a starting point, then proof on the actual press for color-critical work.
Common use cases
- Matching a brand color from a screenshot. A client sends a logo or a reference image with no color codes attached; sample the exact pixel and you have the hex instantly, no guessing.
- Recreating a color you see in another app. Because the API reaches outside the browser, you can lift a shade from a desktop design tool, a PDF, or a video frame and paste it straight into your CSS.
- Auditing a live site's palette. Pick from rendered buttons, text, and backgrounds to capture the colors a page actually displays — including any applied by gradients or images.
- Building a quick palette. The 10-color history acts as a scratch palette; sample several related tones and copy them out one by one.
Browser support and the fallback
The EyeDropper API is supported in Chrome, Edge, and Opera (version 95 and later). Firefox and Safari do not implement it yet. On those browsers the tool detects the missing API and shows a manual HEX input instead: type or paste any valid 6-digit hex code, press Enter, and you still get the full RGB/HSL/CMYK breakdown and history. So the conversion half of the tool works everywhere; only the live screen-picking requires a Chromium browser.
A genuine privacy note
Everything happens on your device. The EyeDropper API only returns a color value the moment you deliberately click — it cannot read your screen in the background, and the browser shows a magnifier so you always know it's active. The conversions, the copy actions, and the 10-color history all run in JavaScript locally, and the history lives only in your browser's localStorage. No colors, screenshots, or pixels are uploaded to any server.