¿Qué colores dominan esta imagen? (paleta a partir de imagen)
Sube una foto / captura / mockup y la herramienta saca 4-12 colores dominantes mediante clustering k-means con inicialización k++ (más inteligente que puramente aleatorio).
Cada color muestra su porcentaje de los píxeles. Exporta como variables CSS, config Tailwind o JSON.
Todo en local: tu imagen no sale del navegador.
Perfecto para auditorías de marca, referencias de diseño y moodboards.
Cómo usarlo
- Sube una imagen: PNG, JPG, WebP, AVIF, HEIC. El archivo se reduce a máx. 200×200 píxeles (así k-means corre en ~50 ms en vez de 5 s sobre una imagen 4K).
- Elige el número de colores: 4 (solo los dominantes), 6 (equilibrado), 8 (detallado), 10 o 12 (complementarios).
- La barra superior muestra la paleta proporcionalmente: swatch más ancho = más píxeles. Pulsa para copiar el HEX.
- La tabla "Detalles" da cada color en 4 formatos (HEX, RGB, HSL, OKLCH).
- Tres bloques de exportación: variables CSS (soltar en `:root`), config Tailwind (soltar en `theme.extend.colors`) y JSON (para otras herramientas).
Cuándo es útil
Dónde se nota el extractor de paleta - escenarios típicos:
- Auditoría de marca: sube logo / mockup y comprueba si tus colores son consistentes.
- Inspiración de diseño: una foto bonita de atardecer → paleta de 6 colores para una landing.
- Ingeniería inversa: quieres recrear la paleta de otro: captura → extrae.
- Moodboard: junta imágenes de Pinterest y saca un color vibe compartido.
- Diseño web: una foto de producto como "color ancla" de toda la página.
- Diseño impreso: extracción desde fotografía para papel / packaging.
- Educación: nota cómo una "foto en blanco y azul" realmente contiene 30% gris, 25% azul, 20% blanco: perceptualmente distinto a como se ve.
Preguntas y respuestas
K-means = algoritmo de clustering: divide puntos (aquí: colores de píxel) en K grupos de modo que cada punto esté cerca de su centro. La inicialización k++ (David Arthur 2007) elige los centros iniciales ponderando por distancia: mejor que puramente aleatorio. 10 iteraciones de k-means dan una paleta estable (más raramente cambian algo visible).