Extraer paleta de colores
Saca los colores dominantes de una imagen y expórtalos a CSS o Tailwind.
¿Cómo extraer la paleta de colores de una imagen?
Docuboxer extrae la paleta de colores de una imagen analizando cada píxel con un algoritmo de agrupación (k-means) que corre entero en tu navegador: sube una foto o un diseño, elige cuántos colores quieres —de 3 a 10— y en segundos obtienes los colores dominantes con su código HEX, RGB y HSL, el porcentaje de presencia de cada uno y si el texto blanco o negro cumple el contraste mínimo WCAG AA/AAA sobre ese fondo. Es la forma más rápida de sacar colores de una foto sin abrir un editor: pega la imagen, copia el HEX que necesites o exporta la paleta completa como variables CSS, configuración de Tailwind, JSON o una lista de HEX en texto plano. El color dominante queda marcado aparte. Todo el análisis ocurre localmente: la imagen nunca se sube a ningún servidor, y la herramienta es gratuita, sin registro y sin límite de usos.
Cómo usar Extraer paleta de colores
- Arrastra tu imagen o haz click para seleccionarla — acepta JPG, PNG, WebP y GIF hasta 50 MB.
- Ajusta el número de colores que quieres extraer con el slider, de 3 a 10.
- Revisa cada color de la paleta: su HEX, RGB, HSL, el porcentaje de presencia en la imagen y si cumple el contraste WCAG con texto blanco o negro.
- Copia el color que necesites con un clic, o exporta la paleta completa como variables CSS, configuración de Tailwind, JSON o lista de HEX.
Casos de uso comunes
Sacar la paleta de marca a partir de una foto
Analiza el logo o una foto de producto para identificar los colores exactos de una identidad de marca cuando no tienes el manual de estilo a mano.
Construir la paleta de una web a partir de un mood board
Sube una imagen de referencia o inspiración y convierte sus colores dominantes directamente en variables CSS o en la configuración de Tailwind de tu proyecto.
Crear moodboards y presentaciones coherentes
Extrae los colores de varias fotos de referencia para armar un moodboard con una paleta consistente antes de empezar un diseño.
Comprobar la accesibilidad de un fondo antes de maquetar
Verifica si el texto blanco o negro cumple el contraste WCAG AA o AAA sobre cada color de una foto antes de usarla como fondo de una sección.
Elegir colores complementarios para un diseño
Extrae la paleta de una imagen de inspiración y, con esos HEX, arma paletas complementarias o análogas en el conversor de color de Docuboxer.
Preguntas frecuentes
¿Cómo extraigo la paleta de colores de una imagen online?
Sube la imagen a la herramienta, ajusta el número de colores con el slider y la paleta aparece al instante con el HEX, RGB y HSL de cada color, lista para copiar o exportar.
¿Cuántos colores puedo extraer de una foto?
Entre 3 y 10 colores dominantes, según el nivel de detalle que necesites: menos colores dan una paleta más simplificada, más colores capturan matices sutiles.
¿Cómo sé cuál es el color dominante de la imagen?
El primer color de la lista, marcado con la etiqueta "Dominante", es el de mayor porcentaje de presencia en la imagen.
¿Qué formatos de exportación admite?
Puedes exportar la paleta como variables CSS, configuración de Tailwind, JSON o una lista de códigos HEX en texto plano, según lo que necesites para tu proyecto.
¿Se sube mi imagen a algún servidor?
No. Todo el análisis, desde la lectura de píxeles hasta el agrupamiento por color, ocurre en tu navegador con JavaScript. La imagen nunca sale de tu equipo.
¿Por qué me interesa el contraste WCAG de cada color?
Porque te dice, antes de maquetar, si un texto blanco o negro se lee bien sobre ese color de fondo según los niveles de accesibilidad AA y AAA — evita tener que corregirlo después.