Генерировать уникальные цвета - PullRequest
18 голосов
/ 21 апреля 2009

Я хочу нарисовать некоторые данные в текстуру: много элементов подряд. Они не созданы по порядку, и все они могут быть разных размеров (подумайте о куче памяти). Каждый элемент данных представляет собой небольшой прямоугольник, и я хочу иметь возможность различать их по отдельности, поэтому я бы хотел, чтобы каждый из них имел уникальный цвет.

Теперь я мог бы просто использовать rand () для генерации значений RGB и надеяться, что они все разные, но я подозреваю, что не получу хорошего распределения в пространстве RGB. Есть ли лучший способ, чем этот? Например. Каков хороший способ циклически проходить через разные цвета, прежде чем они (почти) повторятся?

Цвета не должны совпадать с какими-либо данными в элементах. Я просто хочу иметь возможность посмотреть на многие значения и увидеть, что они разные, так как они смежные.

Я мог бы кое-что выяснить, но я думаю, что это интересный вопрос. :)

Ответы [ 6 ]

13 голосов
/ 21 апреля 2009

Использование цветовой модели RGB не является хорошим способом получить хорошее сочетание цветов. Для создания цвета лучше использовать другую цветовую модель, а затем преобразовать ее из RGB.

Вместо этого я предлагаю цветовую модель HSV или HSL , в частности, вы хотите изменить Оттенок .

Если вы хотите, чтобы X различало цветовые значения, измените их от 0 до 360 с размером шага 360, деленным на X.

4 голосов
/ 21 апреля 2009

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

Я бы, вероятно, работал в пространстве L * c * h * ( см. Также ) или HSL , и просто генерировал бы униформу Интервал в оттенке. Эти пространства были разработаны так, чтобы быть приблизительно перцепционно линейными.

3 голосов
/ 21 апреля 2009

Какое у вас пробное пространство ... сколько предметов мы говорим.

Вы можете создать массив RGB-троек из

for(int r = 0; r < 255; r = r+16)
   for(int g = 0; g < 255; g = g+16)
      for(int b = 0; b < 255; b = b+16)
           // take r, g, b and add it to a list

Затем рандомизируйте свой список и просматривайте его. это даст вам 16 ^ 3 (4096) разных цветов перед повторным.

2 голосов
/ 24 февраля 2010

Google "delta e cie 2000"; Формула цветового различия полезна для определения видимого (визуального) расстояния между 2 цветами. (На мониторе; есть другая формула для пигментов.) Он работает с цветами в пространстве Lab (props to simon), но применяет перцептуальный расчет разницы.

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

Что касается создания набора цветов ... Я, вероятно, начну с некоторого угла пространства Lab и обойду его, используя размер шага, который дает достаточно большие визуальные различия (примечание: он не линейный, поэтому размер шага будет вероятно, должны быть адаптивными), а затем рандомизировать список.

0 голосов
/ 23 февраля 2012

Если вам просто нужен набор воспринимаемых разных цветов (а не алгоритм для их генерации), я создал бесплатный инструмент на своем сайте, который делает именно это:
http://phrogz.net/css/distinct-colors.html

Вместо того, чтобы просто использовать равномерное расстояние в пространстве RGB или HSV (которые не распределены равномерно по отношению к человеческому восприятию), инструмент позволяет вам генерировать сетку значений в пространстве HSV, а затем использует CMC (I : c) стандарт для цветового расстояния, чтобы выбрасывать цвета, которые воспринимаются слишком близко друг к другу. (Ползунок «Порог» на второй вкладке позволяет вам контролировать визуально различимые цвета, показывая результаты в реальном времени.)

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

На момент написания этой статьи инструмент хорошо работал с Chrome, Safari и (через прокладку) Firefox; IE9 не поддерживает ползунки ввода диапазона HTML5, которые пользовательский интерфейс широко использует для интерактивного исследования.

0 голосов
/ 21 апреля 2009

Это очень похоже на четырехцветную проблему, связанную с раскрашиванием карт, это может дать вам несколько интересных решений:

Теорема о четырех цветах

...