Extractor gratuito de colores de imágenes
Extractor de paletas de colores
El Extractor de paletas de colores obtiene los colores exactos de una imagen y los devuelve como una paleta de colores con códigos HEX, RGB, HSL, OKLCH y CMYK. Cada color muestra su proporción en la imagen, y la imagen nunca sale de tu navegador.
- Gratis, sin registro
- Las imágenes nunca salen de tu dispositivo
- Colores de píxel exactos
Suelta imágenes aquí
o pega con Ctrl+V. JPG, PNG, WebP, GIF, AVIF, SVG. Hasta 20 imágenes.
¿Cómo funciona el extractor de paletas de colores?
El extractor de paletas de colores lee los píxeles de tu imagen en tu navegador, agrupa los colores similares y devuelve los colores que mejor describen la imagen.
Agrega una imagen
Suelta, pega o elige hasta 20 imágenes en formato JPG, PNG, WebP, GIF, AVIF o SVG. Una captura de pantalla pegada también funciona.
Los colores se agrupan
El extractor agrupa los píxeles en OKLab, un espacio de color diseñado para coincidir con la percepción humana del color, y fusiona los colores que se ven iguales.
Ajusta la paleta
Elige de 2 a 20 colores, selecciona un modo y haz clic en la imagen para agregar cualquier píxel exacto. Arrastra un marcador para volver a elegir su color.
Copia o exporta
Copia los códigos HEX, comprueba el contraste o exporta la paleta a CSS, Tailwind, Adobe, Procreate, GIMP y más.
¿Qué devuelve el extractor para cada color?
Cada color extraído devuelve siete códigos de color, el nombre de color más cercano, su proporción en la imagen, su contraste con el blanco y el negro, y una escala de tintes y sombras de 50 a 950.
| Código | Ejemplo | Uso |
|---|---|---|
| HEX | #2A9D8F | Diseño web, CSS y la mayoría de las apps de diseño |
| RGB | rgb(42 157 143) | Pantallas, CSS y editores de imágenes |
| HSL | hsl(173 58% 39%) | Ajuste de la luminosidad y la saturación en CSS |
| HSB | hsb(173, 73%, 62%) | Selectores de color de Photoshop, Figma y Procreate |
| OKLCH | oklch(63% 0.101 183) | Edición perceptual del color en CSS moderno |
| CIE Lab | lab(58.4 -35.2 -2.3) | Medición de diferencias de color y flujos de trabajo de impresión |
| CMYK | 73, 0, 9, 38 | Estimaciones para impresión sin perfil de impresora |
¿Qué modo de extracción se adapta a tu imagen?
El modo de extracción decide qué colores entran en la paleta cuando una imagen contiene más colores que el tamaño de la paleta.
| Modo | Qué selecciona | Ideal para |
|---|---|---|
| Equilibrado (predeterminado) | Áreas de color grandes más acentos distintos, puntuados por proporción de píxeles y por distancia a los colores ya elegidos | Fotos, ilustraciones e imágenes de marca |
| Dominante | Los colores que cubren más píxeles | Medir qué colores llenan una imagen |
| Vibrante | La puntuación de Equilibrado ponderada por el croma, de modo que los acentos saturados quedan más arriba | Moodboards, fotos de producto y obras de arte |
El ajuste Píxel exacto devuelve un color que existe en la imagen. El ajuste Promedio devuelve el color medio de cada grupo. El control deslizante Fusionar similares define cuánto deben parecerse dos colores para contar como uno, medido como distancia ΔE_OK (0.03 por defecto).
¿Cuál es la precisión de los colores extraídos?
Los colores extraídos son valores de píxel exactos: el extractor toma muestras de píxeles reales sin mezclarlos, así que cada código HEX de una paleta en modo Píxel exacto aparece en tu imagen.
- Agrupación perceptual. Los colores se comparan en OKLab, donde distancias iguales se perciben como diferencias iguales. La distancia RGB exagera algunas diferencias de color y subestima otras.
- Resultados estables. El agrupamiento usa una semilla fija, así que la misma imagen con los mismos ajustes siempre devuelve la misma paleta.
- Proporciones reales. Cada píxel se asigna a su color de paleta más cercano, así que las proporciones suman el 100%.
- Transparencia respetada. Los píxeles con menos del 50% de opacidad no cuentan, así que un PNG transparente muestra solo sus colores visibles.
La guía Cómo funciona la extracción de colores (en inglés) compara este método con el corte medio (median cut), la cuantización por octree y el k-means simple.
¿De qué fuentes puedes extraer colores?
El Extractor de paletas de colores lee cuatro tipos de fuente, cada una con su propia herramienta y sus propios ajustes.
Imágenes
Fotos, ilustraciones, capturas de pantalla y obras de arte. Varias imágenes producen una paleta combinada en la que cada imagen cuenta por igual.
Logotipos
El Extractor de colores de logotipos devuelve los colores exactos del logotipo, quita el fondo e ignora los píxeles mezclados de los bordes.
Sitios web
El Extractor de colores de sitios web lee el CSS de un sitio y devuelve sus colores de marca, texto, fondo y borde a partir de una URL.
Píxeles individuales
El Selector de color de imagen devuelve el código HEX exacto de cualquier píxel en el que hagas clic, con una lupa para mayor precisión.
¿Qué formatos de exportación puedes descargar?
El extractor exporta una paleta en 11 formatos, todos generados en tu navegador.
| Formato | Archivo | Se abre en |
|---|---|---|
| Variables CSS | .css | Cualquier hoja de estilo de un sitio web |
| Tailwind v4 y v3 | Bloque @theme, tailwind.config.js | Proyectos de Tailwind CSS |
| SCSS | .scss | Proyectos de Sass |
| Tokens de diseño | .tokens.json | Herramientas de W3C Design Tokens y plugins de Figma |
| Adobe Swatch Exchange | .ase | Photoshop, Illustrator e InDesign |
| Procreate | .swatches | Procreate en iPad |
| Paleta de GIMP | .gpl | GIMP, Inkscape y Krita |
| SVG | .svg | Figma, Sketch e Illustrator |
| Tarjeta de paleta PNG | .png | Presentaciones, moodboards y publicaciones en redes sociales |
| Lista HEX | .txt | Cualquier app |
Los formatos de código pueden incluir una escala de tintes y sombras de 50 a 950 para cada color, construida en OKLCH alrededor del valor extraído.
¿Quién usa un extractor de paletas de colores?
Diseñadores
Obtén una paleta de una foto de moodboard o de una imagen de referencia y envíala a Figma, a las apps de Adobe o a Procreate como muestras.
Desarrolladores
Convierte una captura de un diseño en variables CSS o en un tema de Tailwind con una escala completa de tintes y sombras.
Propietarios de negocios
Encuentra los códigos HEX exactos de un logotipo o de una foto de producto para mantener coherentes un sitio web, una tienda online y las publicaciones en redes sociales.
Artistas e ilustradores
Estudia las proporciones de color de una pintura o de una foto antes de empezar una obra nueva.
Compradores de impresión
Reúne valores de pantalla exactos y estimaciones CMYK para darle indicaciones a una imprenta antes de una prueba.
Revisores de accesibilidad
Comprueba cada par de colores de una paleta frente a los umbrales de WCAG 2. La guía Contraste WCAG en una paleta (en inglés) explica las reglas.
¿Se suben tus imágenes?
No. Las imágenes se decodifican y analizan dentro de tu navegador, y los archivos nunca llegan a un servidor. El sitio no guarda imágenes ni paletas.
Dos funciones contactan con el servidor: cargar una imagen desde una dirección web y leer el código de un sitio web. Ambas obtienen el archivo público por ti y no guardan ninguna copia. La política de privacidad (en inglés) enumera todos los datos que maneja el sitio.
Preguntas frecuentes sobre el extractor de paletas de colores
¿El extractor de paletas de colores es gratis?
Sí. Todas las funciones y todos los formatos de exportación son gratis, sin cuenta, sin marca de agua y sin límite de uso.
¿Cuántos colores puede tener una paleta?
Una paleta tiene de 2 a 20 colores, que se ajustan con el control deslizante Colores. La paleta predeterminada tiene 6 colores.
¿Por qué otra herramienta me da colores diferentes?
Las herramientas difieren en el espacio de color, el algoritmo de agrupamiento, el muestreo y el valor de la muestra. Este extractor agrupa los colores en OKLab y devuelve valores de píxel reales por defecto, mientras que muchas herramientas promedian los colores en RGB.
¿Puedo extraer una sola paleta de varias imágenes?
Sí. Agrega hasta 20 imágenes y el extractor crea una paleta combinada en la que cada imagen tiene el mismo peso, además de una paleta pequeña para cada imagen.
¿El extractor funciona en el teléfono?
Sí. El extractor funciona en navegadores móviles, acepta fotos de la galería y elige colores con un toque.
¿Qué formatos de imagen son compatibles?
Los archivos JPG, PNG, WebP, GIF, AVIF, BMP y SVG funcionan en todos los navegadores actuales. Las fotos HEIC solo se abren en Safari, así que los demás navegadores necesitan una copia en JPG o PNG.