Generador de paletas de colores desde imagen
Arrastre una foto, una captura de pantalla o un logotipo y obtenga sus colores dominantes con su proporción en la imagen. Tome píxeles exactos con el cuentagotas, exporte la paleta para el código y compruebe qué pares de colores son legibles.
¿Necesita una interfaz que se vea bien y se lea con facilidad?
Diseñamos y desarrollamos sitios web y aplicaciones con un sistema de color coherente: paleta de marca, contraste accesible y design tokens compartidos por diseñadores y desarrolladores. Cuéntenos su proyecto y reciba una estimación.
¡Gracias! Le responderemos en un día laborable.
En resumen: suba cualquier imagen y la herramienta encontrará sus colores principales con clustering k-means, mostrará qué parte de la imagen ocupa cada color y le permitirá tomar píxeles exactos con el cuentagotas. Exporte la paleta como HEX, RGB, HSL, variables CSS, configuración de Tailwind o JSON y compruebe después el contraste de dos colores cualesquiera según las WCAG 2.2. Todo funciona en su navegador, la imagen no se sube.
Cómo obtener una paleta de colores de una imagen
- Añada una imagen. Arrastre un archivo JPG, PNG, WebP, GIF o AVIF a la página, selecciónelo en su dispositivo o pegue una captura con Ctrl+V. ¿No tiene ninguna imagen a mano? Pulse «Probar con una foto de ejemplo».
- Elija el número de colores. Cinco o seis colores dan una paleta de marca compacta; de ocho a diez conservan tonos secundarios y acentos. La lista se ordena por proporción en la imagen; cambie a «de claro a oscuro» para verla como una escala.
- Tome colores exactos. Haga clic en cualquier punto de la imagen para leer el píxel bajo el cursor y añadirlo a la paleta. Con el teclado, ponga el foco en la imagen, mueva el marcador con las flechas y pulse Intro.
- Compruebe el contraste. El comprobador de abajo muestra qué pares de la paleta cumplen el nivel AA de las WCAG para texto normal. Haga clic en un par o elija cualquier color de texto y de fondo.
- Exporte. Elija HEX, RGB, HSL, CSS, Tailwind v3, Tailwind v4 o JSON y copie el código o descárguelo como archivo.
Cómo se encuentran los colores
La imagen se reduce a 256 píxeles en el lado largo y después los colores se agrupan en el espacio de color CIELAB, donde las distancias corresponden a lo diferentes que una persona percibe dos colores. La herramienta aplica clustering k-means con puntos iniciales k-means++ y una semilla aleatoria fija. Por eso la misma imagen siempre da la misma paleta, y un gran color de fondo no absorbe acentos pequeños pero vivos. El valor de cada color es la media de los píxeles reales de su grupo, no un color «más cercano» redondeado.
| Ajuste | Cuándo usarlo |
|---|---|
| 5–6 colores | Paleta de marca a partir de un logotipo o una foto clave, moodboards, temas de presentaciones |
| 7–8 colores | Temas de sitios web y aplicaciones: fondo, superficies, texto, acentos primarios y secundarios |
| 9–10 colores | Ilustraciones y fotos con muchos detalles, paradas de degradado, visualización de datos |
| Cuentagotas | Color exacto de un botón, un logotipo o un texto en una captura de pantalla |
Formatos de exportación para diseñadores y desarrolladores
Las listas HEX, RGB y HSL se pegan directamente en Figma, Sketch o cualquier campo de color. CSS genera propiedades personalizadas en :root, listas para un archivo de design tokens. Tailwind v3 añade un grupo de colores palette a tailwind.config.js, de modo que puede escribir bg-palette-1. Tailwind v4 usa el nuevo bloque @theme con variables --color-palette-1. JSON conserva HEX, RGB, HSL y la proporción de cada color en la imagen para scripts y documentación.
Comprobador de contraste según las WCAG 2.2
El contraste de color es la relación entre la luminancia relativa de dos colores, de 1:1 a 21:1. El criterio de conformidad 1.4.3 de las WCAG 2.2 (nivel AA) exige al menos 4,5:1 para texto normal y 3:1 para texto grande, es decir, 24 px normal o unos 18,7 px en negrita. El nivel AAA (criterio 1.4.6) sube el umbral a 7:1 y 4,5:1. El criterio 1.4.11 pide 3:1 para iconos, bordes de campos y otros elementos de la interfaz. El comprobador usa la fórmula exacta del estándar y no redondea la relación al alza, así que 4,49:1 se muestra como no superado.
Las paletas de marca rara vez superan estas pruebas tal cual: los acentos claros sobre blanco y los azules de tono medio con texto blanco son los problemas habituales. Si está creando un design system o rediseñando un producto, nuestro equipo puede ayudarle con el diseño y desarrollo de sitios y aplicaciones web. Para revisar rápidamente páginas existentes, pruebe el análisis de accesibilidad.
Preguntas frecuentes
¿Cómo obtengo la paleta de colores de una imagen?
Suba o pegue la imagen en esta página. La herramienta encuentra de 5 a 10 colores dominantes y muestra sus códigos HEX y su proporción en la imagen. Haga clic en un color para copiar su código HEX o exporte toda la paleta como CSS, Tailwind o JSON.
¿Cómo encuentro el código HEX de un color en una imagen?
Haga clic en ese punto de la imagen con el cuentagotas. La herramienta muestra los valores HEX, RGB y HSL de ese píxel exacto, y puede copiar el código o añadir el color a la paleta. En el móvil, toque la imagen; con el teclado, mueva el marcador con las flechas y pulse Intro.
¿Se sube mi imagen a un servidor?
No. La imagen se dibuja en un canvas en su navegador y los colores se calculan en un Web Worker en su dispositivo. No se envía nada a nuestro servidor y la imagen no se guarda en ningún sitio después de cerrar la página.
¿Por qué la paleta sale siempre igual?
El clustering usa una semilla aleatoria fija, así que la misma imagen con el mismo número de colores devuelve siempre la misma paleta. Esto permite compartirla con su equipo o recrearla más adelante con total seguridad.
¿Qué relación de contraste necesita el texto?
Para el nivel AA de las WCAG 2.2: al menos 4,5:1 para texto normal y 3:1 para texto grande (24 px, o unos 18,7 px en negrita). Para el nivel AAA: 7:1 y 4,5:1. Los iconos, los bordes de los campos y los indicadores de foco necesitan al menos 3:1 frente a su fondo.
¿Puedo usar la paleta en Tailwind CSS?
Sí. Elija «Tailwind v3» para obtener un grupo de colores para tailwind.config.js, o «Tailwind v4» para un bloque @theme con variables --color-palette-*. Después puede usar clases como bg-palette-1 y text-palette-2.
¿Qué formatos de imagen se admiten?
JPG, PNG, WebP, GIF, AVIF y BMP, hasta 50 MB. Los píxeles transparentes se ignoran, así que un logotipo sobre fondo transparente da solo los colores del logotipo. Para obtener los colores de un SVG, conviértalo antes a PNG.