Cómo se eligen los colores
La herramienta crea una copia pequeña de tu imagen, de como máximo 160 píxeles en su lado más largo, y cuenta cada píxel que no es transparente. Luego agrupa los píxeles similares con agrupamiento k-means e informa del color promedio de cada grupo, empezando por el más grande. El porcentaje de cada muestra indica cuánto de la imagen cubre ese grupo.
El punto de partida es fijo y no aleatorio: empieza con el color más común y luego va añadiendo el color más alejado de los que ya tiene. Así, la misma imagen da siempre la misma paleta, y un pequeño detalle llamativo, como un logo rojo sobre una caja blanca, obtiene su propia muestra en lugar de diluirse en el fondo.
Pide de 5 a 8 colores. Una foto de producto sobre un fondo liso suele necesitar 5 o 6. Una foto de estilo de vida con mucho contenido se ve mejor con 8. Si la imagen tiene menos colores distintos de los que pediste, la herramienta te lo indica y muestra los que encontró.
Cómo leer la matriz de contraste
Cada color se empareja con todos los demás, además de blanco y negro puros, y cada celda muestra la relación de contraste del texto en el color de la fila sobre un fondo en el color de la columna. La relación sigue la definición de WCAG: (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son la luminancia relativa del color más claro y el más oscuro. Va de 1:1 (el mismo color dos veces) a 21:1 (negro sobre blanco).
Las etiquetas son los umbrales que fija WCAG:
- AA: al menos 4.5:1 para texto normal y 3:1 para texto grande (Criterio de conformidad 1.4.3).
- AAA: al menos 7:1 para texto normal y 4.5:1 para texto grande (Criterio de conformidad 1.4.6).
- Texto grande significa al menos 18 puntos, o 14 puntos en negrita (definición de gran escala de WCAG).
Una celda marcada como AA grande sirve para un titular grande pero es demasiado tenue para un pie de foto. La explicación de 1.4.3 del W3C también indica que la relación no debe redondearse, así que 4.499:1 no cumple 4.5:1. La herramienta evalúa el número exacto y lo muestra recortado a dos decimales, nunca redondeado hacia arriba.
Un ejemplo resuelto
Supongamos que la foto te da un azul marino de #1a3c6e y un crema de #fdf6e3. La luminancia relativa del azul marino resulta ser de unos 0.046 y la del crema de unos 0.923. La relación es (0.923 + 0.05) / (0.046 + 0.05), que da unos 10.1:1 con esas cifras redondeadas y 10.16:1 con las exactas. Eso cumple AAA para todo tipo de texto, así que un texto en azul marino sobre una tarjeta final en crema es seguro a cualquier tamaño. Pon un naranja medio como #e07a2e sobre el mismo crema y la relación baja a 2.78:1, que falla incluso para texto grande. Reserva el naranja para un botón con texto negro encima (6.99:1, que es AA pero se queda justo por debajo de AAA), o para una forma sin palabras.
Cómo usar la exportación
La exportación CSS es un bloque :root de propiedades personalizadas, --color-1 para el color que más cubre la imagen y así sucesivamente. El JSON incluye el hex, el RGB, el HSL de cada color y su proporción de la imagen, fácil de pegar en un archivo de tokens de diseño o pasar a un script. Renombra las variables una vez que sepas cuál color es el fondo, cuál es el texto y cuál es el acento.
Qué no hace esta herramienta
No sabe cuáles colores son los de tu marca. Una foto de tu producto sobre una mesa de madera incluirá la mesa. Recorta primero el producto o el empaque si solo quieres sus colores. Tampoco puede darte los colores exactos de impresión: los números son los píxeles del archivo, tras tu cámara y cualquier edición, así que compáralos con tu guía de marca antes de publicarlos. Y solo evalúa el contraste del texto. WCAG tiene reglas aparte para iconos y elementos de interfaz, que esta matriz no califica.
Si prefieres no hacer esto a mano
Hermoso es marketing en piloto automático: investiga los anuncios que ya funcionan en tu mercado, crea anuncios de imagen y video acordes a tu marca, programa las publicaciones y lanza campañas de pago en tus propias cuentas publicitarias. Cuando añades tu marca desde tu sitio web, aprende tus productos, logo y paleta, y puedes definir los colores de los pies de foto y las tarjetas finales con códigos hex. Funciona en la app web, o dentro de Claude, ChatGPT y Cursor a través de su servidor MCP.
Herramientas gratis: Guía de tamaños para redes sociales · Creador de cuadrículas de Instagram · Generador de Open Graph
Preguntas frecuentes
¿Cómo obtengo una paleta de colores a partir de una foto?
Suelta la foto en la herramienta y elige cuántos colores quieres, de 5 a 8. Agrupa píxeles similares y muestra el color medio de cada grupo en HEX, RGB y HSL, el más grande primero, con un botón de copiar en cada uno.
¿Qué ratio de contraste necesito para el texto?
El nivel AA de WCAG 2.2 pide al menos 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA pide 7:1 y 4.5:1. El texto grande es de al menos 18 puntos, o 14 puntos en negrita.
¿4.49:1 está lo bastante cerca para pasar AA?
No. El W3C dice que el ratio calculado no debe redondearse al compararlo con un umbral, así que 4.499:1 no cumple 4.5:1. La herramienta juzga el número exacto.
¿Por qué obtengo la misma paleta siempre?
La agrupación parte de un punto fijo, el color más común, y luego añade el color más alejado de los ya elegidos. No hay un inicio aleatorio, así que una imagen siempre da una sola respuesta.
¿Se sube mi imagen?
No. Se lee con el propio lector de archivos de tu navegador y se cuenta en un lienzo de tu dispositivo. No se envía nada a ningún sitio ni se almacena.
Hermoso crea los anuncios, programa las publicaciones y gestiona las campañas. Empieza gratis, más de 250 créditos gratis que puedes ganar, sin tarjeta.
Empieza gratis → Ver precios