Cómo usar: Extractor de Paleta de Imagen
- Elige una imagen, arrástrala o pégala — o prueba con la de ejemplo.
- Indica cuántos colores quieres; marca Ignorar blancos y negros casi puros en logos y fotos de producto sobre fondos lisos.
- Haz clic en cualquier muestra para copiarla, o haz clic en la imagen para tomar el color exacto de un píxel.
- Exporta la paleta como variables CSS, una configuración de colores de Tailwind, SCSS o JSON.
Cómo se encuentran los colores
La imagen se reduce de tamaño y sus píxeles se agrupan por color mediante clustering k-means: el algoritmo coloca tantos “centros” como colores hayas pedido, asigna cada píxel al más cercano, mueve cada centro a la media de sus píxeles y repite el proceso hasta que se estabilizan. Cada centro se convierte en una muestra, y su porcentaje indica cuánto ocupa en la imagen. Los píxeles transparentes se omiten, así que los logos con fondo transparente funcionan muy bien.
Cómo usar la paleta
- Elige un color dominante para los fondos y uno intenso y contrastante para botones y enlaces.
- Comprueba las combinaciones de texto y fondo con el Comprobador de contraste.
- Convierte un color en una escala completa de 50 a 950 con el Generador de colores Tailwind, o descubre su nombre con el Buscador de nombres de color.
Tu imagen se procesa en tu dispositivo con un canvas y nunca se sube a ningún servidor.
También se busca como: paleta de colores de una imagen, extraer colores de una imagen, sacar colores de una foto, selector de color de imagen, color hex de una imagen, extractor de colores, paleta de colores desde foto, selector de color de logo.
Herramientas que combinan con: Extractor de Paleta de Imagen
- Conversor de colores — Pega cualquier color CSS —HEX, rgb(), hsl(), hwb(), oklch() o un nombre como tomato— y obtén al instante todos los demás formatos, además de una paleta 50–950 lista para usar.
- Mezclador de colores — Elige dos colores y un número de pasos para obtener colores de transición mezclados de forma uniforme, ideales para degradados, bordes, gráficos y estados hover.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Conversor HEX a RGBA — Pega un código HEX, arrastra el deslizador de opacidad y copia el CSS exacto que necesitas: rgba() clásico, rgb( / alpha) moderno o HEX de 8 dígitos.