스포이드 / 화면 색상 선택기
화면에서 임의의 색상을 선택하고 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.