¿Cómo elige Chrome el color de las rayas en las miniaturas de la página “Más visitadas”? Está claramente basado en el favicon, pero no puedo decir exactamente cómo se deriva. La tecnología cambia la vida futura

La página chrome://newtab está construida con mucho JavaScript, una línea de la cual es responsable de esas franjas:

 chrome.send('getFaviconDominantColor', [faviconUrl, this.id]);

Si miramos en la fuente Chromium, esta devolución de llamada interna del navegador salta por un tiempo antes de que se determine el color y se establezca en la página. Si lo rastreamos por un tiempo (ver http://src.chromium.org/svn/trun…, http://src.chromium.org/viewvc/c… y http://src.chromium.org / svn / trun …), finalmente llegamos a CalculateKMeanColorOfPNG en el análisis de color incluido (http://src.chromium.org/svn/trun…).

Aquí está la explicación actualmente incluida con eso:

 // Returns an SkColor that represents the calculated dominant color in the png. // This uses a KMean clustering algorithm to find clusters of pixel colors in // RGB space. // |png| represents the data of a png encoded image. // |darkness_limit| represents the minimum sum of the RGB components that is // acceptable as a color choice. This can be from 0 to 765. // |brightness_limit| represents the maximum sum of the RGB components that is // acceptable as a color choice. This can be from 0 to 765. // // RGB KMean Algorithm (N clusters, M iterations): // TODO (dtrainor): Try moving most/some of this to HSV space? Better for // color comparisons/averages? // 1.Pick N starting colors by randomly sampling the pixels. If you see a // color you already saw keep sampling. After a certain number of tries // just remove the cluster and continue with N = N-1 clusters (for an image // with just one color this should devolve to N=1). These colors are the // centers of your N clusters. // TODO (dtrainor): Check to ignore colors with an alpha of 0? // 2.For each pixel in the image find the cluster that it is closest to in RGB // space. Add that pixel's color to that cluster (we keep a sum and a count // of all of the pixels added to the space, so just add it to the sum and // increment count). // 3.Calculate the new cluster centroids by getting the average color of all of // the pixels in each cluster (dividing the sum by the count). // 4.See if the new centroids are the same as the old centroids. // a) If this is the case for all N clusters than we have converged and // can move on. // b) If any centroid moved, repeat step 2 with the new centroids for up // to M iterations. // 5.Once the clusters have converged or M iterations have been tried, sort // the clusters by weight (where weight is the number of pixels that make up // this cluster). // 6.Going through the sorted list of clusters, pick the first cluster with the // largest weight that's centroid fulfills the equation // |darkness_limit| < SUM(R, G, B) < |brightness_limit|. Return that color. // If no color fulfills that requirement return the color with the largest // weight regardless of whether or not it fulfills the equation above. SkColor CalculateKMeanColorOfPNG(scoped_refptr png, uint32_t darkness_limit, uint32_t brightness_limit);

Entonces, básicamente, el algoritmo de agrupamiento k-means convierte el favicon en bloques de colores que son más o menos iguales, a veces llamados superpíxeles. Puede visualizar el resultado de esto similar a las células de Voronoi:
vía: http://en.wikipedia.org/wiki/Vor…
De esta manera, los píxeles uno al lado del otro se agruparán si son diferentes solo por una cantidad imperceptible. Esto sucede a menudo en la compresión de imágenes y cuando tiene ligeros desvanecimientos entre colores en gradientes o fotos, por lo que este paso es necesario para que el análisis algorítmico preciso tenga una idea más general de lo que está haciendo el favicon.

Luego, devuelve el color del bloque más grande (calculado como el centroide del bloque con la mayor cantidad de píxeles).