Screen Color Picker

Screen Color Picker — Instantly Capture Any Color's Values

The Screen Color Picker is a browser-based tool that uses the modern EyeDropper API to let you sample any color from anywhere on your screen with a single click. Once a color is captured, the tool automatically converts it into five of the most widely used color formats — HEX, RGB, HSL, HSV, and CMYK — each with a one-click copy button for immediate use in your workflow.

Key Features

• Pick from anywhere on screen: Sample colors from web pages, images, video frames, app interfaces, or any part of your desktop — no screenshot required.
• Multi-format output: Automatically displays HEX, RGB, HSL, HSV, and CMYK values, covering web development, graphic design, and print use cases.
• HEX case toggle: Switch the HEX value between uppercase and lowercase to match your code style preferences.
• Color history: The last 12 picked colors are saved as swatches. Click any to revisit, compare, or copy its values again.
• Live preview: A large color swatch updates instantly after each pick, displayed over a checkerboard background for accurate visual reference.
• One-click copy: Every format row has its own copy button — tap and paste directly into CSS, Figma, Photoshop, or any other tool.

Who Is It For?

• UI/UX Designers: Grab exact color values from any inspiration source without leaving the browser or opening additional apps.
• Front-end Developers: Extract precise HEX or RGB values from mockups or reference pages for direct use in CSS stylesheets.
• Graphic & Print Designers: Get accurate CMYK values for print-ready color specifications.
• Brand & Marketing Teams: Quickly identify and document brand colors from competitor sites or visual references.

How to Use

1. Click the "Pick Screen Color" button. The browser enters color-picking mode and the cursor changes to a magnifier.
2. Move your cursor over any area of the screen to preview the color in real time.
3. Click on your target color. The tool captures it and populates all format fields automatically.
4. Find the format you need in the right panel and click its copy button.
5. The history swatches update with each pick, making it easy to revisit previous colors.

Color Format Reference

• HEX: e.g. #16baaa — The standard format for web development, supported natively by CSS, HTML, and virtually all design tools.
• RGB: e.g. rgb(22, 186, 170) — Defines color by red, green, and blue channel intensities (0–255), ideal for screen-based design.
• HSL: e.g. hsl(175, 79%, 41%) — Describes color by hue, saturation, and lightness, making it intuitive for manual color adjustments in CSS.
• HSV: e.g. hsv(175, 88%, 73%) — Similar to HSL but with a different brightness model; commonly used in professional tools like Photoshop's color picker.
• CMYK: e.g. cmyk(88, 0, 9, 27) — The standard model for print, representing cyan, magenta, yellow, and key (black) ink percentages.

Frequently Asked Questions

Q: The button is grayed out or doesn't respond. What should I do?
A: The EyeDropper API requires Chrome 95+, Edge 95+, or another Chromium-based browser. Safari and Firefox do not currently support this feature. Please switch to a supported browser.

Q: Why is there no alpha/transparency channel in the picked colors?
A: The EyeDropper API specification does not expose alpha values. All captured colors have an alpha of 1 (fully opaque) by design — this is a browser-level limitation, not a tool restriction.

Q: Is the color history saved between sessions?
A: Yes. The tool uses browser localStorage to automatically save your last 12 picked colors. They are restored the next time you open the page. History is not saved in private/incognito mode.

Q: Can I pick colors from outside the browser window?
A: Yes. After clicking the pick button, you can move your cursor to the desktop, other application windows, or anywhere on your screen to sample a color — not just content inside the browser.