/P. Hebert

顏色是人類對物體最基本的感知之一。在互聯網上，一個好的網頁配色能叫人眼前一亮，甚至產生極大的品牌效應，好比“阿里橙”、“鏈家綠”等等。來自美國的一位設計師Paul Hebert爬取了全球前10大網站的網頁配色數據，發現了一些有趣的現象： 哪種顏色最受歡迎？在潛移默化中，這些熱門網站又向你灌輸了怎樣的用色傾向呢？

找出熱門網站的配色偏好

我曾對全球那些大型熱門網站的網頁配色感到好奇，于是決定找出答案。

具體怎么做？

Alexa.com上有一份基于訪問量的全球網站排名名單（https://www.alexa.com/topsites）。

我寫了一個PHP腳本抓取了其中排名最高的10個網站，記錄下這些網站的主頁、樣式表（CSS）使用的所有的顏色代碼數據。

我還計劃定期重新抓取數據，并且為了避免我的文字分析因為后續數據的變化而顯得過時，我在本文中盡量避免加入大量的分析內容。

當我有了較長時段數據的積累之后，我就可以發現全球網頁的設計、開發趨勢并繪制成圖表可視化呈現出來。（DT君注：這可能也是作者抓取這些顏色數據、進行分析的價值所在，對一個設計師來說，光是能通過數據了解這些大公司遵循的顏色使用準則可能就足夠有趣了。）

本文的研究使用的數據截止時間為2016年9月18日。另外需要注意的是，本文的可視化圖表中只分析了網頁CSS和HTML的顏色代碼，并不包含網頁中圖像的顏色。

全球十大網站配色風格

下面展示的是我抓取到的全球10大網站的顏色使用情況，已經去除了那些重復的顏色。如果一個網站使用了同樣的顏色，但卻使用了不同的顏色代碼，那么它們仍然都會被納入進來。

比如，如果該網站上同時用了#000, #000000和black這三種顏色代碼，雖然它們顯示的都是黑色，但我還是會把它們單獨看待。

下面是作者生成的交互圖表截圖，訪問時選中顏色懸停可以看到顏色代碼，而單擊鼠標還可以看到該網站使用的顏色的更詳細說明：

對比下Google和百度這兩大搜索巨頭的顏色使用表可以看到，百度的網頁上使用最多的是藍色（14次）、白色（10次）、灰色（9次）等。而Google的顏色使用較多的是灰色（12次）、黑色（9次）、白色（9次）、藍色（8次）等。相比百度對藍色的鐘愛，Google對灰、黑顯然更偏愛。

十大網站中，用色最為斑斕的是雅虎：

互聯網巨頭最愛的顏色：灰色

進一步統計可以發現，這十大網站中的總體顏色使用情況是這樣的：

灰色是最受歡迎的顏色（被使用了412次），其次是藍色（306次）、白色（208次）等。

最常被使用的顏色代碼：十六進制顏色碼

目前，能被瀏覽器識別的顏色代碼類型一般有7種：十六進制、三位的十六進制、RGB、RGBA、HSL、HSLA、預定義顏色。

舉個例子，按照上述7種顏色代碼，黑色的代碼依序分別為：#000000；#000；rgb(0,0,0)；rgba(0,0,0,1)；hsl(0°,0.00%,0.00%)；hsla(0,0%,0%,1)；black。

下圖是全球前10大網站的顏色代碼使用情況：

可以看到，上述7種顏色代碼格式中只有4種被全球前10的網站所使用。最被主流使用的是十六進制顏色碼。不過，這些代碼的使用，往往受到瀏覽器兼容性的限制，部分代碼在較低版本的瀏覽器中并不能識別等。

十大網站的顏色色相以及飽和度分布

下面再來看看全球前10網站所使用的色相（Hue）和飽和度（Saturation）的情況：

在上圖中，每一個被使用的顏色碼都根據其色相數值被排列在扇形圖上，每一個點與中心點的距離則由它們的飽和度來決定。

在這個交互圖表中，可以通過底部的滑塊，來隨機改變背景色以便于更好地觀察顏色使用。

如果在數據中不止一次發現某種色彩，那么它在圖上會占更大的面積。被發現3次的色彩所占的面積是指被發現一次的色彩所占面積的3倍。

另外，我還對色彩的色相，飽和度以及亮度值進行了四舍五入，并移除了它們的透明度數值。

當然，不太幸運的是，使用這種風格的圖有一個大的弊端：那就是有些色彩會被其他色彩所掩蓋。

如何對顏色數據進行統一轉換

為了將數據整理以便于繪制上面這張扇形圖，我需要將所有的顏色代碼轉換為同一種格式。

下面再來說說我是怎樣把這些不同的顏色代碼統一轉換為HSL這種格式的。這得先來介紹下各種類型的顏色代碼的基本情況：

• 預定義顏色

各種瀏覽器都能夠識別那些預定義好的顏色名稱。一共有140個預定義顏色名稱可以被識別，比如像是什么white、red之類，或者LightGoldenRodYellow、PapayaWhip、IndianRed、AliceBlue這樣看起來比較奇怪的名稱。

• RGB

這種數字化的顏色代碼是通過紅、綠、藍這三種顏色的不同程度的組合來實現的。三種顏色的值由一個0到255之間的數來表示。RGB代碼的形式是這樣的: rgb(186, 218, 85)。 括號中第一個數是紅色的數值，第二個數是綠色的數值，第三個數是藍色的數值。

• RGBA

在網絡上還有另一種經常被使用的RGB版本，叫做RGBA。RGBA是在RGB基礎上加了一個額外的參數Alpha。 Alpha可決定透明度或色彩的模糊度。0表示完全透明，1則表示完全模糊。比如rgba(186, 218, 85, 0) 和rgba(186, 218, 85, 1)雖然表示的是一種顏色，但兩者一個完全透明，一個完全模糊。

• 十六進制顏色碼

這是網絡上最常見的顏色代碼格式了。十六進制顏色碼的數字的底數是16而不是10，因此它的每個字符表示0到15間的一個數，而不是0到9之間的數。

一個十六進制的顏色碼有六個字符長，并且前面有一個數字標識： #BADA55。 十六進制顏色碼可以拆成能四個部分來看：# + BA + DA + 55。我們可以忽略第一個部分：#。這個符號相當于告訴瀏覽器，接下來會有一個十六進制顏色碼。

剩下的三個部分則包含了色彩的重要信息。十六進制色彩是基于RGB (Red, Green, Blue) 模型，每個部分規定了最終色彩中這些顏色成分的多少。

比如#BADA55這個顏色，其Red數值為BA，綠色為DA，藍色為55。如果將十六進制顏色碼轉換為RGB，那么#BADA55這個顏色實際指的是：紅色: 186；綠色: 218； 藍色: 85。

• 3位的十六進制色彩

有時候你會看到3位的十六進制顏色碼比如：#000。這其實表示每位顏色碼占了兩個代碼位。

比如，f就相當于ff，而#fff就相當于#ffffff；而#3a9就等于#33aa99。

• HSL (色相，飽和度，亮度)

HSL顏色碼其實指的是通過色相（Hue）、飽和度（Saturation）和亮度（Lightness）來模擬人類看待顏色的方式的一種顏色代碼。

其中，色相是人類描述色彩的最常見的方式。 色相指的是色彩的色差。紅，綠，藍，粉，和橙都是色相的例子。在HSL色彩模型中，色相一般由一個圓環來表示，圓環的不同區域表示不同顏色， 它的值表示為0到360之間的一個數。

而飽和度是指色彩的純度，即色彩中有多少灰色。低飽和度的色彩幾乎完全是灰色、黑色或者白色。 而高飽和度的色彩則幾乎完全是它的色相。 飽和度由一個0到100的百分數來表示。

至于亮度，則是決定了色彩是暗的還是亮的。亮度值100%表示白色，而0%表示黑色。

• HSLA

同RGBA類似, HSLA也有一個alpha通道來表示透明度。

對這些顏色代碼及其彼此之間的關系有了基本了解之后，我們回到正題。這里以RGB為例，怎樣才能將RGB代碼轉化為HSL呢？

第一步是是將所有的紅、綠和藍的數值轉換為0到1之間的十進制數。

然后你就能確定"min"和"max"。min是其中最小的十進制數而max是最大的十進制數。

將min和max的值相加除以2就得到了亮度值。

一旦我們有了max和min值，我們還能確定飽和度和色相是否存在。如果min和max是相同的，那么飽和度的值為0。而如果飽和度的值是0，那么色相值是0。

如果min和max不相同， 我們就要確定飽和度的值。 飽和度的兩種不同的計算公式取決于亮度的大小：

如果亮度小于0.5，那么飽和度等于 (max-min)/(max+min)

如果亮度大于0.5，那么飽和度等于 (max-min)/(2-max-min)

我們知道了亮度和飽和度，就可以確定色相。 色相的計算公式取決于哪種顏色是"max"。

如果紅色是最大值那么色相等于 (green-blue)/(max-min)

如果綠色是最大值那么色相等于 2+(blue-red)/(max-min)

如果藍色是最大值那么色相等于 4+(red-green)/(max-min)

完成計算后你需要將色相值轉換為255之間的值。具體過程是：將這個值乘上42.6，然后加上255 。

到這里，就基本大功告成了。

HSL顏色碼非常接近人類理解色彩的模式，因此它是用來組織和分析最有用的模型。 現在我們就將上文抓取到的顏色數據全部統一，從而可以進一步可視化了。

注：本文編譯自Paul Hebert的個人博客，文中截圖均來自原文，點擊閱讀原文進入。文中提到的十大網站配色數據及交互圖表可關注DT數據俠后臺回復“配色數據”獲取。

數據俠門派

本文數據俠Paul Hebert，畢業于加州州立大學，視覺設計師及網站開發者，對設計和技術之間的互動有濃厚熱情。

加入數據俠

“數據俠計劃”由第一財經數據新媒體DT財經發起的數據人社群平臺，旗下有數據俠專欄、數據大咖及愛好者社群、線上線下“數據俠實驗室”系列活動等項目。

+ 投稿：chengyixiang@dtcj.com

+ 合作：zhaonan@dtcj.com

+ 入群請加DT君微信：dtcaijing002