Extractor de paletas
Suelta una foto, un logotipo o una captura de pantalla y obtén sus colores dominantes en forma de paleta, con códigos HEX, proporciones y exportación a CSS o Tailwind.
- Cualquier imagen
- 2–12 colores
- Exportación CSS
- Sin subir nada
Suelta una imagen aquí
o
JPG, PNG, WebP, GIF, AVIF, SVG o BMP
También puedes pegar una imagen con Ctrl + V
Tu imagen se analiza en tu dispositivo y nunca se sube.
Tu imagen
Haz clic en cualquier punto de la imagen para añadir ese color exacto a la paleta.
Exportar
Cómo extraer los colores de una imagen
La paleta aparece en cuanto se abre la imagen.
- 1
Añade una imagen
Suéltala en la página, elige un archivo o pégala desde el portapapeles. Funcionan JPG, PNG, WebP, GIF, AVIF y SVG.
- 2
Ajusta la paleta
Define el número de colores, el orden y si debe ignorarse un fondo blanco o negro. Haz clic en la imagen para añadir un color concreto.
- 3
Copia o exporta
Haz clic en un código para copiarlo, o exporta la paleta entera como variables CSS, configuración de Tailwind, JSON o una imagen.
Los colores que la gente ve de verdad
Agrupados en un espacio de color perceptual.
Agrupación perceptual
Los píxeles se agrupan en OKLab, donde las distancias se corresponden con la visión humana, para que los acentos pequeños pero llamativos no queden sepultados bajo grandes zonas apagadas.
Proporciones
Cada color indica qué parte de la imagen ocupa, y las franjas pueden dibujarse a escala.
Añade colores exactos
¿Echas en falta el color de un detalle? Haz clic sobre él en la imagen y se suma a la paleta.
Fondo ignorado
Deja fuera el blanco o el negro puros: muy útil para logotipos y fotos de producto sobre fondo liso.
Tres órdenes
Primero los más dominantes, siguiendo el círculo cromático o de claro a oscuro.
Exportación lista para diseñar
Propiedades personalizadas de CSS, SCSS, Tailwind, JSON, CSV, paleta de GIMP, SVG o PNG.
Privado por diseño
Todo funciona en tu navegador. Lo que escribes o abres no se envía a ningún servidor.
Gratis y sin registro
Sin cuenta, sin límites y sin marca de agua: en el móvil, la tableta o el ordenador.
Cómo sacar una buena paleta de una imagen
Una foto contiene decenas de miles de colores ligeramente distintos. Extraer una paleta consiste en agrupar los píxeles parecidos y devolver un representante por grupo. Esta herramienta divide primero el rango de colores en cajas (corte por la mediana) y después afina los grupos con el algoritmo k-means en el espacio de color OKLab, de modo que «parecido» signifique parecido a la vista y no parecido en cifras RGB.
El número de colores cambia el carácter del resultado. Tres o cuatro colores recogen el ambiente general, lo que va bien para una marca o el tema de una presentación. De seis a ocho añaden los acentos. Por encima de diez empiezan a salir colores casi duplicados. Si un detalle pequeño pero importante, como una flor roja en un prado verde, no entra en la paleta, añádelo tú mismo haciendo clic sobre él en la imagen.
Los colores extraídos son un punto de partida, no un diseño terminado. Las fotos rara vez contienen un blanco puro o un tono oscuro apto para texto, así que añade neutros y comprueba el contraste antes de usar dos colores extraídos como texto y fondo. Por la misma razón, el color más dominante de una imagen, que suele ser el cielo, una pared o una sombra, funciona mejor como fondo que como acento.
Cuántos colores extraer
| Colores | Resultado | Va bien para |
|---|---|---|
| 2–3 | El ambiente general | Efectos duotono, colores de marca sencillos |
| 4–6 | Colores principales más un acento | Temas para sitios web y presentaciones |
| 7–9 | Matices finos | Paletas de ilustración, interiorismo y moda |
| 10–12 | Casi todos los tonos visibles | Análisis, pixel art, láminas de referencia |
Consejos
- Lee el color exacto de un solo píxel con el Selector de píxeles.
- Afina y amplía los colores extraídos en el Generador de paletas.
- Prueba los pares de texto y fondo con el Comprobador de contraste.
- Si la foto es muy grande, redúcela antes con el Compresor de imágenes: la paleta no cambia.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿Se suben mis imágenes?
No. Tu navegador abre y analiza la imagen en tu propio dispositivo. Nunca se envía a un servidor.
¿Qué formatos de imagen se admiten?
Todos los que tu navegador sabe mostrar: JPG, PNG, WebP, GIF, AVIF, BMP y SVG. En la mayoría de los navegadores, las fotos HEIC de un iPhone hay que convertirlas antes a JPG.
¿Cómo se determinan los colores dominantes?
Se toma una muestra de la imagen, los píxeles parecidos se agrupan en el espacio de color perceptual OKLab y la media de cada grupo se convierte en un color de la paleta. El porcentaje es la proporción de píxeles de ese grupo.
¿Por qué falta en la paleta un color que sí veo?
Las zonas pequeñas pueden quedar absorbidas por un grupo mayor y parecido. Aumenta el número de colores o haz clic en ese punto de la imagen para añadir su color exacto.
¿Puedo obtener los colores de un logotipo sin el fondo blanco?
Sí. Activa «Ignorar el blanco» (o «Ignorar el negro»); los píxeles transparentes se ignoran siempre.
¿El resultado es siempre el mismo?
Sí. El método es determinista: la misma imagen con los mismos ajustes da siempre la misma paleta.
Más herramientas gratuitas para desarrolladores
Codifica, formatea, prueba, convierte y genera: pequeñas herramientas que funcionan en tu navegador y dejan tus datos en tu dispositivo.