# Extractor de paleta de color desde imagen Sube una imagen, extrae colores dominantes y exporta tokens listos para codigo con verificacion de contraste > Página canónica: https://elysiatools.com/es/tools/image-color-palette-extractor - **Categoría:** Design - **Palabras clave:** paleta, colores, tailwind, css, marca ## Descripción general Extrae colores dominantes de cualquier imagen y genera tokens de diseño listos para usar en CSS, Tailwind o proyectos de marca. Verifica ratios de contraste y descarga la paleta en formatos compatibles con herramientas de diseño. ## Entradas - **Archivo de imagen** (file) - **Tamano de paleta** (number) - **Nombre del paquete** (text): brand-launch-palette ## Cuándo usarlo - Cuando necesitas crear una guía de estilos a partir de una imagen de referencia o foto de producto. - Para extraer automáticamente los colores principales de un logotipo o captura de pantalla. - Al preparar tokens de color para desarrollo web verificando accesibilidad y contraste. ## Cómo funciona - Sube una imagen en formato JPG, PNG, WebP o GIF (máximo 20 MB). - Selecciona el tamaño de paleta deseado entre 5 y 10 colores dominantes. - Opcionalmente asigna un nombre de paquete para organizar la exportación. - Obtén los códigos hexadecimales, variables CSS, clases de Tailwind y verificación de contraste en una vista previa HTML. ## Casos de uso - Creación de sistemas de diseño a partir de fotografía de producto o moodboards. - Extracción de paletas de marca desde logotipos o material publicitario existente. - Generación rápida de variables CSS y configuraciones de Tailwind para prototipos web. ## Preguntas frecuentes ### ¿Qué formatos de imagen admite la herramienta? Acepta archivos JPG, PNG, WebP y GIF con un tamaño máximo de 20 MB. ### ¿Cuántos colores puedo extraer? Puedes configurar entre 5 y 10 colores dominantes según las necesidades de tu paleta. ### ¿Qué formatos de exportación genera? Genera tokens para CSS, Tailwind, JSON, ASE y ACO, además de mostrar los ratios de contraste. ### ¿Puedo usar el nombre de paquete para organizar proyectos? Sí, el campo opcional 'Nombre del paquete' te permite etiquetar exportaciones para diferentes marcas o campañas. ### ¿La herramienta verifica la accesibilidad de los colores? Sí, calcula y muestra los ratios de contraste para asegurar que la combinación cumpla estándares de accesibilidad. ## Herramientas relacionadas - [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-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 - [Extractor de Colores de Imagen](https://elysiatools.com/es/tools/image-color-extractor): Extrae colores dominantes de imágenes usando varios algoritmos incluyendo clustering k-means y análisis de histograma - [Extractor de Paleta de Colores](https://elysiatools.com/es/tools/image-color-palette): Extrae una hermosa paleta de colores de cualquier imagen - [Selector de Color de Imagen](https://elysiatools.com/es/tools/image-color-picker): Selecciona colores de imágenes especificando coordenadas. Obtiene valores de color en formatos HEX, RGB, HSL, HSV y CMYK. - [Decodificador de Código QR](https://elysiatools.com/es/tools/qr-code-decoder): Decodifica códigos QR de imágenes y extrae el texto o URL contenido - [Añadir Borde a Imagen](https://elysiatools.com/es/tools/image-add-border): Añadir bordes personalizables a imágenes con varios estilos, colores y anchos - [Superposición de Degradado de Imagen](https://elysiatools.com/es/tools/image-add-gradient): Agregar efectos de superposición de degradado a imágenes con colores personalizables, direcciones y modos de mezcla - [Add Pattern Effect](https://elysiatools.com/es/tools/image-add-pattern): Add geometric pattern overlays to images with customizable colors, size, and rotation ## 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 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. - [Generadores de efectos CSS, paletas y tokens de diseno](https://elysiatools.com/es/hubs/design-generate): Herramientas reunidas para efectos visuales CSS, construccion de paletas y generacion de tokens de diseno en un solo hub. - [Herramientas de auditoria de accesibilidad web y color accesible](https://elysiatools.com/es/hubs/web-accessibility-audits): Revisa problemas WCAG, orden de lector de pantalla, fallos de contraste, riesgo de vision cromatica y elecciones de color accesible en un solo hub para flujos de accesibilidad web. - [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.