¿Las imágenes subidas se guardan en un servidor?

No, no se guardan. Todo el procesamiento de imágenes y los algoritmos de extracción de color se ejecutan utilizando la API Canvas en tu navegador (entorno local). Los datos de la imagen nunca se envían a servidores externos a través de Internet, por lo que puedes usarlo de forma segura incluso para imágenes altamente sensibles.

¿Qué formatos de imagen son compatibles?

Es compatible con los formatos de imagen web más comunes: JPG, PNG, GIF, WebP y SVG. El límite de tamaño de archivo es de 10 MB, lo cual es suficiente para la mayoría de los casos de uso.

¿Qué tan exactos son los colores extraídos?

Como lee los datos de los píxeles directamente en el Canvas, obtienes colores 100% exactos (en el espacio sRGB) a nivel de píxel. Además, mediante el uso de las teclas de flecha de tu teclado después de hacer clic, puedes seleccionar y extraer con precisión incluso sutiles diferencias de color en píxeles adyacentes.

¿Se pueden utilizar los colores CMYK directamente para la impresión?

Los valores CMYK proporcionados por esta herramienta son cifras teóricas basadas en cálculos aproximados de los valores RGB. Para la impresión profesional (DTP), dependen de los perfiles de color, por lo que se recomienda usarlos solo como valores de referencia y realizar las comprobaciones finales con un software dedicado como Illustrator.

🎨

image color picker,

Selector de Color de Imagen

Extrae colores exactos de imágenes al instante.
Extrae automáticamente paletas de colores dominantes y ajústalas con el teclado.

🔍

Extracción perfecta de píxeles

Obtén los colores de los píxeles con precisión mediante una lupa y las teclas de flecha

🎨

Análisis de colores dominantes

Extrae automáticamente los 8 colores representativos de la imagen

📋

5 Formatos de Color

Soporta HEX, RGB, HSL, CMYK y el moderno OKLCH

🖼️

Arrastra y suelta una imagen

o haz clic para seleccionar / Ctrl+V para pegar

JPG PNG GIF WebP SVG Máx. 10MB

* Las imágenes se procesan localmente en tu navegador y nunca se envían a un servidor.

✅ ¡Copiado!

Generador de CSS View Transition

🎨

Conversor de Color

↔️

Generador de CSS Clamp

about,

Acerca del Selector de Color

El Selector de Color de Imagen es una herramienta en línea gratuita que te permite extraer información de color específica de imágenes, fotos e ilustraciones, proporcionándote códigos de color como HEX, RGB, HSL, CMYK y OKLCH. Con un procesamiento avanzado del lado del cliente utilizando la API Canvas del navegador, las imágenes subidas nunca se envían a servidores externos, lo que garantiza un funcionamiento seguro y rápido.

Es muy útil para diseñadores web y desarrolladores front-end para investigar los colores clave de diseños de referencia o crear paletas de colores que coincidan con el ambiente de las fotos. Además de la extracción de color con precisión de píxel mediante el cuentagotas, también cuenta con una función de auto-extracción para analizar los colores dominantes de toda la imagen.

how to,

Cómo usar

STEP 1

Sube una imagen

Arrastra y suelta la imagen de la que deseas extraer colores en el área superior, o haz clic para seleccionar un archivo. También permite pegar desde el portapapeles (Ctrl+V / Cmd+V). La carga es instantánea y se procesa en tu navegador.

STEP 2

Elige un color específico con el cuentagotas

Selecciona la pestaña "Cuentagotas" y haz clic en el área de la imagen que deseas comprobar. Aparecerá una lupa que te permitirá apuntar con precisión a píxeles finos. Después de hacer clic, también puedes realizar ajustes precisos píxel a píxel usando las teclas de flecha (↑↓←→) de tu teclado.

STEP 3

Extrae automáticamente los colores dominantes

Cambia a la pestaña "Extracción Automática" para analizar automáticamente y generar una paleta de los 8 colores representativos principales (colores dominantes) más utilizados en la imagen. Al hacer clic en "Copiar Vars CSS" desde esta paleta, puedes pegarlos y usarlos directamente en la hoja de estilos de tu proyecto.

glossary,

Glosario

HEX (Código de Color Hexadecimal): El método de representación de color más utilizado en el diseño web. Representa los valores de rojo, verde y azul en formato hexadecimal de 00 a FF, expresado como una cadena de 6 caracteres como #FF5733. Es esencial para especificar colores en HTML y CSS.
OKLCH: Un moderno método de definición de color CSS que utiliza un espacio de color perceptualmente uniforme. Compuesto por Lightness, Chroma y Hue, se adapta mejor a las características visuales humanas que el tradicional HSL, ofreciendo la ventaja de crear fácilmente paletas de colores con relaciones de contraste consistentes.
Color Dominante: El color principal que más prevalece en una imagen o diseño y determina su impresión general. Esta herramienta utiliza el algoritmo Median Cut para analizar la imagen y extraer automáticamente los 8 colores de mayor impacto visual.
Algoritmo Median Cut: Un tipo de algoritmo utilizado frecuentemente para la cuantificación del color en imágenes. Genera eficientemente una paleta de colores representativa al colocar todos los píxeles en un espacio de color RGB 3D y dividir repetidamente el espacio a lo largo del eje de color con la mayor variación.
Paleta de Colores: Una combinación de colores utilizados en un diseño. Es un conjunto de colores que definen un color base, un color de acento, etc., para lograr un diseño cohesivo y unificado.

faq,

Preguntas frecuentes

Q.¿Las imágenes subidas se guardan en un servidor?: No, no se guardan. Todo el procesamiento de imágenes y los algoritmos de extracción de color se ejecutan utilizando la API Canvas en tu navegador (entorno local). Los datos de la imagen nunca se envían a servidores externos a través de Internet, por lo que puedes usarlo de forma segura incluso para imágenes altamente sensibles.
Q.¿Qué formatos de imagen son compatibles?: Es compatible con los formatos de imagen web más comunes: JPG, PNG, GIF, WebP y SVG. El límite de tamaño de archivo es de 10 MB, lo cual es suficiente para la mayoría de los casos de uso.
Q.¿Qué tan exactos son los colores extraídos?: Como lee los datos de los píxeles directamente en el Canvas, obtienes colores 100% exactos (en el espacio sRGB) a nivel de píxel. Además, mediante el uso de las teclas de flecha de tu teclado después de hacer clic, puedes seleccionar y extraer con precisión incluso sutiles diferencias de color en píxeles adyacentes.
Q.¿Se pueden utilizar los colores CMYK directamente para la impresión?: Los valores CMYK proporcionados por esta herramienta son cifras teóricas basadas en cálculos aproximados de los valores RGB. Para la impresión profesional (DTP), dependen de los perfiles de color, por lo que se recomienda usarlos solo como valores de referencia y realizar las comprobaciones finales con un software dedicado como Illustrator.

use cases,

Casos de uso

🎨

Diseño Web y Codificación

Extrae colores de marca exactos (HEX/RGB) de capturas de pantalla de sitios de referencia o imágenes de logotipos proporcionadas por los clientes, y aplícalos a CSS. Usando la función de auto-extracción, puedes identificar instantáneamente candidatos para colores base, principales y de acento.

🖼️

Esquemas de Color UI para Fotos

Extrae colores dominantes de imágenes en miniatura de artículos o fotos en el hero header. Al establecer esos colores como fondo para texto o botones, puedes lograr hermosos diseños de página donde las imágenes y la interfaz de usuario armonicen.

✨

Crear Paletas de Colores para Ilustraciones

Extrae combinaciones de colores llamativas de obras de ilustradores favoritos o hermosas fotos de paisajes. Copia los colores en masa como variables CSS y utilízalos como ideas de esquemas de color para tus propias obras originales.

📸

Colores de Referencia para Retoque de Fotos

Al editar fotos, obtén con precisión la información de color de áreas específicas, como tonos de piel o el color del cielo, a nivel de píxel. Utilízalos como base para el ajuste del balance de blancos y la corrección de color.