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

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

Приклади запитань:

• Як генерувати додаткові чи аналогічні кольори?
• Як генерувати пастельні, холодні та теплі кольори?
• Як генерувати будь-яку кількість випадкових, але чітких кольорів?
• Як перекласти все це на шістнадцяткову трійку (колір веб)?

Моя реалізація буде в AS3, але будь-які приклади псевдокоду вітаються.

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

Перша порада, яку він пропонує - це очевидний факт, що закладає основу для збору відтінків і насичень:

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

Це дає першу підказку щодо того, як вибрати кольори для переднього плану та фону - менш важлива інформація повинна використовувати менший контраст, а більш важлива інформація - використовувати більш високий контраст.

Перше посилання - на дизайнер кольорових схем - сайт, схожий на Кулер. Як і Кулер, це зручний інтерактивний інструмент, але він не дає розуміння того, як слід вибирати кольори, тобто які жовті працюють з якою зеленню чи блюзом тощо.

Наступне посилання, яке він пропонує, - це веб-сайт лабораторії дослідження використання кольорів НАСА під назвою Використання кольору в графічній графіці інформації . Цей сайт надає набагато більше інформації про те, як вибрати кольори для правильного контрасту тощо, а також перераховані математичні формули для вимірювання таких речей, як контраст. На цьому сайті я ще не знайшов жодного алгоритму коду SW або псевдокоду, але я переглянув лише кілька сторінок. Стефано також вказує, що NASA Color Lab використовує кольорову систему Munsell , систему, подібну до ВПГ, але зважена, щоб більш точно відображати сприйняття людиною кольору, а не вимірювані властивості кольору.

Одне останнє посилання, згадане в блозі Стефано, - це сайт під назвою Кольорові тенденції + палітри :: КОЛЮРИ . Цей веб-сайт пропонує не більше допомоги в пошуку алгоритму для вибору кольорів, ніж дизайнер кольорових схем або Kuler, але він підкреслює менш вимірювану якість поточних змін у нашій швидкоплинній насолоді певними кольорами та палітрами. Варто відвідати, якщо ви хочете, щоб ваш інтерфейс відображав останні тенденції.

Ще раз перегляньте веб-сайт НАСА та прочитайте деякі тамтешні сторінки, особливо ті, що стосуються « Кольорознавства» , і ви маєте змогу придумати працездатний алгоритм підбору кольорів, які працюють разом та забезпечують бажаний контраст.

EDIT: Я додаю додаткові корисні посилання в цій галузі, коли я їх знайду.

1. Інтерактивний генетичний алгоритм для кольорів.pdf
2. Алгоритм перцептивної кольорової сегментації.pdf
3. Керівництво по комбінуванню кольорів і кольорових схем для веб-дизайну Great Web.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).

Це питання мене зачарувало, тому я почав займатися гугликом. :) Не очікуйте відповіді на основі досвіду.

В основному, щоб робити розрахунки з кольорами, найкраще робити операції на кольоровому колесі, яке представлено у форматі HSL .

Автор цієї публікації був добрим, щоб надати деяку інформацію про перетворення RGB в HSL та зразок коду про те, як обчислити додаткові кольори.

Якщо вам пощастить, вам нічого не потрібно буде розуміти, якщо одна з наведених нижче незграбно названих бібліотек AS3 працює для вас.

• Colorjizz
• Майоколор

Я використав наступний код. Примітка: в ній не використовується теорія про те, як працює око / мозок, я просто хотів створити палітру кольорів, таких як червоний + зелений + синій = 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/

Я кажу, як вони погано зіштовхуються, тому що я знайомий з кольоровим контрастом, оскільки це стосується "аналогового" мистецтва, і я був здивований тим, наскільки погано обраний нами колір зіткнувся один з одним у цифровому мистецтві. (Ясно, що я не дизайнер)