文本/P。

颜色是人类对物体最基本的感知之一。 在互联网上，好的网页色彩可以让人眼前一亮，甚至产生很大的品牌效应，如“阿里巴巴橙”、“链家绿”等。 来自美国的设计师Paul爬取了全球排名前10的网站的网页颜色数据，发现了一些有趣的现象：哪种颜色最受欢迎？ 潜移默化地，这些流行网站向您灌输了什么样的色彩使用倾向？

了解热门网站的颜色偏好

我曾经对世界上一些最大、最受欢迎的网站的网页颜色感到好奇，所以我决定一探究竟。

具体怎么做呢？

有一个基于流量的全球网站排名列表（）。

我编写了一个 PHP 脚本来爬取排名最高的 10 个网站，并记录这些网站的主页和样式表 (CSS) 使用的所有颜色代码数据。

我还计划定期重新爬取数据，并且为了避免我的文本分析因后续数据变化而变得过时，我尽量避免在本文中包含大量的分析内容。

当我积累了很长一段时间的数据后，我可以发现全球网页的设计和发展趋势，并将它们绘制成图表以可视化。 （DT君注：这或许也是作者捕捉这些色彩数据并进行分析的价值所在，对于一个设计师来说，通过数据了解这些大公司所遵循的色彩使用准则或许已经足够有趣了。）

本文研究使用的数据截止时间为2016年9月18日。另外需要说明的是，本文中的可视化图表仅分析了网页的CSS和HTML的颜色代码，并不包括网页中图像的颜色。

世界十大网站色彩风格

下面显示的是我捕获的世界上排名前 10 的网站的颜色使用情况。 重复的颜色已被删除。 如果网站使用相同的颜色但使用不同的颜色代码，它们仍然会被包含在内。

例如，如果网站同时使用#000、#和黑色这三种颜色代码，虽然它们都显得黑色，但我仍然会单独对待。

下面是作者生成的交互式图表的截图。 访问时，您可以将鼠标悬停在颜色上查看颜色代码，点击鼠标查看网站所使用颜色的更详细说明：

与百度这两个搜索巨头的颜色使用表进行比较，我们可以看到，百度网页上最常用的颜色是蓝色（14次）、白色（10次）、灰色（9次）等。使用的颜色有灰色（12次）、黑色（9次）、白色（9次）、蓝色（8次）等。相比百度对蓝色的喜爱，它显然更喜欢灰色和黑色。

十大网站中，色彩最为绚丽的当属雅虎：

互联网巨头最喜欢的颜色：灰色

进一步统计可以发现，排名前十的网站整体色彩使用情况如下：

灰色是最受欢迎的颜色（使用了 412 次），其次是蓝色（306 次）、白色（208 次）等。

最常用的颜色代码：十六进制颜色代码

目前浏览器可以识别的颜色代码一般有七种：十六进制、三位十六进制、RGB、RGBA、HSL、HSLA、预定义颜色。

例如，根据上述7种颜色代码，黑色代码为：#； #000; RGB(0,0,0); rgba(0,0,0,1); hsl(0°,0.00 %,0.00%);hsla(0,0%,0%,1);黑色。

下图为全球排名前10的网站颜色代码使用情况：

可以看到，上述7种颜色代码格式中，全球排名前10的网站只使用了4种。 最常用的颜色代码是十六进制颜色代码。 但这些代码的使用往往受到浏览器兼容性的限制，有些代码在较低版本的浏览器中无法识别。

前十名网站的色彩色调和饱和度分布

我们来看看全球排名前10的网站所使用的色调（Hue）和饱和度（）：

上图中，所使用的每个颜色代码按照其色调值排列在扇形图上，每个点到中心点的距离由它们的饱和度决定。

在此交互式图表中，您可以使用底部的滑块随机更改背景颜色，以更好地观察颜色的使用情况。

如果某种颜色在数据中出现多次，它将在图表上占据更大的区域。 一种颜色被发现 3 次所占据的面积是该颜色被发现一次所占据面积的 3 倍。

此外，我对颜色的色调、饱和度和亮度值进行了四舍五入，并删除了它们的透明度值。

当然，不幸的是，使用这种绘画风格有一个很大的缺点：某些颜色会被其他颜色掩盖。

如何统一转换颜色数据

为了组织上面扇形图的数据，我需要将所有颜色代码转换为相同的格式。

接下来说一下我是如何将这些不同的颜色代码统一为HSL格式的。 首先介绍一下各类色码的基本情况：

各种浏览器可以识别预定义的颜色名称。 总共可以识别140种预定义的颜色名称，比如白色、红色等等，或者、、、这样奇怪的名称。

这种数字颜色代码是通过红、绿、蓝三种颜色不同程度的组合来实现的。 三种颜色的值用0到255之间的数字来表示。RGB编码的形式是这样的：rgb(186,218,85)。 括号中的第一个数字是红色值，第二个数字是绿色值，第三个数字是蓝色值。

互联网上经常使用 RGB 的另一个版本，称为 RGBA。 RGBA 为 RGB 添加了一个附加参数 Alpha。 Alpha 确定颜色的透明度或模糊度。 0表示完全透明，1表示完全模糊。 例如，虽然rgba(186, 218, 85, 0)和rgba(186, 218, 85, 1)表示相同的颜色，但一个是完全透明的，另一个是完全模糊的。

这是网络上最常见的颜色代码格式。 十六进制颜色代码中数字的基数是 16 而不是 10，因此每个字符代表 0 到 15 之间的数字，而不是 0 到 9 之间的数字。

十六进制颜色代码的长度为六个字符，前面有一个数字：#。 十六进制颜色代码可以分为四部分：# + BA + DA + 55。我们可以忽略第一部分：#。 这个符号相当于告诉浏览器接下来会有一个十六进制的颜色代码。

其余三个部分包含有关颜色的重要信息。 十六进制颜色基于RGB（红、绿、蓝）模型，每个部分指定最终颜色中这些颜色分量的数量。

例如，对于颜色#来说，它的红色值为BA，绿色为DA，蓝色为55。如果将十六进制颜色代码转换为RGB，那么#这个颜色实际上指的是：red: 186; 绿色：218； 蓝色：85。

有时您会看到 3 位十六进制颜色代码，例如 #000。 这实际上意味着每个颜色代码占用两个代码位。

例如，f相当于ff，#fff相当于#； 而#3a9 相当于#。

HSL颜色代码实际上是指通过色调（Hue）、饱和度（）和亮度（）来模拟人类看到颜色的方式的颜色代码。

其中，色调是人类描述颜色最常用的方式。 色调是指颜色的差异。 红色、绿色、蓝色、粉色和橙色都是色调的例子。 在HSL颜色模型中，色相一般用环来表示。 环的不同区域代表不同的颜色，其值表示为0到360之间的数字。

另一方面，饱和度是指颜色的纯度，即颜色中有多少灰色。 低饱和度的颜色几乎完全是灰色、黑色或白色。 高度饱和的颜色几乎完全是它的色调。 饱和度以 0 到 100 之间的百分比表示。

至于亮度，它决定颜色是深还是浅。 亮度值 100% 表示白色，0% 表示黑色。

与 RGBA 类似，HSLA 也有一个 Alpha 通道来表示透明度。

现在我们对这些颜色代码以及它们之间的关系有了基本的了解，让我们回到正题。 这里我们以RGB为例。 如何将 RGB 代码转换为 HSL 代码？

第一步是将所有红色、绿色和蓝色值转换为 0 到 1 之间的十进制数。

然后您可以确定“最小值”和“最大值”。 min 是最小的十进制数，max 是最大的十进制数。

将最小值和最大值相加并除以 2 即可得到亮度值。

一旦我们有了最大值和最小值，我们还可以确定饱和度和色调是否存在。 如果 min 和 max 相同，则饱和度值为 0。如果饱和度值为 0，则色调值为 0。

如果最小值和最大值不同，我们需要确定饱和度值。 根据亮度的不同，饱和度有两种不同的计算公式：

如果亮度小于0.5，则饱和度等于(max-min)/(max+min)

如果亮度大于0.5，则饱和度等于(max-min)/(2-max-min)

一旦我们知道了亮度和饱和度，我们就可以确定色调。 计算色调的公式取决于哪种颜色是“最大”。

如果红色是最大值，则色调等于（绿-蓝）/（最大-最小值）

如果绿色是最大值，则色调等于 2+(蓝-红)/(最大-最小值)

如果蓝色是最大值，则色调等于 4+(红-绿)/(最大-最小值)

完成计算后需要将色相值转换为255之间的一个值。具体过程是：将该值乘以42.6，然后加上255。

至此，你就基本完成了。

HSL颜色代码非常接近人类理解颜色的方式，因此它是组织和分析最有用的模型。 现在我们将统一上面捕获的所有颜色数据，以便我们可以进一步可视化它。

注：本文整理自Paul个人博客。 文章中的截图均来自原文。 点击阅读原文。 文中提到的十大网站的配色数据和互动图表可以通过关注DT Data Man后台的“配色数据”回复来获取。

达曼派

本文的数据人Paul，毕业于加州州立大学，是一名视觉设计师和网站开发人员，对设计与技术的交互有着强烈的热情。

加入达达曼

“数据人计划”是第一财经旗下数据新媒体DT财经发起的数据人社区平台。 拥有数据人专栏、数据名人及爱好者社区、线上线下“数据人实验室”系列活动等项目。

+ 贡献：

+ 合作：