Cómo se extraen los colores
La herramienta reduce primero la imagen a una muestra pequeña, de unas cien por cien píxeles: al bajar la resolución desaparecen los detalles y queda lo esencial, que es justo lo que manda en la paleta. Después, cada píxel de esa muestra cae en una cubeta de color de 16 niveles por canal y se cuentan los píxeles de cada cubeta: las cubetas más pobladas son los colores dominantes, y el valor final de cada uno es la media de los píxeles de su grupo, para que no dependa de un solo píxel.
Fórmula
cubeta = (R ÷ 16, redondeado abajo) × 256 + (G ÷ 16, redondeado abajo) × 16 + (B ÷ 16, redondeado abajo)
Son 4096 cubetas posibles. Antes de entrar en la paleta, un color se fusiona con otro ya elegido si quedan casi idénticos (distancia mínima entre ambos), así la paleta no repite tonos.
Cómo usar la paleta: la regla 60-30-10
- 60 % color dominante: fondos y grandes superficies. Suele ser el color más frecuente de la imagen (el primero de la paleta).
- 30 % color secundario: cabeceras, tarjetas, menús. Un tono vecino del dominante funciona bien.
- 10 % color de acento: botones, enlaces y detalles. Reserva el color más vivo o saturado para esto.
- La paleta sale ordenada por frecuencia en la imagen, no por calidad: reordénala según el papel de cada color en tu diseño.
Contraste y accesibilidad: qué significa AA y AAA
Cada tarjeta muestra el ratio de contraste del color frente a blanco y frente a negro, con la misma fórmula WCAG que el comprobador de contraste: luminancia relativa de los dos colores y comparación (L1 + 0,05) ÷ (L2 + 0,05).
- AA en texto normal: ratio 4,5 : 1 o más.
- AAA en texto normal: ratio 7 : 1 o más.
- AA en texto grande e iconos: 3 : 1 o más.
- Si un color no llega a AA ni con blanco ni con negro, úsalo para decoración o superficies grandes, no para texto.
El color de texto de cada tarjeta (letras blancas o negras sobre el color) ya está elegido automáticamente por luminancia, igual que harías tú al diseñar.
Ideas para sacarle partido
- Logos: recupera la paleta de una marca cuando solo tienes el fichero de imagen y nadie te pasa los códigos.
- Fotografías: captura la atmósfera cromática de una foto para webs, ilustraciones o decoración.
- Capturas de pantalla: copia los colores exactos de una web o aplicación que te guste.
- Combinada con el generador de paletas: toma un color extraído como base y genera su armonía completa.