Cuentagotas / Selector de Color de Pantalla
Tome cualquier color de su pantalla y véalo al instante en formatos HEX, RGB, HSL y CMYK.
Acerca de esta herramienta
Use la API EyeDropper del navegador para muestrear cualquier color visible en su pantalla — incluyendo fuera de la ventana del navegador. El color seleccionado se muestra en formatos HEX, RGB, HSL y CMYK; haga clic en cualquier valor para copiarlo a su portapapeles. Sus últimos 10 colores seleccionados se guardan como muestras en localStorage para reutilización rápida.
Cómo usar
- 1 Haga clic en el botón 'Seleccionar Color' para activar el cursor cuentagotas.
- 2 Haga clic en cualquier lugar de su pantalla para muestrear ese color.
- 3 Vea el color mostrado en formatos HEX, RGB, HSL y CMYK.
- 4 Haga clic en cualquier valor de formato para copiarlo a su portapapeles.
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.