Paleta de colores de una imagen

Cómo se usa

1. Haga clic en Elija una foto o arrastre una imagen sobre el recuadro. La foto se lee en su dispositivo.
2. Elija el Número de colores, de 5 a 10. Una foto con mucho detalle necesita más colores.
3. Lea cada color: su código hexadecimal, sus valores RGB y HSL y su parte de la imagen. Haga clic en el botón de copiar junto a un color para copiar su código hexadecimal.
4. En Exportar la paleta, use Copiar como variables CSS, Copiar como lista o Descargar muestras (PNG).

Cómo se encuentran los colores

Cada píxel se convierte a CIE L*a*b*, un espacio de color en el que la distancia entre dos colores se parece a lo distintos que se ven para el ojo. Después, los píxeles se agrupan en el número de colores que elija mediante agrupamiento k-means, que sitúa el centro de cada grupo para que los píxeles estén lo más cerca posible de su centro.

Los centros iniciales se eligen con el método k-means++ y una semilla fija, así que la misma foto da siempre la misma paleta. Cada color es el promedio de los píxeles de su grupo, y su parte es el número de esos píxeles dividido entre todos los píxeles (en inglés).

Píxel → (L*, a*, b*)
Grupos: cada píxel se une al centro más cercano; los centros son los promedios de sus píxeles
Color = RGB medio del grupo; parte = píxeles del grupo ÷ todos los píxeles

• La foto se analiza como una copia de hasta unos 2 megapíxeles, lo que mantiene rápidas las fotos grandes.
• Los tonos muy parecidos pueden compartir un solo color. Una paleta de 10 puede dividir un color en dos cuando una foto tiene muchos tonos de él.

Códigos, partes y lo que significan

El código hexadecimal es el color escrito como tres pares de dígitos hexadecimales para el rojo, el verde y el azul; los valores RGB son los mismos números en decimal. HSL da el matiz como un ángulo alrededor de la rueda de color (0 es rojo, 120 verde, 240 azul), la saturación como su intensidad y la luminosidad como lo claro que es.

La parte es la fracción de los píxeles de la imagen que pertenecen a un color, es decir, la superficie que ocupa. Un punto pequeño y brillante puede ser un color con una parte pequeña, y un fondo grande y suave puede tener una parte grande formada por varios tonos parecidos.

• Copie las variables CSS para usar los colores en una página web o en un diseño: cada color pasa a ser --color-1, --color-2, y así sucesivamente.
• La tira en PNG sirve para un tablero de inspiración o una impresión: una muestra por color, con su código hexadecimal debajo.

Preguntas frecuentes