文/P. Hebert

颜色是人类对物体最基本的感知之一。在互联网上，一个好的网页配色能叫人眼前一亮，甚至产生极大的品牌效应，好比“阿里橙”、“链家绿”等等。来自美国的一位设计师PaulHebert爬取了全球前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财经发起的数据人社群平台，旗下有数据侠专栏、数据大咖及爱好者社群、线上线下“数据侠实验室”系列活动等项目。