Selector de colores de imagen
Extrae los colores dominantes de cualquier imagen, con valores HEX y RGB y la proporción de cada color en la imagen. Se procesa en tu dispositivo; la imagen nunca se sube.
o suéltalo aquí
JPG, PNG, WebP o GIF. También puedes pegar una imagen.
Colores extraídos
Cómo funciona
Este selector de colores de imagen analiza una imagen cargada completamente en tu navegador y devuelve los colores dominantes como valores HEX y RGB con la cobertura aproximada de cada color en la imagen, para que puedas obtener rápidamente una paleta de marca o esquema de colores de cualquier imagen.
- Elegir una imagen
Haz clic para explorar, arrastra un archivo o pega uno desde tu portapapeles.
- Define cuántos colores
De 3 a 10 muestras, clasificadas según la parte de la imagen que cubren.
- Copiar un color
Haz clic en cualquier muestra para copiar su valor HEX, o copia todo el conjunto como variables CSS.
Cómo se seleccionan los colores
La imagen se dibuja en un lienzo pequeño y los valores de rojo, verde y azul de cada píxel se redondean en grupos de 16 unidades, de modo que los tonos casi idénticos cuentan como un solo color. Los grupos se clasifican según la cantidad de píxeles que cubren, y se omite cualquier candidato cuyo color sea demasiado similar a uno ya seleccionado, de modo que el resultado es una variedad de colores genuinamente distintos en lugar de varios casi duplicados.
Se ejecuta completamente en tu navegador
La imagen se lee con la API FileReader y se analiza con el método getImageData de la API Canvas. No se envían datos de la imagen a ningún servidor, lo que hace que esta herramienta sea segura para recursos de marca confidenciales o fotos privadas. Las imágenes de origen cruzado cargadas por URL no se pueden analizar porque los navegadores bloquean la lectura de datos de píxeles de una imagen sin permiso CORS; descarga primero la imagen y sube el archivo local en su lugar.
Preguntas frecuentes
¿Cómo extraigo colores de una imagen para crear una paleta de colores?
Arrastra o sube cualquier archivo de imagen. La herramienta muestrea los datos de píxel de la imagen usando un canvas HTML, agrupa los colores similares y muestra los tonos dominantes como muestras con su código HEX, valor RGB y porcentaje de cobertura aproximado. Haz clic en cualquier muestra para copiar su valor HEX al portapapeles o copia todo el conjunto como propiedades personalizadas de CSS.
¿Se sube mi imagen a un servidor al extraer los colores?
No. La extracción de colores se ejecuta completamente en tu navegador usando el método getImageData de la API Canvas. La imagen se carga en un canvas oculto, los datos de píxel se leen localmente y los colores agrupados se calculan en JavaScript. No se envía ningún dato de la imagen a servidores externos, lo que resulta seguro para recursos de marca confidenciales o fotos privadas.
¿Qué formatos de imagen puedo usar con el extractor de colores?
La herramienta acepta cualquier formato de imagen que tu navegador pueda decodificar, generalmente JPEG, PNG, WebP, GIF y BMP. El archivo se lee con la API FileReader y se renderiza en un canvas, por lo que el límite es la compatibilidad nativa de imágenes de tu navegador y no una restricción de esta herramienta.
¿Qué tan precisa es la extracción de colores? ¿Encontrará todos los tonos?
El extractor identifica los grupos de colores más dominantes, no cada píxel único. Las imágenes con degradados suaves, como cielos azules o tonos de piel, pueden resumirse en unos pocos valores HEX representativos en lugar de incluir todos los tonos intermedios. Aumenta el control deslizante de colores a extraer para obtener un desglose más detallado de una imagen compleja.
¿Cuál es una limitación de la extracción de colores en el navegador?
Las imágenes de origen cruzado no se pueden analizar debido a las restricciones de seguridad del lienzo del navegador. Si vinculas una imagen alojada en otro dominio sin encabezados CORS, la lectura de sus datos de píxeles genera un error de seguridad. Descarga primero la imagen y sube el archivo local en lugar de proporcionar una URL remota.