Paleta de Color desde Imagen
Suelta una foto, captura o diseño y la herramienta muestrea píxeles, los agrupa en una grilla RGB gruesa y devuelve los buckets más representados promediados a un color representativo. Ajusta cuántos colores quieres (2–16). La paleta se muestra como barra proporcional (cada slice según su share) y como swatches individuales con HEX, RGB y el % de la imagen que cubren.
Suelta una imagen para extraer su paleta.
Cómo usar
- Suelta una imagen o haz clic para elegir.
- Ajusta el número de colores (2–16).
- Pulsa cualquier swatch para copiar su HEX, o Copiar todos para la paleta entera.
Preguntas frecuentes
- ¿Cómo funciona la extracción?
- La imagen se muestrea a una versión más chica (máx 400px en el lado mayor), luego se cuantiza RGB en grilla 8×8×8. Los buckets más grandes forman la paleta, cada uno promediado a un color representativo para que el swatch no se vea pixelado.
- ¿Por qué se mezclan colores similares?
- La cuantización 8×8×8 es gruesa a propósito — sin ella obtendrías un gradiente casi duplicado en vez de una paleta. Aumenta el conteo para distinciones más finas; disminúyelo para una paleta de marca más cerrada.
- ¿Se sube mi imagen?
- No. Canvas lee los píxeles localmente, los buckets se quedan en memoria y solo se mantienen las cadenas HEX finales.
- ¿Por qué los porcentajes no suman 100?
- Solo se muestran los top N buckets — la cola larga de colores menos frecuentes no se incluye. Los slices de la barra son proporcionales a los buckets visibles, no a la imagen completa.
Herramientas relacionadas
Simulador de Daltonismo
Ve cómo se ve tu imagen para personas con cada uno de los 8 tipos de deficiencia visual cromática (CVD).
Exportador de Tokens de Color
Define una paleta de colores una vez, exporta a CSS custom properties, configuración Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color o `colors.xml` de Android. Vista previa de swatches en vivo.
Generador de Paleta de Colores
Elige un color base, obtén armonías clásicas de rueda de color — complementario, split-complementario, triádico, tetrádico, cuadrado, análogo, monocromático.
Paleta de Colores Tailwind
La paleta por defecto completa de Tailwind CSS — 22 matices × 11 sombras, 50 a 950 — click para copiar como clase Tailwind, HEX o rgb().
Ordenar Colores
Pega una lista de colores hex y ordénalos por tono, saturación, claridad o brillo percibido — útil pra organizar una paleta de tokens de diseño.
Selector de Color de Imagen
Suelta una imagen y haz clic donde quieras para obtener el HEX / RGB / HSL exacto de ese píxel — junta una paleta mientras lo haces.