Selector de color de imagen

Selector de color de imagen: extrae un color exacto y una paleta

Usa este selector de color de imagen para obtener valores exactos de una foto local, captura de pantalla, ilustración o captura de interfaz. Cada clic en la vista previa se corresponde con el píxel de origen exacto y devuelve sus valores HEX, RGB, HSL, alfa y coordenadas, por lo que funciona como un selector de color de imagen y un selector de color HEX de imagen para tareas de conversión de imagen a HEX, obtener el código HEX de una imagen y conseguir el código de color de una imagen sin necesidad de subirla a un servidor. El mismo flujo de trabajo sirve como selector de color para fotos, selector de color para imágenes, cuentagotas de color de imagen o selector de color de imagen.

Cómo obtener un código HEX de una imagen

1. Elige, arrastra o pega una imagen local, o empieza con la muestra incluida.
2. Haz clic o pulsa en un píxel, o introduce las coordenadas de origen exactas y usa la lupa para un control a nivel de píxel.
3. Copia el código HEX de la imagen, elige un color dominante de la paleta o exporta la paleta como variables de CSS o tokens de JSON.

Muestreo exacto de píxeles con coordenadas de origen

El lienzo escalado nunca cambia el sistema de coordenadas de origen. Los controles de puntero, táctiles, de teclado y de coordenadas numéricas toman muestras de la imagen de origen decodificada por el navegador. La lupa utiliza renderizado por vecino más cercano para que el píxel central permanezca visible, incluyendo los píxeles transparentes y parcialmente transparentes.

Crear una paleta de colores a partir de una imagen

El resultado de la paleta de colores de la imagen se extrae de una submuestra acotada en un 'worker' del navegador, de modo que las imágenes grandes no requieren un escaneo de color a resolución completa en el hilo principal de la interfaz. Seis colores dominantes deterministas se convierten en una paleta de colores a partir de la foto, una paleta de colores de imagen o el resultado de un extractor de paletas de imagen, un bloque de propiedades personalizadas de CSS o un archivo de 'tokens' JSON, lo que también convierte la herramienta en un práctico generador de esquemas de color a partir de archivos de fotos. Los píxeles totalmente transparentes se ignoran y el alfa parcial contribuye proporcionalmente.

Siguientes pasos: comprueba el contraste de esta paleta con los umbrales de la WCAG, o convierte un color de la muestra en una paleta completa con tintes, sombras y valores de Tailwind.

Salida en HEX, RGB, HSL, CSS y JSON

Un píxel muestreado se puede copiar como HEX o HEXA, RGB o RGBA, y HSL o HSLA. La paleta dominante se puede copiar o descargar como variables de CSS para una página web o como tokens de color JSON para un sistema de diseño. Los GIF animados usan el fotograma decodificado por el navegador, y los valores mostrados pueden diferir de los de otra aplicación cuando el manejo del perfil de color es diferente.

Procesamiento de imágenes local y privado

La decodificación de imágenes, el muestreo de píxeles, la ampliación, la extracción de paletas y la exportación ocurren localmente en este navegador. La herramienta no tiene campo para URL remotas y no envía contenido de la imagen, nombres de archivo, dimensiones, coordenadas, colores exactos, paletas o archivos generados a los servicios de analítica. Reemplazar una imagen libera la URL del objeto local anterior.

Preguntas frecuentes

¿Cómo selecciono un color de una imagen?

Abre, arrastra o pega una imagen, luego haz clic o pulsa en el píxel que quieras. La herramienta muestra la coordenada de origen exacta y los valores correspondientes de HEX, RGB, HSL y alfa.

¿Puedo obtener una paleta de colores de una foto?

Sí. Después de que la imagen se decodifique, el navegador extrae seis colores dominantes deterministas. Elige cualquier muestra, copia la paleta o descarga las variables de CSS o los tokens de JSON.

¿Se admiten los píxeles transparentes?

Sí. El muestreo exacto de píxeles conserva el alfa e identifica los píxeles completamente transparentes. La extracción de la paleta ignora los píxeles completamente transparentes y pondera los píxeles parcialmente transparentes según su valor alfa.

¿Se sube mi imagen?

No. Tu imagen se decodifica e inspecciona localmente en este navegador. No hay ninguna API de subida de imágenes ni obtención remota de URL, y los datos de la imagen se excluyen de las analíticas.

¿Por qué otra aplicación podría mostrar un color ligeramente diferente?

Los navegadores y las aplicaciones gráficas pueden gestionar los perfiles de color incrustados, los fotogramas de animación y el redondeo de la conversión de forma diferente. Esta herramienta informa de los píxeles producidos por el decodificador de tu navegador.