¿Por qué cambia el color al mover el cursor?

El JPG comprime los píxeles vecinos en bloques, así que dos píxeles idénticos a la vista pueden llevar valores ligeramente distintos. Las fotos también tienen textura natural (piel, tela, follaje) - tomar un solo píxel no equivale a «el color medio de esa zona». Haz clic y compara varios píxeles cercanos si el resultado parece raro.

¿Puedo tomar el color de una captura?

Sí - es donde esta herramienta brilla. Las capturas suelen tener zonas de color plano (rellenos de UI, colores de marca, fondos de logo), así que un solo clic da de forma fiable el hex canónico. Las capturas PNG son sin pérdida; las JPG pueden tener ruido de compresión en los rellenos.

¿Cómo se calcula el HSL?

Conversión sRGB a HSL estándar - la misma que usa CSS internamente. El tono va en grados (0-360), saturación y luminosidad en porcentajes. El valor hex es canónico; el HSL es para diseñadores que razonan en «una versión más oscura de esto» o «el tono opuesto».

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.

Suelta una imagen o haz clic para elegir una

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

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.

Cómo usarla

Suelta una imagen
Arrastra y suelta o haz clic en la zona de soltado para elegir una captura, logo o foto.
Pasa el cursor para una vista previa en vivo
El color y el hex del píxel bajo el cursor se muestran en tiempo real.
Haz clic para capturar
Cada clic añade una muestra a la paleta (hex / RGB / HSL todos visibles).
Copia la paleta
Haz clic en una muestra para copiar su hex, o copia toda la paleta como bloque de variables CSS.

¿Qué es?

Un selector de color de imagen lee el valor RGB de cualquier píxel de una imagen cargada. El Canvas del navegador nos da los datos de píxel en bruto; los convertimos a los tres formatos que los diseñadores usan de verdad (hex para el código, RGB para programas de pintura, HSL para razonamiento relativo). Junto al guardado en muestras, es una forma rápida de extraer la paleta exacta de una marca desde una captura, foto o el sitio de un competidor.

Cuándo usarla

Recuperar los valores hex exactos de una marca desde una captura del logo, tomar los colores dominantes de una foto para un moodboard, igualar el color exacto de un elemento de UI desde una captura antigua cuando se perdió la fuente, o encontrar el color de acento perfecto en una foto de stock para un hero de landing.

Errores comunes

Tomar el color de un JPG y sorprenderse por el ruido - la compresión en bloques del JPG hace que un píxel no represente su vecindario visual. Tomar el color de una foto y tratar el resultado como «el color de marca» - las fotos varían de forma natural; el color de marca vive en una fuente de relleno plano. Y olvidar que dos píxeles vecinos en el borde de un logo pueden diferir mucho por el anti-aliasing.

Preguntas frecuentes

¿Por qué cambia el color al mover el cursor?: El JPG comprime los píxeles vecinos en bloques, así que dos píxeles idénticos a la vista pueden llevar valores ligeramente distintos. Las fotos también tienen textura natural (piel, tela, follaje) - tomar un solo píxel no equivale a «el color medio de esa zona». Haz clic y compara varios píxeles cercanos si el resultado parece raro.
¿Puedo tomar el color de una captura?: Sí - es donde esta herramienta brilla. Las capturas suelen tener zonas de color plano (rellenos de UI, colores de marca, fondos de logo), así que un solo clic da de forma fiable el hex canónico. Las capturas PNG son sin pérdida; las JPG pueden tener ruido de compresión en los rellenos.
¿Cómo se calcula el HSL?: Conversión sRGB a HSL estándar - la misma que usa CSS internamente. El tono va en grados (0-360), saturación y luminosidad en porcentajes. El valor hex es canónico; el HSL es para diseñadores que razonan en «una versión más oscura de esto» o «el tono opuesto».