polyshExtractor de paletas de colores
Saca de cualquier imagen una paleta de colores lista para usar, con códigos HEX.
- Funciona en tu navegador
- Sin subidas
- Sin cuenta
Cargando tu herramienta del navegador…
Qué hace Extractor de paletas de colores
En lugar de elegir los colores píxel a píxel, el extractor agrupa todos los píxeles de la imagen en el número de colores que elijas, de 3 a 12, y los ordena del más al menos frecuente. Cada tarjeta muestra el código HEX, los valores RGB y el porcentaje de la imagen que ocupa.
Dos botones de copia facilitan reutilizar el resultado: “Copiar todos los HEX” da una lista separada por comas y “Copiar como CSS” da las variables --color-1 a --color-n dentro de un bloque :root. Activa “Ignorar blanco, negro y gris” para saltarte los fondos de página y el texto y que se vean los colores de acento. La misma imagen siempre da la misma paleta.
Ejemplo
Eliges
Una imagen de 1000 × 200 px con cuatro franjas planas: #3157D5 (40 %), #ED6C50 (30 %), #2BAE84 (20 %), #16181D (10 %) Número de colores: 4
Copiar como CSS da
:root {
--color-1: #3157D5;
--color-2: #ED6C50;
--color-3: #2BAE84;
--color-4: #16181D;
}Con cuatro colores planos y cuatro huecos, cada franja se convierte en una muestra, ordenada según su parte, de aproximadamente el 40 %, 30 %, 20 % y 10 %.
Cómo usar Extractor de paletas de colores
- Usa “Elegir archivo” o pega la imagen.
- Ajusta el “Número de colores” y activa “Ignorar blanco, negro y gris” para capturas de interfaces.
- Haz clic en “Copiar todos los HEX”, “Copiar como CSS” o “Copiar” en un solo color.
Conviene saber
- Los colores de la paleta son promedios de grupos de píxeles, así que puede que un color no exista exactamente en la imagen. Usa el Selector de color para capturas de pantalla para un píxel exacto.
- Los acentos pequeños, como un enlace fino del color de la marca, pueden quedar absorbidos en un grupo mayor. Sube el “Número de colores” para separarlos.
- Los píxeles transparentes y casi transparentes se ignoran, así que el fondo de un logotipo no aparece en su paleta.
Preguntas sobre Extractor de paletas de colores
¿Cómo saco una paleta de colores de una imagen?
Carga la imagen y la paleta aparece debajo, ordenada según cuánto de la imagen ocupa cada color. Cambia el “Número de colores” para obtener más o menos muestras y copia los códigos HEX o las variables CSS.
¿Cuántos colores debe tener una paleta?
Cinco o seis es lo típico para una paleta de interfaz o de marca: un fondo, una superficie, el texto, un color principal y uno o dos acentos. Usa de 8 a 12 para fotos o ilustraciones en las que quieras toda la gama.
¿Por qué mi paleta muestra sobre todo blanco y gris?
Las capturas de apps son sobre todo fondo y texto. Activa “Ignorar blanco, negro y gris” para saltarte los píxeles casi blancos, casi negros y grises, y que los colores de marca y de acento suban arriba.