Paleta extraída
Haz clic en una muestra para copiar su HEX, o copia las variables CSS y el JSON de toda la paleta.
Copiado al portapapeles.
Elige una imagen para extraer la paleta de colores.
:root Herramienta de color privada
Extractor de paleta de colores de cualquier imagen
Elige una foto, logo, captura de pantalla o ilustración y obtén una paleta aprovechable con HEX, RGB, HSB, OKLCH, variables CSS y JSON listos para pegar.
La imagen se procesa localmente con las API de Canvas del navegador y no se envía a ningún servidor.
Zona de trabajo del extractor
Suelta una imagen en el extractor, elige entre 5 y 10 colores dominantes y copia el formato que encaje en tu flujo de diseño o de front-end.
Por qué este extractor ayuda en el trabajo real
Un extractor de paleta solo sirve cuando devuelve algo que puedes reutilizar de inmediato.
Analiza la imagen completa
En vez de ir píxel por píxel con el cuentagotas, la herramienta agrupa los píxeles visibles y entrega los colores dominantes como punto de partida.
Devuelve código listo para pegar
Obtienes HEX, RGB, HSB, OKLCH, variables CSS y JSON, así que la paleta pasa directo a sitios, design systems y componentes sin retrabajo.
Cómo usar el extractor de paleta de colores
El camino es corto a propósito: elige la imagen, revisa los colores, copia y refina en tu herramienta de diseño si hace falta.
01
Elige una imagen
Selecciona un JPG, PNG, WebP o GIF de tu dispositivo. El navegador decodifica el archivo y prepara un muestreo local en Canvas.
- Las capturas de pantalla funcionan muy bien
- Los logos y las ilustraciones suelen dar paletas más limpias
02
Define el tamaño de la paleta
Usa 5 colores para una paleta de marca ajustada, o de 8 a 10 cuando la foto, ilustración o captura tenga más variación.
La agrupación se ejecuta en el navegador con un algoritmo ligero, para que la herramienta siga siendo rápida y privada.
03
Copia el resultado
Haz clic en cualquier muestra para copiar el HEX, o copia las variables CSS y el JSON cuando necesites una salida estructurada para el proyecto.
Usa los valores OKLCH cuando quieras ajustar la luminosidad percibida y el croma en flujos modernos de CSS.
Copiar la paletaFormatos que devuelve el extractor
La herramienta se centra en los formatos que diseñadores y desarrolladores pegan de verdad en sus proyectos.
HEX
Los valores hexadecimales de seis dígitos que se usan en CSS, Figma, herramientas de diseño y manuales de marca.
RGB
Útil para trabajo con Canvas, cálculos de color en JavaScript o valores rgb() rápidos en CSS.
HSB
Tono, saturación y brillo para entender cómo se comporta visualmente cada color extraído.
OKLCH
Referencia moderna de color para luminosidad percibida, croma y tono.
Variables CSS
Un bloque :root listo para prototipos rápidos y experimentos con design tokens.
JSON
Datos estructurados para transformar la paleta en herramientas de build o en el código de la app.
Preguntas frecuentes
Dudas de diseñadores, artistas y desarrolladores que usan el extractor de paleta de Palette Lab.
¿Cómo funciona el extractor de paleta?
La herramienta muestrea los píxeles visibles de la imagen dentro del navegador, agrupa los colores parecidos y devuelve los colores dominantes de la paleta.
¿Mis imágenes se suben a algún servidor?
No. El extractor funciona localmente con las API de Canvas del navegador, así que la imagen elegida no se envía a ningún servidor de Palette Lab.
¿Qué formatos de imagen admite?
Los formatos que el navegador puede decodificar, como JPG, PNG, WebP y GIF. La compatibilidad puede variar según el dispositivo y el navegador.
¿Puedo usar el resultado directamente en CSS?
Sí. La herramienta genera variables CSS listas para copiar, además de HEX, RGB, HSB, OKLCH y JSON para cada color extraído.
Extrae la paleta de tu próxima imagen
Suelta una captura, logo, ilustración o foto y conviértela en una paleta aprovechable.
Después copia el HEX, las variables CSS o el JSON y sigue trabajando.
El extractor de paleta es gratuito, privado y funciona en el navegador.