Extrae la paleta de colores de una imagen gratis
Obtén los colores dominantes de una foto o ilustración con sus códigos HEX y RGB, y llévatelos a tu proyecto como variables CSS, SCSS, Tailwind o JSON.
Arrastra tus imágenes o haz clic para elegirlas
Usa tu Google Drive sin renunciar a tu privacidad
Elige archivos de tu Drive, procésalos aquí y guarda el resultado en la carpeta que quieras. Todo ocurre en tu navegador: ShiftAny no tiene servidores propios.
- Tu Google Drive
- Tu navegadorAquí se procesa todo
- Tu Drive o tu equipo
- Tus archivos viajan directamente entre Google y tu navegador. No pasan por ningún servidor nuestro, porque no tenemos.
- El procesado se hace en tu dispositivo, exactamente igual que con un archivo de tu equipo.
- La app solo accede a los archivos que eliges y a los que guarda en tu Drive. Al resto, nunca.
- El acceso caduca a la hora y nunca se guarda. Este navegador solo recuerda tu nombre y tu correo para reconectar con un clic; puedes desconectarlo cuando quieras.
- Procesamiento
- En tu navegador
- Subida
- No se sube a ShiftAny
- Cuenta
- Sin registro
- Precio
- Gratis
- Entrada
- JPG, PNG, WebP, GIF, BMP, AVIF, SVG
- Salida
- HEX, RGB, CSS, SCSS, JSON
- Plataforma
- Navegador web
Cómo usar «Paleta de colores»
- Añade la foto, ilustración o logo del que quieres sacar la paleta.
- Elige cuántos colores quieres, de 5 a 8: se ordenan de más a menos presentes.
- Copia el HEX o el RGB de cada color, o elige «Exportar como» CSS, SCSS, Tailwind o JSON.
Colores representativos, no solo frecuentes
La imagen se reduce a una muestra de 200 px y sus colores se agrupan con el mismo algoritmo de cuantización que usa nuestro compresor PNG, que busca los tonos que mejor representan el conjunto en lugar de contar píxeles idénticos. Cada color lleva su proporción en la imagen y un nombre aproximado (azul oscuro, gris claro…) que sirve también como nombre de variable: --color-dark-blue en CSS, $dark-blue en SCSS o clases como bg-dark-blue en Tailwind. Las zonas transparentes no cuentan.
¿Se suben mis archivos?
No. ShiftAny Images procesa las imágenes directamente en tu dispositivo: esta herramienta funciona en tu navegador y no envía tus archivos a ningún servidor.
Preguntas frecuentes
¿En qué se diferencia del «Selector de color»?
El «Selector de color» da el código exacto del píxel que eliges con el cuentagotas. La paleta resume la imagen entera en unos pocos colores representativos, pensados para trasladar su estilo a un diseño o a una web.
¿Puedo cambiar los nombres de las variables?
Los nombres se generan a partir del color (blue, dark-blue, light-gray…) para que el código funcione al pegarlo. Puedes renombrarlos en tu editor; si dos colores se parecen, el segundo lleva un número (blue-2).
¿Qué versión de Tailwind elijo?
Tailwind v4 define los colores en el CSS con un bloque @theme; la v3 y anteriores, en tailwind.config.js. Si tu proyecto tiene ese archivo de configuración, elige v3.