Why does the colour change when I move the cursor?

JPGs compress neighbouring pixels into blocks, so two pixels that look identical to the eye can actually carry slightly different values. Photos also have natural texture (skin, fabric, foliage) - sampling one pixel from a photo isn't the same as 'the average colour of that region'. Click and compare multiple nearby pixels if the result feels off.

Can I sample from a screenshot?

Yes - that's what this tool is best at. Screenshots typically have flat colour regions (UI fills, brand colours, logo backgrounds), so a single click reliably gives you the canonical hex. PNG screenshots are lossless; JPG screenshots can have compression noise on solid fills.

Standard sRGB-to-HSL conversion - the same one CSS uses internally. Hue is in degrees (0-360), saturation and lightness are percentages. The hex value is canonical; HSL is for designers who think in terms of 'a darker version of this' or 'the opposite hue'.

Selector de color de imagen

Suelta una imagen, haz clic en cualquier píxel para obtener su hex, RGB y HSL - y construye una paleta sobre la marcha.

Funciona en tu navegador

Suelta una imagen y pasa el cursor - la vista previa muestra en vivo el color y el hex del píxel bajo el puntero. Haz clic para fijar ese píxel como muestra (hex / RGB / HSL visibles). Hasta 20 muestras se apilan; copia cualquiera, o copia la paleta entera como bloque de variables CSS. Nada se sube.

Suelta una imagen o haz clic para elegir una

PNG, JPG, WebP, AVIF, GIF, SVG, BMP

Cómo usarla

Drop an image
Drag-and-drop or click the dropzone to pick a screenshot, logo or photo.
Hover for a live preview
The colour and hex of the pixel under the cursor show in real time.
Click to capture
Each click adds a swatch to the palette (hex / RGB / HSL all visible).
Copy the palette
Click any swatch to copy its hex, or copy the entire palette as a CSS variable block.

¿Qué es?

An image color picker reads the RGB value of any pixel in an uploaded image. The browser's Canvas API gives us the raw pixel data; we convert it to the three formats designers actually use (hex for code, RGB for paint software, HSL for relative reasoning). Combined with a save-as-swatch UX, it becomes a fast way to extract a brand's exact palette from a screenshot, photo or competitor's site.

Cuándo usarla

Recovering a brand's exact hex values from a logo screenshot, sampling a photograph's dominant colours for a design moodboard, matching a UI element's exact colour from an old screenshot when the source is lost, or finding the perfect accent colour from a stock photo for a landing page hero.

Errores comunes

Sampling a JPG and being surprised at the noise - JPG block compression means a single pixel doesn't represent its visual neighbourhood. Sampling a photograph and treating the result as 'the brand colour' - photos have natural variation; the brand colour lives in a flat-fill source. And forgetting that two adjacent pixels at the edge of a logo can differ wildly because of anti-aliasing.

Preguntas frecuentes

Why does the colour change when I move the cursor?: JPGs compress neighbouring pixels into blocks, so two pixels that look identical to the eye can actually carry slightly different values. Photos also have natural texture (skin, fabric, foliage) - sampling one pixel from a photo isn't the same as 'the average colour of that region'. Click and compare multiple nearby pixels if the result feels off.
Can I sample from a screenshot?: Yes - that's what this tool is best at. Screenshots typically have flat colour regions (UI fills, brand colours, logo backgrounds), so a single click reliably gives you the canonical hex. PNG screenshots are lossless; JPG screenshots can have compression noise on solid fills.
How is HSL computed?: Standard sRGB-to-HSL conversion - the same one CSS uses internally. Hue is in degrees (0-360), saturation and lightness are percentages. The hex value is canonical; HSL is for designers who think in terms of 'a darker version of this' or 'the opposite hue'.

Conversor de colores (HEX, RGB, HSL)

Convierte colores entre HEX, RGB, HSL y OKLCH.

Generador de paleta de colores

Genera paletas complementarias, análogas, triádicas, tetrádicas y monocromáticas a partir de cualquier color base.

Comprobador de contraste

Comprobador de contraste WCAG con ratio en vivo, insignias AA/AAA y texto de muestra.