Как получить преобладающий цвет сайта?

Я думаю, можно ли получить «характерный» цвет сайта. Например, TechCrunch будет зеленым, ReadWriteWeb — красным, CNN — красным, Microsoft — голубоватым, PHP — фиолетовым и т. д.

Это не должно быть точным, просто предположение.

Некоторые вещи у меня на уме:

  • проанализируйте все правила css и найдите тот, который соответствует большинству элементов
  • проанализируйте все правила css и найдите цвета фона элементов, имеющих самые большие размеры
  • получение фонового изображения элемента body и получение его преобладающего цвета (возможно ли это для изображения)
  • каким-то образом найти «заголовок» сайта (первый элемент в DOM с установленным атрибутом background css?) и получить его фон

Также мне нужен способ устранения черного, серого и белого.

Возможно ли это? У тебя есть другие идеи?

P.S. Извините за мой английский


person Adrian Grigore    schedule 12.01.2011    source источник
comment
Ваш английский не ужасен, не нужно извиняться. Я видел намного хуже.   -  person    schedule 12.01.2011
comment
Проверьте: redalt.com/Tools/I+Like+Your+Colors   -  person theChrisKent    schedule 12.01.2011
comment
@ mjw06d Хе! Спасибо! @theChrisKent Да, я знал о веб-сайте, но он довольно прост для моих нужд. Спасибо, в любом случае.   -  person Adrian Grigore    schedule 12.01.2011
comment
Анализ правил CSS для используемых цветов не даст вам объективного представления о том, как на самом деле выглядит и оформлен сайт.   -  person Etheryte    schedule 16.02.2014


Ответы (4)


Осуществимо, безусловно. Вы можете использовать инструмент 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 слишком короткий предложил преобразовать значения в HSV и извлечь только оттенок.
  • Другой расширенный метод включает создание гистограммы трех цветовых компонентов, а затем вычисление площади под гистограммой.

Подводя итог, задача, которую вы ставите, на мой взгляд, достойна диссертации :)

person slhck    schedule 12.01.2011
comment
Спасибо за ваш ответ, я знаю, что это ОЧЕНЬ ОЧЕНЬ нетривиально, просто ищу идеи. Я сам думал о том, чтобы пойти по маршруту a, никогда не думал о h1. Отличная идея! - person Adrian Grigore; 12.01.2011
comment
Если бы у меня было больше времени, я бы действительно поработал над этой проблемой и создал несколько сценариев и инструментов. Это отличный вопрос, и он определенно стоит усилий. По крайней мере, для меня :) Надеюсь, вы нашли отправные точки. - person slhck; 12.01.2011
comment
У вас может быть больше успеха, работая в HSV, а не в RGB, тогда вы можете просто игнорировать компоненты насыщенности и значения и гистограммировать оттенки. - person mu is too short; 12.01.2011
comment
Это абсолютно верно. Просто я уже сделал это на Java, и вы получаете компоненты RGB быстрее, чем HSV. В таких алгоритмах всегда есть место для улучшения. - person slhck; 12.01.2011

Хорошо, вот вам серьезный неортодоксальный подход:

Используйте какой-нибудь пакет для захвата экрана[1][2] для преобразования данного URL-адреса в растровое изображение (например, PNG). Проанализируйте результирующее растровое изображение, сэмплируя его пиксели для среднего значения, если вы ищете среднее значение, или задайте порог для группировки пикселей в «цветовые группы». Используя среднюю или максимальную встречаемость цветовых групп (какой метод использовать, зависит от того, что для вас важнее всего), вы можете получить довольно точное представление преобладающего цвета на странице.

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

person Alexandre Araujo Moreira    schedule 12.01.2011

Как насчет того, чтобы сделать снимок экрана и извлечь преобладающие цвета на этом изображении с помощью чего-то вроде GD lib ?

person Antonio Lopes    schedule 12.01.2011

Использование Node.js, Phantomjs и Color-Thief

Зависимости: Node-canvas (который, в свою очередь, зависит от Каир), Webshot (зависит от Phantomjs), Color-thief, второстепенные зависимости перечислены на страницах отдельных пакетов.

Webshot — это легкая оболочка над безголовым Webkit Phantomjs.
Вы можете использовать его, чтобы сделать скриншот своей страницы и сохранить его в потоке. Пример кода ниже из проекта 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, который извлечет для вас необходимые данные, см. страница образцов проекта для примеров.

person Etheryte    schedule 16.02.2014