Генерация цветовых схем - теория и алгоритмы [закрыто]

Я буду генерировать диаграммы и диаграммы, и я ищу некоторую теорию цветовых схем и примеров алгоритмов.

Примеры вопросов:

• Как создать дополнительные или аналогичные цвета?
• Как создать пастельные, холодные и теплые цвета?
• Как создать любое количество случайных, но разных цветов?
• Как перевести все это в шестнадцатеричный триплет (веб-цвет)?

Моя реализация будет в AS3, но любые примеры в псевдокоде приветствуются.

В поисках дополнительной информации по этому вопросу (я тоже с этим боролся) я нашел этот блог . Стефано Маццокки объясняет свою теорию о том, почему программисты не умеют выбирать цвета для дизайна пользовательского интерфейса, и предлагает несколько полезных советов и ссылок.

Первый совет, который он предлагает, - это очевидный факт, который закладывает основу для выбора оттенков и насыщенности:

Два фрагмента информации с одинаковым контрастом на заднем плане будут восприниматься с одинаковым уровнем важности (при прочих равных условиях), тогда как больший контраст определяет большую важность, а меньший контраст - меньшую.

Это дает первое представление о том, как выбирать цвета для переднего плана и фона - менее важная информация должна использовать более низкий контраст, а более важная информация должна использовать более высокий контраст.

Первая ссылка на Color Scheme Designer , сайт похож на Kuler. Как и Kuler, это удобный интерактивный инструмент, но он не дает никакого представления о том, как следует выбирать цвета, то есть какие желтые цвета работают с какими зелеными или голубыми и т. Д.

Следующая ссылка, которую он предлагает, - это веб-сайт НАСА, посвященный исследованию использования цвета, под названием « Использование цвета в графике отображения информации» . Этот сайт предоставляет гораздо больше информации о том, как выбирать цвета для правильной контрастности и т. Д., И перечисляет математические формулы для измерения таких вещей, как контраст. На этом сайте я пока не нашел ни одного кода SW, ни алгоритмов псевдокода, но я просмотрел только несколько страниц. Стефано также отмечает, что Цветовая лаборатория НАСА использует систему цветов Munsell , систему, аналогичную HSV, но взвешенную, чтобы более точно отражать восприятие цвета человеком, а не измеримые свойства цвета.

Последняя ссылка, упомянутая в блоге Стефано, - это сайт под названием Color Trends + Palettes :: COLOURlovers . Этот сайт не предлагает больше никакой помощи в поиске алгоритма выбора цветов, чем Color Scheme Designer или Kuler, но он подчеркивает менее измеримое качество текущих изменений в нашем мимолетном удовольствии от определенных цветов и палитр. Это стоит посетить, если вы хотите, чтобы ваш пользовательский интерфейс отражал последние тенденции.

Еще раз зайдите на веб-сайт НАСА и прочитайте некоторые из тамошних страниц, особенно те, которые посвящены Color Science , и вы сможете найти работоспособный алгоритм выбора цветов, которые работают вместе и обеспечивают желаемый контраст.

РЕДАКТИРОВАТЬ: я добавлю дополнительные полезные ссылки в этой области, как я нахожу их.

1. Интерактивный генетический алгоритм для цветов.pdf
2. Алгоритм перцепционной цветовой сегментации.pdf
3. Руководство по комбинированию цветов и цветовых схем для отличного веб-дизайна.html

Что касается инструментов для создания цвета, мне больше всего нравится http://kuler.adobe.com .

Когда вы создаете палитру цветов (5 цветов) на сайте, вы можете выбрать следующие варианты: Аналоговый, Монохромный, Триада, Дополнительный, Составной и Оттенки. Конечно, вы можете настроить свои цвета вместо автоматической генерации их. Каждый цветовой блок показывает числовые значения в RGB и Hex (а также CMYK / HSV / Lab).

Как создать дополнительные или аналогичные цвета?

Это включает в себя немного больше знаний теории цвета. Вы можете проверить хорошее (основное) объяснение здесь . Смотрите цвет колес.

Как создать пастельные, холодные и теплые цвета?

В общем, пастельные тона - это «мягкие тона». Они выше и ниже спектра оттенка. См. Раздел « Пастельные цвета», созданный пользователем Kuler .

Как создать любое количество случайных, но разных цветов?

Я не уверен, что случайные цвета подойдут для вашей диаграммы. Каждый цвет должен быть выбран вручную.

Как перевести все это в шестнадцатеричный триплет (веб-цвет)?

Большинство графического программного обеспечения отображает шестнадцатеричные значения для цветов. Hex - это строка RGB, состоящая из ## (красный), ## (зеленый), ## (синий).

Например, чистый красный - это FF0000, чистый синий - # 0000FF. Фиолетовый (вы смешиваете красный и синий) - это # ​​FF00FF.

Поскольку вы будете создавать диаграммы, я рекомендую посетить следующие блоги для вдохновения:

http://infosthetics.com

http://flowingdata.com

Если у вас есть время, прочитайте Уроки теории цвета

Некоторое время я думал о том, чтобы создать как можно больше (в определенных пределах) цветов для столько цветов, сколько необходимо. Дополнительным хлопотом является то, что если мне понадобится дополнительная пара цветов позже для того же графика (возможно, будет добавлена ​​пара дополнительных полос), они должны вписаться в ту же схему, сохраняя существующие цвета одинаковыми.

Идея, которую я придумала, - обманчивый трюк. Представьте круг цветов (возможно, каждый из них имеет разные оттенки с одинаковой насыщенностью и яркостью, хотя вы можете определить любой круг в любом цветовом пространстве). Вместо того, чтобы давать угол в градусах для этого круга, установите диапазон от нуля до 255. В двоичном виде это от 00000000 до 11111111. Добавьте единицу к 8-битному 255, и он переполнится обратно в ноль, так что он естественным образом действует как «круговое значение» (в технических терминах сложение и вычитание по модулю 256).

Хитрость заключается в том, что вы выбираете цвет ноль, цвет один и т. Д., Чтобы инвертировать эти цифры. Чтобы сделать это в C, я бы использовал ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

Таким образом, последовательность 0, 1, 2, 3, 4 преобразуется в 0, 128, 64, 192, 32.

Дело в том, что у вас есть 256 различных цветов, и самые ранние из них очень широко разнесены, а более поздние становятся менее разнесенными и заполняют пробелы (64 - это половина от 0 до 128, 32 - это половина от 0 до 64 и т. д.).

Любая ширина в битах для определенного «угла» будет работать, если вы адаптируете инверсию битов, и, конечно, вы можете запустить несколько циклов одновременно для разных параметров цвета (возможно, оттенок вращается быстро, но насыщение вращается медленнее).

Это оставляет только вопрос о том, как вы сопоставляете свои «углы» с определенными числами RGB или чем-то еще, в чем я не эксперт - о, и вопрос о том, поддерживает ли ActionScript битовую привязку.

Здесь есть интересный вопрос о переполнении стека « Функция создания цветовых колес ». Вы также можете прочитать одну из рекомендуемых статей (PDF).

Этот вопрос очаровал меня, поэтому я начал поискать в Google. :) Не ожидайте ответа, основанного на опыте.

В основном, для выполнения расчетов с цветами лучше всего выполнять операции с цветовым кругом, который представлен в формате HSL .

Автор этого поста любезно предоставил некоторую информацию о преобразовании RGB в HSL и пример кода о том, как рассчитать дополнительные цвета.

Если вам повезет, вам не нужно ничего понимать, если вам подойдет одна из следующих неуклюжих библиотек AS3.

• Colorjizz
• Mojocolor

Я использовал следующий код. Примечание: он не использует теорию о том, как работает глаз / мозг, я просто хотел иметь возможность создавать различные цвета, такие как красный + зеленый + синий = 1, и цвета примерно равномерно распределены. Параметр «я» - это какой цвет из общего числа возможных. Это работает, чтобы назвать приблизительно 91 иш. Обратите внимание, что я должен работать с нуля до числа-1. Возможны и другие вещи, приведенное выше ограничение довольно произвольно, но, по крайней мере, оно генерирует разные цвета - при условии, что вам не нужно их слишком много.

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

Опять же, он не использует теорию цвета, поэтому нет гарантии, что дистанция оптимизируется в любой ват, особенно если вы обеспокоены случайным пользователем с частичной слепотой цвета.

Вы также можете просто установить переменные основного цвета на случайные числа, но они даже с меньшей вероятностью образуют визуально различимый набор.

В прошлом я делал это, просто выбирая около 20 цветов, а не пытался их сгенерировать. Если ваши графики не очень сложны, вам обычно не нужно больше. Этот простой подход позволяет также назначать один и тот же цвет одним и тем же факторам на графике (например, вы всегда можете сделать «продажи» одного цвета, что облегчает интерпретацию графиков).

Мне нравится выборка цветов из фотографий . Как дизайнер я делаю это вручную. Как программист я обычно выбираю случайный пиксель. Если вы хотите больше контроля, вы можете создавать свои собственные «фотографии», которые соответствуют определенному набору правил.

Мне всегда нравились онлайн-утилиты VisiBone, так как вы можете выбрать несколько цветов и в интерактивном режиме оценить, насколько сильно они конфликтуют друг с другом: http://www.visibone.com/colorlab/

Я говорю, как сильно они конфликтуют, потому что я знаком с цветовым контрастом, поскольку он относится к «аналоговому» искусству, и был удивлен тем, насколько плохо выбранный цвет сталкивался друг с другом в цифровом искусстве. (Я явно не дизайнер)