Extractor de Paleta de Colores

Qué hace esta herramienta

Los diseñadores “roban” paletas del mundo todo el tiempo — una puesta de sol, un cartel, un fotograma de película, una captura de la app de alguien. Esta herramienta lo automatiza. Suelta cualquier imagen y obtén sus colores dominantes como muestras, cada una etiquetada con HEX, RGB y HSL que puedes copiar con un clic. Elige 4 muestras para una paleta minimal de marca, 6 para una paleta de UI flexible, 8 para un set de ilustración o 12 para captar matices en fotografías. Además del copy individual, exportas la paleta entera en tres formatos: variables CSS listas para soltar en :root, un fragmento de config Tailwind para tu tailwind.config.js o JSON con HEX/RGB/HSL para cualquier otra herramienta. La imagen nunca sale de tu navegador. La reducimos en un canvas pequeño, muestreamos cada píxel y agrupamos colores cercanos — todo localmente. Eso significa que puedes extraer paletas de mockups internos, activos bajo NDA o fotos personales sin riesgo de privacidad. Sin subida, sin rastreo, sin copia temporal en ningún servidor.

Cómo usarlo

1. Suelta la imagen — Cualquier formato común vale — PNG, JPG, WebP, GIF. La paleta sale mejor con imágenes de regiones de color claras; imágenes muy ruidosas o con grano pueden producir muestras turbias.
2. Elige el número — 4 para una paleta enfática de marca. 6 es el punto dulce de UI. 8–12 captan matices más sutiles, útil como referencia de ilustración.
3. Copia muestras individuales — Pulsa cualquier muestra para copiar su HEX al portapapeles. El chip parpadea “¡Copiado!” para confirmarlo.
4. Exporta la paleta entera — Usa los botones de abajo para copiar como variables CSS, objeto colors de Tailwind o JSON. Pega directo en tu proyecto.

Cómo funciona la extracción

Reescalamos la imagen en un canvas 200×200 (muestreando la imagen completa, no las esquinas) y leemos cada píxel con getImageData. El RGB de cada píxel se redondea hacia abajo al múltiplo de 32 más próximo, generando 512 buckets posibles (8×8×8). Los buckets se cuentan, se ordenan por frecuencia y recorremos la lista eligiendo los colores más frecuentes que no estén demasiado cerca de uno ya seleccionado (distancia euclídea ≥ 38 en RGB) para que la paleta tenga variedad visual. La muestra mostrada es el RGB promedio de todos los píxeles del bucket, no el representante redondeado — eso da colores algo más precisos. Los píxeles totalmente o casi transparentes quedan fuera.

Eligiendo el número correcto

4 colores sirve para logos e identidades minimalistas — fuerza jerarquía. 6 colores es donde aterriza la mayoría de design systems: 1–2 de marca, 1 acento, neutros. 8 colores da acentos secundarios y neutros intermedios. 12 colores es para referencia de ilustración y fotografía donde quieres captar gradaciones sutiles. Por encima de 12, la paleta se vuelve ruido difícil de usar como restricción de diseño.

Preguntas frecuentes