Dribbble 客戶端 ZEEEN 是怎麼做到詳情頁顏色是適配的？

最近下載了追波一個第三方客戶端ZEEEN，作品詳情頁做到了顏色適配，根據作品用色對界面進行配色，效果十分出色。希望大神能從設計師或者前端開發的角度解釋一些實現方法。比如怎麼獲取適合的可閱讀的背景色和文字色。問題用到的截圖是題主自己追波的作品截圖。

我自己對這個問題也挺感興趣的，因為以前想做個 side project 第一步就是提取顏色，所以曾經在 GitHub 上搜索過一陣，主要找到這麼些庫：

1. ColorArt

因為很早就有關注 Panic 這個 macOS 軟體開發商，所以這個庫以前也有見過，是在 iTunes 某一版更新了「根據唱片封面提取條目背景色和標題、正文文字顏色」的功能之後，Panic 的工程師自己寫來模仿的，在他們的博客上也有簡單介紹背景：iTunes 11 and Colors

這個其實效果挺好的，但因為是用 Objective-C 寫的，我不會，所以當時放在了一邊

2. 然後我嘗試了一下 zeke/get-image-colors、thephpleague/color-extractor，因為種種原因（好吧，其實就是因為我的代碼能力太弱了）都用不大起來，這兩個是 JS 和 PHP 的，網頁項目里應用起來應該方便些。

3. 最後我自己使用的是 arcanis/colibrijs，其實演算法也是源自在 Stack Overflow 上某個用戶去模擬 iTunes 11 的封面顏色提取功能，帖子里有詳細介紹實現原理：How does the algorithm to color the song list in iTunes 11 work?

簡單來說就是程序把所有像素的顏色都提取出來，然後設定一個閾值，所有像素里顏色區別小於這個值的都歸到一坨，數量最多的那幾坨就是提取出來的主要顏色。而在 iTunes 唱片封面這個場景下，為了能提取一個背景色出來保證對象圖片放上去非常和諧，背景色是對圖片邊緣單獨做一次取色的。而「顏色區別」的實現方式是把 RGB 三個值變成一個三維坐標再進行一個空間變換（作者說是為了符合人類的認知習慣，會有些類似我們做數碼設計的時候經常是在 HSB 而不是 RGB 里挑顏色）然後計算兩點之間的距離。

Again，因為我自己對於這些代碼完全是一知半解，所以這部分原理我吃不透，歡迎大家說得更詳細一些。

因為這裡的主要原理是看哪些顏色占的面積更大，所以其實對風景、人像等照片處理的效果會比較好，但對於很多 UI 作品來說效果一般，我猜測是因為在界面里很多有點睛作用的「細細」的圖標和文字雖然顏色和背景差別特別大，但如果單純用裡面的實際像素來算面積的話就微乎其微了。總之，如果把 colibrijs 用來提取 UI 作品顏色的時候效果一般，大家可以看這個 Demo 感受一下：

這個效果我覺得比 Zeeen 里的差不少，剛剛看到這個問題的時候我厚著臉皮私信問了一下 @Nobtaka（ https://twitter.com/nobtaka ），Zeeen 的設計師。他問了他的開發者合伙人表示他們用的就是 Panic 最早時候公開過的 ColorArt

有開源的演算法。識別圖片自動取色，每次識別都可以輸出6個顏色供選用。選擇相應的顏色可以達到提問里的這個效果。

名字叫什麼我忘了。你要去找你們的程序員，讓他們到開源庫裡面搜，很容易找到。

其中有背景色，適應背景色的標題文字，副文字

可能是這樣：窮舉或隨機取全圖的顏色，找佔比最大的那個色值，顏色相近的取平均。

也可能這樣優化一下，高斯blur後再取值。

猜的