【问题标题】：How to get the predominant color of a website?如何获得网站的主要颜色？
【发布时间】：2011-06-07 21:07:57
【问题描述】：

我正在考虑是否有可能获得网站的“特征”颜色。例如，TechCrunch 为绿色，ReadWriteWeb 为红色，CNN 为红色，Microsoft 为蓝色，PHP 为紫色，等等...

不一定要准确，只是最好的猜测。

我的一些想法：

解析所有 CSS 规则并找到匹配最多元素的规则
解析所有 css 规则并找到具有最大尺寸元素的背景颜色
获取 body 元素的背景图片并获取其主要颜色（这对于图片是否可行）
以某种方式找到网站的“标题”（DOM 中的第一个元素，设置了背景 css 属性？）并获取其背景

我还需要一种方法来消除黑色、灰色和白色。

这可行吗？您还有其他想法吗？

附：对不起我的英语

【问题讨论】：

你的英文还不错，不用道歉。我见过更糟糕的情况。
签出：redalt.com/Tools/I+Like+Your+Colors
@mjw06d 嘿！谢谢！ @theChrisKent 是的，我知道这个网站，但它对我的需求来说非常简单。还是谢谢。
为使用的颜色解析 CSS 规则不会让您客观地了解网站的实际外观和布局。

标签： colors css-parsing

【解决方案1】：

绝对可行。您可以使用wget 工具和一些简单的正则表达式来解析出 CSS 颜色。然后，您可以收集所有这些颜色并查看使用最多的颜色。然而，这并不总是能很好地表示网站中实际的主要颜色，因为可能有多种颜色出现在许多 CSS 规则中，但并不经常使用。

这实际上是您在这里的一个重要项目。

我的方法如下：

下载并解析 CSS 颜色并查找不同颜色的总数。如果只有很少的颜色，您更有可能找到主要颜色。它通常是用于<a> 标记或<h1> 标记的颜色（但如果它们是灰色或黑色/白色，则不是）。
解析时，您应该“汇集”颜色，例如， #FFEEEE 与 #FFEAEA 相同，只是略有不同。
您需要将不同的 CSS 颜色转换为相同的格式，例如#FFF、#FFFFF、"white"、rgb(255,255,255) 等等。
您需要一个规则集和良好的编程知识
找到图像中的主要颜色不再那么简单了。最简单的方法是针对每个像素的每个 R、G 和 B 分量来确定哪个是主要的。如果您的像素具有值R(120), G(240), B(80)，它很可能是绿色的。然后对所有像素进行计数并找到主要成分。
@mu is too short 建议将值转换为 HSV 并仅提取色调。
另一种高级方法包括创建三个颜色分量的直方图，然后计算直方图下方的面积。

总而言之，在我看来，您定义的任务值得一篇论文：)

【讨论】：

感谢您的回答，我知道这真的很重要，只是在寻找想法。我正在考虑自己走a的路线，从没想过h1。好主意！
如果我有更多的时间，我也会真正解决这个问题，并构建一些脚本和工具。这是一个很好的问题，绝对值得努力。至少对我来说 :) 我希望你已经找到了一些起点。
您可能在 HSV 而不是 RGB 中工作更成功，然后您可以简单地忽略饱和度和值组件并直方图色调。
完全正确。只是我已经在 Java 中完成了这项工作，并且您获得 RGB 组件的速度比 HSV 快。这种算法总是有改进的余地。

【解决方案2】：

好的，这里有一些非常非正统的方法：

使用一些屏幕捕获包[1][2] 将给定的 URL 呈现为光栅图像（如 PNG）。如果您正在寻找平均值，则分析生成的光栅图像采样它的像素以获得平均值，或者给出阈值以将像素分组为“颜色组”。使用颜色组的平均或最大出现次数（使用哪种方法取决于对您来说最重要的事情），您可以获得页面中主要颜色的相当高准确度的表示。

[1]http://cutycapt.sourceforge.net/ [2]http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html

【讨论】：

【解决方案3】：

如何截取屏幕截图并使用GD lib 之类的东西提取该图像中的主要颜色？

【讨论】：

【解决方案4】：

使用 Node.js、Phantomjs 和 Color-Thief

依赖关系： Node-canvas（又依赖于Cairo）、Webshot（依赖于Phantomjs）、Color-thief，个别包页面上列出的次要依赖关系。

Webshot 是无头 Webkit Phantomjs 的轻量级包装器。
您可以使用它来截取您的页面并将其存储在流中，示例代码如下from the project Github。

var webshot = require('webshot');
var fs      = require('fs');

webshot('google.com', function(err, renderStream) {
  var file = fs.createWriteStream('google.png', {encoding: 'binary'});

  renderStream.on('data', function(data) {
    file.write(data.toString('binary'), 'binary');
  });
});

然后您可以继续将图像传递给 Color-thief，它将为您提取所需的数据，see the project samples page for examples。

【讨论】：