¿Qué formatos de imagen puedo subir?

Soporta archivos de imagen en formato PNG, JPEG, WebP, GIF y AVIF con un límite de tamaño de hasta 10 MB.

¿Cómo funciona la generación de escalas de tonos?

Mantiene el tono y la saturación del color base y varía gradualmente la luminosidad para crear una rampa de claro a oscuro (estilo Tailwind 50-950 o Material 100-900).

¿Qué diferencia hay entre la nomenclatura numérica y la semántica?

La numérica nombra los colores secuencialmente (color1, color2), mientras que la semántica asigna roles comunes de diseño como primary, secondary o accent.

¿Puedo exportar a varios formatos de código a la vez?

Sí, al seleccionar la opción de formato 'Todos los formatos', la herramienta genera simultáneamente variables CSS, SCSS, configuración de Tailwind y tokens JSON.

¿Qué hace el algoritmo k-means en esta herramienta?

Agrupa matemáticamente los píxeles de la imagen por similitud cromática para identificar con precisión los colores más representativos y su porcentaje de presencia.

Elysia Tools

Navegación

Design

De paleta de imagen a design tokens

Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos

Detalles

Qué te ayuda a hacer esta herramienta

Sube una imagen y la herramienta:

La reduce y aplica k-means para hallar los colores dominantes (3 / 5 / 8 / 12 a elegir).
Nombra cada color (numérico color1… o semántico primary/accent…) e indica su % de píxeles.
Opcionalmente genera una escala de tonos (Tailwind 50–950 o Material 100–900) manteniendo tono y saturación y variando la luminosidad.
Serializa el resultado en CSS variables, SCSS, configuración Tailwind, tokens JSON o los cuatro a la vez.

Elige un prefijo y un estilo de nombres, copia el código generado y tu sistema de diseño consumirá la paleta al instante.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

1 ejemplos

Extraer una paleta de 5 colores con escala Tailwind

Sube una imagen, extrae 5 colores dominantes, genera escala 50–950 y exporta como variables CSS con prefijo brand.

<div>5 swatches with population %, a base+scale preview row each, and a :root{} CSS-variables block ready to paste.</div>

Entradas

Completa los campos necesarios y ejecuta la herramienta.

6 opciones

ArchivosSube los archivos fuente para este flujo.1

Imagen fuentefileObligatorio

Tamaño máximo por archivo: 10 MBTipos admitidos: image/png, image/jpeg, image/webp, image/gif, image/avif

ContenidoPega o escribe los valores principales.1

Prefijo de tokentextOpcional

AjustesAjusta formatos, rangos, números y modos.4

Tamaño de paletaselectOpcionalEscala de tonosselectOpcionalFormato de salidaselectOpcionalEstilo de nombresselectOpcional

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

De paleta de imagen a design tokens

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Extracción de paleta corporativa para Tailwind

2. Generación de variables CSS para un prototipo rápido

Preguntas frecuentes

Ejemplos de Procesamiento de Imágenes Web Python

Ejemplos de Procesamiento de Imágenes Web TypeScript

Ejemplos de Procesamiento de Imágenes Android Java

Ejemplos de Procesamiento de Imágenes Android Kotlin

Generador de Data URI

Conversión de Imágenes en Lote

Recorte de Imágenes en Lote

Redimensionador de Imágenes

Herramientas de conversion de formatos de imagen y exportacion animada

Herramientas de intercambio JSON y traduccion de formatos

Herramientas de inspeccion, diff y transformacion JSON

Herramientas de limpieza, acabado y preparacion por lotes de imagenes