Online Screen Color Picker
An online color picker from screen to code: point at any pixel, click, and copy its exact HEX, RGB, HSL or CMYK value.
Pick a Color
Click the button or press Alt + Q to pick
Settings
Automatically copy picked colors
How to pick a color?
- 1Open any file on your computer where you want to pick your color from.
- 2Move your windows (the opened file and the browser) so that you can see both on your screen.
- 3Start picking colors by pressing the button 'Pick color' or using the shortcut Alt + Q.
Why use our Online Color Picker?
Our free online screen color picker helps designers and developers quickly extract colors from any part of their screen. Easily get HEX, RGB, HSL, CMYK and other color formats for your digital designs, websites, images, and artwork. Save your color history and experiment with palettes efficiently—all directly in your browser. Screen sampling uses the browser's native EyeDropper API, which is why the picker works in Chrome, Edge and Opera and shows a notice instead of a broken button in browsers that have not implemented it.
Every format the picker returns
All seven values come from the same sRGB color the EyeDropper API reports. This is the full output for a pick of orange #ff5733.
| Format | What the numbers mean | Value | Where you need it |
|---|---|---|---|
| HEX | Three 0-255 channels written as two hex digits each | #ff5733 | CSS, HTML, design tools, palette naming |
| RGB | Red, green and blue as 0-255 integers | rgb(255, 87, 51) | CSS, canvas fillStyle, getImageData() |
| RGBA | RGB plus an alpha channel written as a 0-1 fraction | rgba(255, 87, 51, 1) | CSS transparency, canvas, shadows |
| HSL | Hue in degrees, saturation and lightness as percentages | hsl(11, 100%, 60%) | CSS custom properties, theme scales |
| HSLA | HSL plus an alpha channel | hsla(11, 100%, 60%, 1) | CSS translucent layers |
| HSV | Hue, saturation and value - the notation design apps label as HSB | hsv(11, 80%, 100%) | Photoshop, Figma and other color sliders |
| CMYK | Cyan, magenta, yellow and black ink coverage | cmyk(0%, 66%, 80%, 0%) | Print, prepress, packaging |
HEX, RGB, RGBA, HSL and HSLA are CSS values, so you can paste them straight into a stylesheet. hsv() and cmyk() are not part of CSS: browsers drop those declarations. Use them in design tools or hand them to a print workflow instead.
What a browser accepts when you paste it
Rounding is the other trap. This tool prints saturation, lightness and hue as whole numbers, so pasting an HSL value back in can land one level off in a channel - hsl(11, 100%, 60%) renders as rgb(255, 88, 51), not rgb(255, 87, 51). Keep the HEX or RGB value if a channel has to match exactly.
| You paste | Browser result | Reason |
|---|---|---|
| #ff5733 | Accepted | Six-digit hex is a legal CSS color |
| rgb(255, 87, 51) | Accepted | Channels are integers in the 0-255 range |
| hsl(11, 100%, 60%) | Accepted | Saturation and lightness carry their percent signs |
| hsl(11, 100, 60) | Declaration dropped | Unitless saturation and lightness are not valid |
| rgba(255, 87, 51, 100) | Accepted as opaque | Alpha is a 0-1 number, so 100 is clamped to 1 |
| cmyk(0%, 66%, 80%, 0%) | Declaration dropped | Print notation, not a CSS color function |
Observed in Edge 150 (Chromium) by assigning each string to an element style and reading it back. WebKit and Gecko implement the same CSS Color parsing rules, so the outcomes match on the invalid forms.
Browser support for screen picking
The Pick Color button calls the EyeDropper API. Where that API is missing the page says so and points you at the image workflow, instead of showing a button that does nothing.
| Browser or platform | Screen picking | Detail |
|---|---|---|
| Chrome, Edge, Opera | Yes | From version 95 on desktop |
| Chrome on ChromeOS | Yes, from 120 | Older ChromeOS builds hid the API |
| Chrome on Linux | X11 only | Not exposed under Wayland sessions |
| Firefox | No | Desktop and Android, any version so far |
| Safari | No | macOS and iOS alike |
| Android and iPhone browsers | No | No mobile build exposes EyeDropper |
Version data taken from the MDN browser-compat-data entry for the EyeDropper API, checked in October 2026. On a phone, take a screenshot and drop it into the Image Color Picker - that path works everywhere because it only needs a canvas.
Copy-paste CSS from one picked color
A single pick gives you everything a theme needs. Turn it into custom properties for plain CSS, or into a Tailwind color map - the Export button on this page writes the same Tailwind shape for every color in your history, keying them as color-1, color-2 and onward.
Design tokens as CSS custom properties
:root {
--brand-500: #ff5733;
--brand-500-rgb: 255, 87, 51;
--brand-soft: rgba(var(--brand-500-rgb), 0.12);
}
.hero {
background: var(--brand-500);
color: hsl(11, 100%, 96%);
}Keeping the channels as three plain numbers lets you build any translucent variant later with rgba(var(--brand-500-rgb), 0.12) instead of hard-coding a second color.
The same color in a Tailwind config
module.exports = {
theme: {
extend: {
colors: {
'color-1': '#ff5733',
'color-2': '#0ea5e9'
}
}
}
}Getting clean samples off your screen
Screen picking reads one pixel and calls it sRGB. That is exact, and it is also easy to aim badly. A few habits keep the numbers worth pasting.
- Sample flat fills, not edges. Glyph stems, icon curves and photo detail are anti-aliased, so the pixel you land on is a blend of your target color and whatever sits behind it. Zoom in and pick the middle of a solid area.
- Watch dithering and JPEG blocks. Gradients and heavily compressed photos put neighboring pixels several levels apart, so two picks a pixel apart can disagree. Move away from block borders.
- Pick the layer you mean. Translucency, browser chrome, and video scaling are already composited into the pixel you sample. If an overlay is on top of the swatch, you are measuring the overlay.
- Use history before you lose it. The last 8 picks stay on the panel and feed the site-wide color stack (up to 10 colors) that other tools read, all in local storage on this device.
Screen pixel or file pixel?
These are the two picking tools on this site and they answer different questions, so it is worth choosing on purpose rather than by habit.
- This page reads a pixel off your display through the EyeDropper API. It works on anything visible at all - a video frame, another app, a PDF viewer - but only in browsers that ship that API.
- Image Color Picker decodes a PNG, JPEG or WebP you upload and reads its pixels from a canvas, plus it proposes a dominant-color palette. It runs everywhere, including phones.
If the color lives in a file you can get hold of, upload it. If it only exists on screen, pick it here. For the step-by-step version of the second route, see the guide to picking a color from an image.