Selector de color de imagen

Selector de píxel frente a extractor de paleta: dos trabajos diferentes

Una confusión común que conviene aclarar primero: esto es un selector de píxel, no un extractor de paleta. Las dos herramientas suenan parecidas y ambas implican imágenes, pero responden a preguntas diferentes:

• Selector de píxel (esta herramienta): haces clic en una ubicación exacta y la herramienta lee el color de ese único píxel. Úsalo cuando necesites el color de un elemento específico: el rojo de marca de un logotipo, el azul exacto de un cielo en una foto de referencia, el blanco roto del fondo de una interfaz en una captura de pantalla.
• Extractor de paleta: la herramienta analiza toda la imagen y devuelve estadísticamente los 5-8 colores dominantes. Úsalo cuando quieras un esquema de color inspirado en una imagen en conjunto, no en un punto específico.

Si lo que realmente quieres son los colores dominantes estadísticos, la herramienta Extractor de paleta de colores gratuito es la opción correcta. Las dos herramientas se complementan: extrae una paleta para entender la historia cromática general y luego usa este selector para tomar acentos específicos.

Cómo funciona

El navegador dibuja la imagen que subes en un elemento HTML <canvas>. Cuando haces clic, la herramienta llama a ctx.getImageData(x, y, 1, 1): un método de la API Canvas 2D que devuelve los valores RGBA de un único píxel como un array de cuatro elementos (rojo, verde, azul, alfa). Esos valores se formatean luego como HEX, RGB y HSL para mostrarlos. La lupa es un segundo lienzo que copia una pequeña región alrededor del cursor y la representa ampliada, para que puedas ver exactamente qué píxel estás a punto de seleccionar. Todo se ejecuta localmente en tu navegador; los bytes de la imagen nunca se transmiten.

Cuándo recurrir a un selector de píxel

• Coincidencia con la marca: toma el color exacto de un logotipo para usarlo en otra parte de un diseño o de un recurso de marketing.
• Fotografía de referencia: encuentra el tono exacto de cielo, el tono de piel o el color de un material natural a partir de una imagen de referencia.
• Control de calidad de diseño: verifica que una captura de pantalla coincide con el color de la especificación píxel a píxel.
• Ingeniería inversa de un sitio existente: toma el color realmente renderizado de un botón o un fondo cuando las DevTools no son una opción (una captura de pantalla de un colega, la interfaz de un competidor).
• Análisis de maquetas: extrae los colores exactos de un panel de inspiración o de una composición de diseño.
• Inspección de capturas de pantalla del móvil: las capturas de pantalla del teléfono se pueden examinar en el escritorio sin necesidad del dispositivo original.
• Auditorías de accesibilidad: lee el color realmente renderizado del texto o de los elementos de la interfaz (que puede diferir del CSS de origen debido al suavizado o al apilamiento de transparencias).

HEX, RGB, HSL: el mismo color, tres notaciones

La herramienta emite el mismo valor de color en tres formatos porque los distintos contextos prefieren distintos:

• HEX: #2b7190. Compacto, seis caracteres, el estándar de facto para el diseño web y la mayoría de los flujos de copiar y pegar. Fácil de soltar en CSS, en los selectores de color de las herramientas de diseño o en Markdown.
• RGB: rgb(43, 113, 144). La forma numérica subyacente. Útil cuando necesitas ajustar los canales de forma independiente o cuando trabajas en herramientas que esperan valores decimales (los valores arbitrarios de Tailwind, la generación programática).
• HSL: hsl(199, 54%, 37%). Tono / saturación / luminosidad, más fácil de razonar para las personas. Ajustar «el mismo tono, un poco más claro» es un número en HSL, pero un cambio multicanal en HEX o RGB.

La trampa del suavizado

Un selector perfecto a nivel de píxel lee exactamente el píxel que hay bajo tu cursor, pero en las imágenes reales, ese píxel puede no ser el color que crees. El suavizado mezcla los bordes de las letras, los iconos y las formas curvas con el fondo circundante para que se vean suaves. Así que hacer clic en el «borde» de un texto negro sobre blanco puede darte un gris en lugar de un negro puro. Dos hábitos prácticos para evitar la trampa:

• Selecciona desde el centro de las formas sólidas, no desde los bordes, donde se produce el suavizado.
• Usa la lupa para confirmar que estás en un píxel que es claramente el color de marca y no un píxel de borde mezclado.

La compresión JPEG y por qué importa la calidad de la referencia

La compresión JPEG introduce pequeñas distorsiones de color, sobre todo alrededor de los bordes de contraste y en las zonas planas de color sólido. Un color de marca «rojo puro» (#FF0000) exportado como JPEG y luego reimportado puede leerse como #FE0102 o similar: cercano, pero no idéntico al original. Para una coincidencia de marca exacta, prefiere:

• Imágenes de origen PNG o WebP sin pérdidas al seleccionar colores que importan.
• Archivos de origen vectoriales (SVG, PDF) renderizados con un zoom alto; los colores vectoriales son exactos.
• Directamente desde la herramienta de diseño (Figma, Sketch, Photoshop) cuando sea posible, en lugar de desde una captura de pantalla.

Alternativas de cuentagotas a nivel de navegador y a nivel del sistema operativo

Varias otras formas de seleccionar colores de tu pantalla:

• La API EyeDropper de CSS (new EyeDropper()). El estado de MDN: «Disponibilidad limitada; esta función no es Baseline porque no funciona en algunos de los navegadores más utilizados». En la práctica, es compatible con Chrome y Edge (desde Chrome 95), pero no con Firefox ni Safari. Devuelve un color como { sRGBHex }. Bueno cuando es compatible, pero el soporte irregular hace que un selector basado en Canvas siga ganándose su lugar para el uso multinavegador.
• Medidor de Color Digital de macOS: una aplicación integrada de macOS que lee cualquier píxel de la pantalla.
• El selector de color de PowerToys de Windows: la utilidad oficial PowerToys de Microsoft incluye un selector de píxel.
• Las DevTools del navegador: tanto Chrome como Firefox incluyen cuentagotas en su interfaz de selección de color al editar CSS en el Inspector.

Por qué un selector basado en la web sigue ganándose su lugar: funciona con las capturas de pantalla compartidas que llegan por Slack o por correo electrónico, no requiere instalar software, se ejecuta desde cualquier navegador en cualquier sistema operativo, y la imagen nunca sale de tu máquina.

Privacidad

Las imágenes a menudo llevan más que solo píxeles: los metadatos EXIF pueden incluir las coordenadas GPS de dónde se tomó la foto, el número de serie de la cámara y las marcas de tiempo de captura original. Las capturas de pantalla pueden contener una interfaz confidencial, texto en borrador o una marca aún no publicada. Los rostros son identificadores biométricos bajo las leyes de privacidad de varias jurisdicciones. Esta herramienta se ejecuta enteramente en tu navegador: la imagen va de tu sistema de archivos a un lienzo en memoria, se muestrea píxel a píxel, y lo único que sale de la página es el valor de color cuando lo copias. Las herramientas de selección de color en imágenes del lado del servidor suben la imagen completa; ese es el intercambio.

Errores frecuentes

1. Seleccionar en un borde suavizado. El color que obtienes es una mezcla de la forma y su fondo. Selecciona desde el centro de las zonas sólidas en su lugar.
2. Seleccionar de un JPEG muy comprimido. Los artefactos de compresión desplazan los colores de forma sutil. Usa una fuente de mayor calidad para una coincidencia de marca exacta.
3. Confundir el selector con un extractor de paleta. Si quieres los colores dominantes de una imagen en conjunto, quieres un extractor de paleta, no un selector de píxel.
4. Seleccionar de un PNG transparente sobre un fondo de página de color. Según cómo el lienzo componga la transparencia, puedes acabar muestreando el fondo de la página a través del canal alfa. Convierte la imagen a un fondo conocido primero si la precisión importa.
5. Fiarte del color de una captura de pantalla al pie de la letra. Algunos monitores aplican una calibración de color que desplaza el color renderizado respecto al original. El valor de píxel que lee el selector es lo que está codificado en la imagen, no necesariamente lo que mostró la pantalla de origen.
6. Seleccionar de una imagen de baja resolución y perder detalle. Una miniatura de 200×100 de un logotipo da menos píxeles distintos para elegir que el recurso original. Cuando sea posible, trabaja desde la fuente de mayor resolución.

Más preguntas frecuentes

¿Cuál es la diferencia entre esto y un generador de paletas de color?

Un selector lee el color de un píxel específico en el que haces clic. Un generador de paletas analiza toda la imagen y devuelve estadísticamente los colores más dominantes. Trabajos distintos: los selectores son precisos, los generadores de paletas son interpretativos. Para una paleta generada a partir de tu imagen, consulta Extractor de paleta de colores gratuito.

¿Por qué el color que selecciono difiere de la especificación de marca?

Dos razones comunes. Primero, la imagen de la que estás seleccionando puede haber sido comprimida (la recodificación JPEG desplaza los colores en unos pocos valores RGB). Segundo, el píxel en el que hiciste clic puede estar en un borde suavizado que se mezcla con el fondo. Para una coincidencia de marca exacta, usa una fuente vectorial o un PNG / WebP sin pérdidas de alta calidad y selecciona desde el centro de las zonas sólidas.

¿Puedo usar esto en el móvil?

Sí, tocar para seleccionar funciona en los dispositivos táctiles, aunque el comportamiento de la lupa y la precisión exacta a nivel de píxel pueden variar según el navegador móvil. Para un trabajo perfecto a nivel de píxel en el móvil, el objetivo táctil más grande hace difícil un selector anclado a una lupa; considera hacer la selección crítica de color en un navegador de escritorio cuando sea posible.

¿Se sube la imagen a algún sitio?

No. La imagen se carga en un elemento Canvas local mediante las API FileReader / de carga de imágenes del navegador; las lecturas de píxeles se hacen mediante getImageData; no se transmite nada a ningún servidor, ningún endpoint de analítica ve la imagen. Útil cuando la imagen contiene datos GPS de EXIF, rostros, capturas de pantalla de una interfaz confidencial o una marca aún no publicada que no quieres subir.

¿Por qué seleccionar un color de una imagen cuando el CSS muestra el valor?

El CSS muestra el color declarado, pero los píxeles renderizados pueden diferir: los degradados, el apilamiento de opacidad, el suavizado, los ajustes del modo oscuro, la gestión del perfil de color del navegador y la compresión de las capturas de pantalla provocan todos divergencias. Cuando necesitas saber lo que el píxel es realmente (para el control de calidad de diseño, la accesibilidad o la coincidencia con una referencia), leer el píxel renderizado directamente es la única respuesta fiable.

¿Por qué es útil la lupa?

Los píxeles individuales son diminutos: a la resolución de pantalla típica, los píxeles individuales están muy por debajo del tamaño que tu ojo puede distinguir sin ayuda. La lupa muestra una vista ampliada del área que hay bajo tu cursor para que puedas confirmar exactamente qué píxel vas a seleccionar. Especialmente valiosa en imágenes densas, texto suavizado o formas curvas donde los píxeles adyacentes difieren por pequeñas cantidades.