How do I pick a color from an image?

Upload an image using the button above, drag and drop a file, or paste a screenshot with Ctrl+V. Once loaded, move your cursor over the image and click on any pixel to lock its color. The magnifier loupe shows a zoomed-in view so you can pick colors with precision.

Can I pick a color from a screenshot?

Yes. Take a screenshot and press Ctrl+V (or Cmd+V on macOS) anywhere on the page. The image color picker automatically pastes it onto the canvas so you can immediately start sampling colors from it.

Does the image get uploaded to a server?

No. All image processing happens entirely in your browser using the HTML5 Canvas API. Your images and color data never leave your device, and nothing is stored on any server.

What color formats does the tool provide?

The tool provides HEX, RGB, HSL, HSV, OKLCH, and CMYK color values for every sampled pixel. You can copy any format with one click or export all values at once.

What is the difference between HEX, RGB and HSL?

HEX is a six-character code used in HTML and CSS to represent colors. RGB defines a color by its red, green, and blue channel values. HSL stands for Hue, Saturation, and Lightness, making it easier to adjust a color's warmth or brightness intuitively.

Can I pick colors from a high-resolution image?

Yes. The image color picker supports images of any resolution. You can zoom in up to 3200% to see individual pixels clearly, making it easy to pick exact colors even from very large or detailed images.

Why can neighboring pixels have different colors?

Digital images often have slight color variations between neighboring pixels due to JPEG compression, anti-aliasing at edges, or camera sensor noise. This is normal. The tool offers 3x3, 5x5, and 11x11 area sampling to average out these variations when needed.

What is color sampling?

Color sampling is the process of reading the color value of one or more pixels from an image. Point sampling reads a single pixel, while area sampling averages a grid of pixels (such as 3x3 or 5x5) to give a more representative color, which is useful for photographs and textured surfaces.

Can I extract a color palette from an image?

Yes. The palette extractor analyzes your image and returns its dominant colors in modes like Dominant, Vibrant, Muted, and Balanced. You can export the palette as CSS variables, JSON, SVG, or a downloadable PNG card.

Can I use the tool on mobile?

Yes. The image color picker works on modern mobile browsers. You can upload photos from your gallery or paste screenshots directly on your phone or tablet.

Does the tool work with PNG, JPG and WebP images?

Yes. The tool supports PNG, JPG, JPEG, WebP, GIF, and SVG image formats. You can also load images directly from a public URL.

How accurate is the color picker?

The color picker reads the exact sRGB pixel values stored in the image file, so the colors are as accurate as the source data. Any perceived difference between screens is usually caused by display calibration, color profile settings, or brightness differences between devices.

Selector de Color de Imagen – Elige Colores de Cualquier Imagen

Image Color Picker – Upload & Pick Colors

Sube una imagen, amplía cualquier píxel y obtén instantáneamente HEX, RGB, HSL y más. Todo se procesa localmente en tu navegador.

drag & drop•Ctrl + V para pegar•

O prueba instantáneamente con imágenes de ejemplo:

🔒 Todo se procesa localmente en tu navegador. Sin almacenamiento en servidores.

#171717

Color CSS más cercano: Black

HEX#171717

RGBrgb(23, 23, 23)

HSLhsl(0, 0%, 9%)

Propiedades del Color:Hue: 0° (Red)Saturation: 0%Lightness: 9%Neutral

Verificador de Contraste WCAGWCAG 2.1

Calcula ratios de contraste de accesibilidad para el color de fondo seleccionado contra blanco y negro.

Best: White (18.2 : 1)

Texto Blanco (#FFFFFF)18.20 : 1

Vista previa de titular grande (18pt / 24px)

Vista previa de texto de cuerpo de 14px estándar. El ratio de contraste determina la legibilidad para usuarios con baja visión.

AA Normal

AA Large

AAA Normal

AAA Large

Texto Negro (#000000)1.15 : 1

Vista previa de titular grande (18pt / 24px)

Vista previa de texto de cuerpo de 14px estándar. El ratio de contraste determina la legibilidad para usuarios con baja visión.

AA Normal

AA Large

AAA Normal

AAA Large

Armonías de Color

Paletas armónicas derivadas matemáticamente del color activo. Haz clic en cualquier muestra para seleccionarla.

Paleta de Imagen Extraída

Deriva una paleta de colores auténtica de tu imagen subida usando cuantización de color del lado del cliente.

Colores:

Opciones de Exportación:

Historial de Colores Recientes0

Guardado localmente en el almacenamiento de tu navegador. Nunca se envía a ningún servidor.

Aún no se han seleccionado colores. Haz clic en cualquier parte de la imagen para registrar colores aquí.

Guía de Usuario y Referencia

Todo lo que Necesitas Saber sobre Selección de Color de Imagen

Una guía completa sobre espacios de color, muestreo de precisión, accesibilidad de contraste y procesamiento del lado del cliente.

1Cómo Elegir un Color de Cualquier Imagen

1. Carga Tu ImagenDrag and drop any PNG, JPG, WebP, GIF, or SVG file, paste directly from clipboard (<kbd class="px-1 py-0.5 rounded bg-white dark:bg-[#2a2a2a] border border-[#d1d5db] dark:border-[#2e2e2e]">Ctrl+V</kbd>), or enter a public image URL.

2. Amplía y MuestreaUse mouse wheel or toolbar buttons to zoom in up to 3200%. The magnifier loupe displays a 9×9 real-time pixel grid. Hover over any target pixel and click to lock.

3. Copia y ExportaInstantly copy color codes in HEX, RGB, HSL, HSV, OKLCH, or CMYK. Extract authentic palettes and export to CSS, JSON, SVG, or high-res PNG cards.

2Entendiendo el Muestreo de Color de Imagen (1×1 vs 3×3 vs 5×5)

En imágenes digitales, los píxeles individuales a menudo varían ligeramente debido a la compresión JPEG con pérdida, el anti-aliasing alrededor de bordes vectoriales o el ruido natural del sensor de la cámara. Los modos de muestreo te dan control completo sobre cómo se miden los colores de los píxeles:

1×1 Píxel Único (Muestreo Puntual)

Lee el color RGB exacto del único píxel bajo el cursor. Ideal para maquetas de UI planas, ilustraciones vectoriales, arte pixelado y logotipos digitales donde los bordes son nítidos y las regiones de color son uniformes.

Promedios de Área 3×3 y 5×5

Muestrea una matriz cuadrada (9 o 25 píxeles) centrada en tu cursor y calcula el color representativo. El Promedio calcula la media aritmética a través de los canales de color, mientras que la Mediana filtra el ruido y el grano. Ideal para fotografías y materiales con textura.

3Espacios y Modelos de Color Comparados

Formato	Ejemplo	Caso de Uso Principal
HEX	#0070F3	Diseño web universal, HTML, hojas de estilo CSS, tokens de interfaz.
RGB	rgb(0, 112, 243)	Hardware de visualización en pantalla, APIs de Canvas, manipulación de opacidad CSS rgba().
HSL	hsl(212, 100%, 48%)	Ajustes intuitivos para humanos: ajusta fácilmente la luminosidad o saturación sin cambiar el tono.
HSV / HSB	hsv(212, 100%, 95%)	Selectores de color de Figma, Sketch, Adobe Photoshop.
OKLCH	oklch(0.58 0.22 254.2)	Estándar moderno CSS Color 4 con uniformidad perceptiva en luminosidad y croma.
CMYK	cmyk(100%, 54%, 0%, 5%)	Producción de impresión offset comercial y digital física.

🔒Política de Privacidad – Selector de Color de Imagen

A diferencia de muchos selectores de color en línea que suben tus imágenes personales a servidores remotos, Image Color Picker procesa el 100% de tus datos directamente en tu navegador usando la API nativa de Canvas HTML5 y TypedArrays de JavaScript.

Tus imágenes nunca salen de tu computadora o teléfono local.
Sin cuentas de usuario, tokens de seguimiento o bases de datos del lado del servidor.
Funciona completamente sin conexión una vez que la página se carga en tu navegador.

Elige Cualquier Color de Cualquier Imagen.