Cómo sacar la paleta de colores de una imagen para tu marca
De una foto a una paleta usable: cómo elegir el color dominante, comprobar el contraste accesible y exportarla a CSS o Tailwind.
Sacar la paleta de colores de una imagen consiste en agrupar sus píxeles en un puñado de colores dominantes y convertir esos grupos en valores HEX listos para usar. El extractor de paleta de colores de Docuboxer hace justo eso en el navegador: sube una foto o un logo y en segundos tienes de 5 a 8 colores dominantes, sin que el archivo salga de tu equipo. Lo difícil no es sacar los colores —eso lo resuelve cualquier extractor— sino convertir esos HEX sueltos en una paleta que funcione en una web de verdad: con roles definidos y contraste suficiente para que el texto se lea.
Qué hace un extractor de colores por dentro
Un extractor no "busca" los colores de marca ni entiende qué es un logo: lee cada píxel de la imagen, lo convierte en un punto dentro de un espacio de color, y agrupa los puntos que están cerca entre sí —la técnica habitual es una variante de clustering tipo k-means. Cada grupo se colapsa en un único color representativo (normalmente el centro del grupo), y los grupos se ordenan por cuántos píxeles contienen. El resultado son los colores que ocupan más superficie en la imagen, no los colores más "importantes" a ojos humanos.
Por qué el color más frecuente casi nunca sirve como color de marca
Aquí es donde la mayoría de personas se lleva una sorpresa: el color que más píxeles ocupa suele ser el fondo, un gris de sombra, o un tono de piel o de cielo —no el color vivo del logo o del producto que motivó la foto. Un logo pequeño sobre un fondo blanco grande pierde casi siempre en superficie. Por eso conviene extraer más colores de los que vas a usar (7 u 8 en vez de 3 o 4) y elegir a mano cuál es realmente el color primario, en lugar de asumir que el primero de la lista lo es.
De 5 colores extraídos a una paleta con roles
Una lista plana de HEX no es una paleta: una paleta funcional asigna un trabajo a cada color. Como mínimo necesitas cuatro roles: primario (el color de marca, para botones y acentos fuertes), acento (un segundo color para llamar la atención sin competir con el primario), superficie (el fondo de tarjetas y secciones, casi siempre un neutro casi blanco o casi negro) y texto (el color del cuerpo de texto, casi siempre un gris muy oscuro, no negro puro). De los 5 a 8 colores que extraigas, es raro que más de dos merezcan ser primario o acento; el resto suelen ser candidatos a superficie o simplemente ruido de la foto —reflejos, sombras.
El problema del contraste: aquí no manda el gusto
Un color puede ser precioso y completamente ilegible como texto. Antes de asignar un HEX extraído al rol de texto o de fondo de botón, comprueba el ratio de contraste contra el color que va detrás: WCAG pide un mínimo de 4,5:1 para texto normal y 3:1 para texto grande (títulos) o elementos de interfaz. Un verde bosque extraído de un logo puede funcionar perfecto como acento sobre blanco y fallar por completo como texto sobre ese mismo blanco si es demasiado claro. Esta comprobación no es opcional ni es cuestión de gusto: es la diferencia entre una web que se lee y una que no.
Por qué conviene trabajar en HSL o en OKLCH, no en HEX a ojo
Cuando necesitas una variante más clara o más oscura de tu color primario para un hover o un estado deshabilitado, tocar el HEX a ojo —cambiar dos dígitos hexadecimales al azar— da resultados inconsistentes: dos colores con la misma diferencia "visual" de luminosidad pueden tener valores HEX completamente distintos. HSL resuelve esto separando el tono (H) de la saturación (S) y la luminosidad (L): subir o bajar solo la L genera variantes que mantienen el mismo tono. OKLCH va un paso más allá y corrige una limitación real de HSL —que su luminosidad no corresponde exactamente a cómo el ojo humano percibe el brillo, así que dos colores con la misma L en HSL pueden verse con brillo distinto. En OKLCH esa correspondencia es mucho más fiel, así que las variantes claras y oscuras que generas se ven consistentes entre tonos distintos. Puedes convertir cualquier HEX extraído a HSL o a OKLCH —y volver— con el conversor de colores.
Exportar la paleta a CSS o a Tailwind
Una vez tienes los roles decididos, el último paso es dejar de copiar HEX a mano. El extractor de paleta exporta directamente a variables CSS (--color-primary: #...) listas para pegar en tu hoja de estilos, o al bloque colors de la configuración de Tailwind, para poder usar clases como bg-primary o text-accent sin repetir el HEX en ningún sitio. Centralizar los colores así también hace trivial ajustar toda la paleta más adelante: cambias el valor en un solo lugar. Y si lo único que necesitas es un favicon con tu color primario, no hace falta montar toda la paleta primero: el generador de favicon parte de un color o de una imagen y genera todos los tamaños de golpe.
Lo que una paleta extraída no resuelve
Sé honesto contigo sobre las limitaciones antes de construir encima. Una paleta extraída es un punto de partida, no una identidad de marca: no define tipografía, ni logo, ni el resto de decisiones visuales que hacen reconocible una marca. Y el color depende de la foto: la iluminación, el balance de blancos y el perfil de color del archivo cambian el HEX resultante, así que dos fotos del mismo objeto en condiciones distintas te darán colores ligeramente distintos. Si el objeto es un logo o cualquier gráfico vectorial, siempre es mejor partir del archivo original (SVG, PDF) o de una captura sin comprimir que de una foto tomada con el móvil. Si tu imagen de origen viene en un formato poco habitual —HEIC de iPhone, WebP— conviértela primero con el conversor de imágenes para asegurarte de que el extractor la lee sin artefactos de compresión.
Preguntas frecuentes
¿Cuántos colores debería extraer de una imagen para tener una paleta usable?
Extrae más de los que necesitas —entre 6 y 8— y elige a mano los 2 o 3 que de verdad representen tu marca. El color más frecuente casi nunca es el correcto, así que partir de una lista amplia te da margen para descartar fondos, sombras y ruido.
¿Por qué dos fotos del mismo logo me dan colores HEX distintos?
Porque el HEX depende de la iluminación, el balance de blancos y el perfil de color del archivo, no solo del color real del objeto. Si necesitas un color exacto y estable, parte del archivo vectorial original (SVG, PDF) en vez de una foto.
¿Qué ratio de contraste necesito para que el texto sea legible?
WCAG pide un mínimo de 4,5:1 entre el texto y su fondo para texto normal, y 3:1 para texto grande (a partir de 24px, o 19px en negrita) y para elementos de interfaz. Un color extraído bonito no garantiza ese ratio: hay que comprobarlo antes de usarlo como texto.
¿HSL u OKLCH: cuál conviene para generar variantes claras y oscuras?
OKLCH da resultados más consistentes porque su componente de luminosidad se corresponde mejor con cómo el ojo percibe el brillo: dos colores con el mismo valor de L en OKLCH se ven igual de claros, algo que HSL no garantiza. Para uso cotidiano HSL es más que suficiente; para paletas con muchos tonos distintos, OKLCH evita inconsistencias.
¿Puedo extraer la paleta de un logo en PNG con transparencia?
Sí, el extractor ignora los píxeles totalmente transparentes y trabaja solo con el color visible. Si el logo tiene bordes semitransparentes por antialiasing, pueden aparecer como colores intermedios espurios en la lista, otro motivo para extraer más colores de los que necesitas.
¿Cómo exporto la paleta a la configuración de Tailwind?
El extractor de paleta genera directamente el bloque de colores en formato Tailwind, listo para pegar en la sección colors de tu configuración; solo tienes que asignar el nombre de cada rol (primary, accent, surface...) al HEX correspondiente.
Extrae tu paleta de colores ahora
Sube una foto o un logo y exporta a CSS o Tailwind. Gratis, local y sin límites.
Abrir extractor de paleta →Herramientas relacionadas
- Extraer paleta de colores — Colores dominantes de una imagen, exportables a CSS o Tailwind.
- Convertir colores — HEX, RGB, HSL y OKLCH, para generar variantes coherentes.
- Convertir imagen — Pasa HEIC, WebP o AVIF a PNG o JPG antes de extraer.
- Generar favicon — Todos los tamaños a partir de un color o una imagen.
También te puede interesar: cómo convertir HEIC a JPG y las mejores herramientas para developers en 2026.