Colores dominantes en variables CSS

Importe una imagen y genere directamente un bloque de variables CSS (:root {}) con sus colores dominantes, listo para pegar en su hoja de estilo.

Ejemplo:
Arrastre y suelte una imagen aquí, o haga clic para explorar (25 MB máx.).

Cómo funciona

La herramienta analiza la distribución de los colores de la imagen mediante un histograma y conserva los tonos más frecuentes, ordenados del más dominante al menos frecuente. Cada color se formatea después como una variable CSS numerada (--color-1, --color-2, etc.) dentro de un bloque :root que se puede copiar directamente.

¿Puedo renombrar las variables generadas?

Sí, el nombre genérico --color-N es un punto de partida neutro: una vez pegado en su hoja de estilo, renombre cada variable según su uso real (por ejemplo --color-primary, --color-accent) para obtener un código más legible.

¿Cuántos colores debo extraer?

Para una identidad gráfica sencilla, suelen bastar de 3 a 5 colores (uno dominante, uno de acento y uno o dos tonos neutros). Un número mayor es útil si quiere capturar toda la riqueza de una foto con un uso más decorativo.

Procesamiento 100% local: la extracción de la paleta se realiza íntegramente en su navegador; su imagen nunca se envía a un servidor.