Selector de Color de Imagen y Paleta
Selector de Color de Imagen y Paleta
Haz clic para seleccionar colores de la imagen, extrae automáticamente colores dominantes y paleta, copia HEX/RGB y exporta variables CSS. Soporta PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Arrastra y suelta imagen aquí o haz clic para seleccionar
Soporta PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Inicio rápido
- Importar imagen: Arrastrar y soltar o clic para seleccionar
- Cambiar panel: Escritorio muestra panel lateral; Móvil toca botón inferior
- Clic para seleccionar: Haz clic en cualquier parte de la imagen para obtener el color del píxel
- Copiar color: Después de seleccionar copia formato HEX/RGB/CSS
- Establecer cantidad de colores: Arrastra deslizador o clic en preset (4/6/8/12/16/24/32)
- Extraer paleta: Haz clic en botón extraer para obtener lista de colores dominantes
- Exportar CSS: Después de extracción exporta archivo de variables CSS
- Exportar JSON: Después de extracción exporta archivo de datos JSON
- Reiniciar: Limpiar imagen actual y resultados
📌 Escenarios comunes
- Selección de color de diseño/póster: Extraer colores primarios y de acento para esquema de color
- Tema/sistema de diseño: Exportar variables CSS o JSON para proyecto
- Estilo de componentes: Extraer colores coincidentes para botones, etiquetas, gráficos
- Consistencia de marca: Extraer paleta de colores estándar de activos de marca
🎛️ Opciones de selector de color y paleta
- Cantidad de colores: 2–32, comúnmente 8/12; fotos/degradados sugieren 16–32
- Botones de preset: 4/6/8/12/16/24/32 cambio con un clic
- Ordenamiento: Por porcentaje de alto a bajo, colores más comunes primero
- Número junto al color: Muestra porcentaje de píxeles en la imagen
🧭 Consejos de uso
- Empezar con 8/12 para ver efecto general, luego aumentar a 16/24/32 según necesidad
- Al usar en proyecto, renombrar --color-1 a nombres semánticos (ej., --color-primary)
- Mantener página en primer plano al extraer imágenes grandes para evitar limitación del navegador
⚠️ Limitaciones y compatibilidad
- Límite de archivo individual 128MB, imágenes muy grandes pueden causar lentitud
- Extracción de paleta hace downsampling automático para rendimiento, resultados son colores representativos
- Decodificación HEIC/HEIF depende de soporte del navegador, convertir a JPG/PNG si falla
- Píxeles transparentes se ignoran o procesan como RGBA real
🔒 Privacidad y seguridad
- Todo el procesamiento se realiza en el navegador; los datos nunca salen de tu dispositivo
❓ Preguntas frecuentes
¿Cómo usar el archivo CSS exportado?
Poner el :root { --color-1: ... } exportado en CSS global, luego referenciar con var(--color-1).
¿Para qué sirve el JSON exportado?
Para reutilización de scripts/sistema de diseño, ej., generar Design Tokens o configuración de tema. Cada color incluye hex/css/rgb y count.
¿Qué cantidad de colores se recomienda?
UI general: 8 o 12; iconos minimalistas: 4–6; fotos/degradados: 16–32. Usar presets para comparar rápidamente.
¿Por qué los colores seleccionados y de paleta son diferentes?
Selección por clic obtiene un solo píxel; paleta cuantifica toda la imagen para colores representativos enfatizando tendencia general.
¿Por qué el botón de exportar está gris?
Necesitas hacer clic primero en 'Extraer Paleta', exportar está disponible después de completar extracción.
¿Cómo se genera el nombre de archivo exportado?
Por defecto usa nombre de archivo original (sin extensión) + .palette-cantidad + .css/.json, con caracteres ilegales limpiados automáticamente.