# 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 > Página canónica: https://elysiatools.com/es/tools/image-to-design-tokens - **Categoría:** Design - **Palabras clave:** paleta, design tokens, color, css, tailwind ## Descripción general Sube una imagen y la herramienta: 1. La reduce y aplica **k-means** para hallar los colores dominantes (3 / 5 / 8 / 12 a elegir). 2. Nombra cada color (numérico `color1`… o semántico `primary`/`accent`…) e indica su % de píxeles. 3. Opcionalmente genera una **escala de tonos** (Tailwind 50–950 o Material 100–900) manteniendo tono y saturación y variando la luminosidad. 4. 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. ## Entradas - **Imagen fuente** (file): PNG, JPG, WebP… - **Tamaño de paleta** (select) - **Escala de tonos** (select) - **Formato de salida** (select) - **Prefijo de token** (text): e.g. brand, app, theme - **Estilo de nombres** (select) ## Cuándo usarlo - Cuando necesitas extraer la paleta de colores de un logotipo o imagen de marca para iniciar un nuevo sistema de diseño. - Al crear temas visuales o esquemas de color basados en fotografías inspiradoras para interfaces web. - Cuando quieres automatizar la generación de escalas de tonos (50-950 o 100-900) sin calcular manualmente la luminosidad de cada color. ## Cómo funciona - Sube una imagen en formato PNG, JPG, WebP, GIF o AVIF para que el algoritmo reduzca su tamaño y analice sus píxeles. - El algoritmo k-means agrupa los colores y extrae los tonos más dominantes según el tamaño de paleta seleccionado (3, 5, 8 o 12 colores). - La herramienta calcula opcionalmente una escala de tonos manteniendo el matiz y la saturación mientras varía la luminosidad. - Se genera el código formateado en variables CSS, SCSS, configuración de Tailwind o tokens JSON con el prefijo y estilo de nomenclatura elegidos. ## Casos de uso - Creación de sistemas de diseño web a partir de una imagen de referencia o moodboard de cliente. - Generación rápida de archivos de configuración de Tailwind CSS (tailwind.config.js) con paletas de colores personalizadas. - Documentación de tokens de diseño en formato JSON para su integración en herramientas de desarrollo multiplataforma. ## Preguntas frecuentes ### ¿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. ## Herramientas relacionadas - [Generador de Data URI](https://elysiatools.com/es/tools/data-uri-generator): Convierte archivos en Data URIs (Base64 o porcentaje-codificado) para incrustar imágenes, fuentes y recursos directamente en HTML, CSS o Markdown - [Conversión de Imágenes en Lote](https://elysiatools.com/es/tools/batch-convert): Convertir múltiples imágenes a diferentes formatos con configuración de calidad - [Recorte de Imágenes en Lote](https://elysiatools.com/es/tools/image-batch-crop): Recortar múltiples imágenes a dimensiones específicas o relación de aspecto con posicionamiento personalizado. Retorna imágenes recortadas como descarga ZIP. - [Redimensionador de Imágenes](https://elysiatools.com/es/tools/image-resize): Herramienta profesional de redimensionamiento de imágenes con múltiples métodos, preservación de relación de aspecto y conversión de formato, incluida la funcionalidad de desenfoque de fondo, soportando GIF/Animated WebP/APNG y JPEG/PNG/WEBP. - [Conversor de profundidad de imagen a PNG](https://elysiatools.com/es/tools/image-to-bit-depth-png): Convierte imágenes a profundidades PNG monocromas, indexadas, grises, RGB o RGBA exactas con salida verificada. - [Convertidor por lotes de imagenes a WebP](https://elysiatools.com/es/tools/image-to-webp-batch-converter): Convierte imagenes o imagenes dentro de un ZIP a WebP y devuelve un ZIP - [Hoja de Contacto PDF](https://elysiatools.com/es/tools/pdf-photo-contact-sheet): Crea hojas de contacto con miniaturas, nombres y EXIF - [Conversión de Imágenes en Lote](https://elysiatools.com/es/tools/image-batch-convert): Convierte múltiples archivos de imagen entre diferentes formatos como JPG, PNG, WebP, AVIF, TIFF, GIF con configuración de calidad y procesamiento por lotes ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web TypeScript](https://elysiatools.com/es/samples/web-image-processing-typescript): Ejemplos de procesamiento de imágenes Web TypeScript incluyendo lectura/guardado de imágenes, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato ## Contenido relacionado - [Herramientas de conversion de formatos de imagen y exportacion animada](https://elysiatools.com/es/hubs/image-convert): Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub. - [Herramientas de intercambio JSON y traduccion de formatos](https://elysiatools.com/es/hubs/json-convert): Compara herramientas de conversion JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN y otros formatos estructurados en un solo hub. - [Herramientas de inspeccion, diff y transformacion JSON](https://elysiatools.com/es/hubs/json-utility): Reune en un solo hub herramientas para formatear JSON, comparar cambios, inspeccionar rutas, validar esquemas, combinar archivos y transformar datos para flujos de API y datos. - [Herramientas de limpieza, acabado y preparacion por lotes de imagenes](https://elysiatools.com/es/hubs/image-utility): Reune en un solo hub herramientas para limpiar imagenes, recortar bordes, agregar margen o marco, redimensionar y comprimir por lotes, poner marcas de agua y pulir activos visuales.