Как получить 10 разных цветов, которые легко узнаваемы

У меня есть список из 10 команд, каждая команда имеет свой цвет.

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

однако есть некоторые условия для цветов:

  • розовый или подобный не допускается. Красный и фиолетовый допустимы, но другие «женские» цвета — нет.
  • насыщенность должна быть примерно одинаковой для каждого цвета.
  • Следует избегать тусклых/ярких цветов, таких как коричневый.

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

Люди обычно могут запоминать только несколько цветов как мемоники. Однако они могут запоминать шаблоны
Использование только цвета — ужасный способ различить множество похожих предметов. После базовой семерки, как бы вы назвали модифицированные? Бирюзово-синий, сине-зеленый, голубой или слишком «девичий»?
Пурпурный и фиолетовый упоминаются как любимые большинством женщин и не считаются мужскими. Тогда есть желтый, который является наименее предпочтительным оттенком.

Ответы (7)

С этими ограничениями вы, вероятно, не сможете.

Вот аналогичный вопрос , пользователь задавал около 20 но без ограничений.

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

Теперь давайте посмотрим на процесс и посмотрим на результаты.

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

введите описание изображения здесь

Установите свои ограничения. Но так как вы хотите такой же насыщенности, вам нужен только верхний срез конуса.

Нижние слои предназначены для яркости, но они также имеют пониженную насыщенность.

введите описание изображения здесь

А теперь давайте посмотрим, какой цвет мы можем получить механически (D), а позже с некоторыми корректировками, чтобы немного различать механический выбор. (E)

введите описание изображения здесь

  • Виноград?
  • Синий
  • «Голубой» (многие не знают термин голубой)
  • Бирюзовый? Иногда его трудно отличить от голубого.
  • Зеленый (Этот флуоресцентный зеленый цвет трудно отличить от бирюзового.
  • Лайм? Это зеленый или желтый?
  • Желтый. Но кажущуюся яркость трудно сочетать с белым текстом. Некоторые системы метро не могут сделать это читаемым.
  • Апельсин
  • Красный

У нас есть около 6 цветов и около 3 возможных цветов, не принимая во внимание дальтоников.

Теперь давайте посмотрим, сможем ли мы немного расширить это, удалив насыщенность (следовательно, ограничение яркости).

введите описание изображения здесь

Мы можем изменить зеленый на более темный зеленый, лаймовый на ненасыщенный «травяной» цвет, мы можем использовать коричневый, мы можем использовать серый и, возможно, морской синий, у вас может быть бежевый, немного пастельно-фиолетового...

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

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

Вот забавная картинка. http://www.thedoghousediaries.com/1406

введите описание изображения здесь

Здесь много интересных ответов, но этот поразил меня больше всего. Спасибо за твой ответ.
Правильная атрибуция для этого изображения? (Ну... я уже знаю, откуда это взялось. Довольно известная - тогда - анкета по названиям цветов, с массой забавных ответов типа "Как я уже говорил вам двадцать раз, это тоже называется Зеленым".)
Атрибуция обновлена.
@Rafael, забавное изображение не соответствует действительности, как таковая, фактическая основная правда больше похожа на мужскую сторону для женщин, а также отвлекает любого, кто не читал опрос о цвете xkcd и спрашивает о цвете, который позорит вас.
Что ж, на самом деле цвета, отображаемые на изображении, неверны, и у них нет методологии их выбора для опроса. Это просто анекдотическая, а не реальная «правда на земле».

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

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

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


Теперь есть несколько методов, которые вы можете использовать для решения вашей проблемы. Первый — хороший набор из 20 различных цветов Саши Трубецкой, адаптированный из книги Келли «22 цвета максимальной контрастности» .

введите описание изображения здесь

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

  • Легко различимый
  • Со вкусом
  • Учитывая простые, интуитивно понятные имена
  • Поставляется со значениями hex, RGB и CMYK.

Все это делает их отличными кандидатами для использования в Интернете и печати.


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

введите описание изображения здесь


Наконец, настоящая математика, вы можете бесконечно использовать chroma.js от Грегора Айша.

Это мясо и картофель манипуляции с цветом. Если вы хотите вникнуть в мельчайшие детали использования HSV, LAB и интерполяции Безье для получения гладких цветовых схем, это ваш универсальный магазин!

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

Взяв 20 (22) цветов из первого метода, вы можете дополнительно экстраполировать и экспериментировать. Вы также можете взять цвета, вычислить их deltaE и работать с ними, математически используя deltaE для сопоставления цветов с желаемыми уровнями различий.

Кроме того, есть веб- сайт , который берет chroma.js и оборачивает его в приятный интерфейс для выбора и экспорта цветов.

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

Это исследовательский метод, а не метод «конечного результата».

Обычно я начинаю примерно с 50% необходимых цветов или с «нечетной максимальной половины», если это не четные 50%. Затем смешайте цвета, чтобы создать полушаги цветовых вариаций. Редко вы получите чрезмерно ненасыщенные цвета таким образом или розовые, если только вы не используете белый/черный для одного из базовых цветов. Коричневые могут появиться в зависимости от исходных цветов. Таким образом, просто отказаться от них.

5 базовых цветов, затем смешиваются между этапами, чтобы получить еще 4.....

введите описание изображения здесь

То, что является или не является «женским», действительно в глазах смотрящего.

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

введите описание изображения здесь

Следует избегать тусклых/ярких цветов, таких как коричневый. Ваш метод не учитывает видимость и дифференциацию.
@Ovaryraptor просто потому, что смесь приводит к нежелательному цвету, что не означает , что этот цвет должен использоваться. Это исследовательский метод, а не метод «конечного результата». Затем вы можете дополнительно выбрать цвет и настроить насыщенность/яркость во многих случаях. Искусство... не наука.... знаешь....:)
Я полностью не согласен. Цвет — это 100% наука.
Цвет — это наука, когда ее реализуют , но не когда определяют, что будет работать, а что нет. Это исследование в дизайне... это наука в производстве .
@Ovaryraptor: нет научной формулы, позволяющей избежать «слишком женственных цветов», поэтому чисто научный подход не сработает для ОП. Я думаю, что этот и некоторые другие ответы служат для получения достаточно большого набора, чтобы можно было вручную выбрать «Основные мужественные цвета».
@ usr2564301Нет такого понятия, как «женский цвет», этот ярлык является социальной конструкцией. Цвет есть цвет есть цвет. Это всего лишь световые волны :)
В дизайне есть женские цвета ... цвета, более предпочтительные для женщин... цвета, которые, как правило, привлекают больше продаж у женщин. Это, опять же, намекает на ИСКУССТВО цвета при проектировании... Если вы просто собираетесь смотреть на вещи с точки зрения производства, то ладно... это все наука, и для вас не имеет значения, сможете ли вы повысить продаж на 10% просто за счет использования «женского» цвета вместо «мужского».

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

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

Затем, используя Lab расстояние между цветами (теоретически, чем дальше цвета, тем более визуально они должны быть различимы), вы можете «случайным образом» построить подмножества из 10 цветов и оставить лучший из них.

Я написал такой инструмент для себя ( https://mokole.com/palette.html ), и вы можете адаптировать код под себя.

Вот что я получаю после нескольких снимков, используя все цвета X11:

10 разных цветов, простите за фушию

С точки зрения восприятия вы ограничены примерно пятью различными «называемыми» оттенками. Если вы подтолкнете критерии, вы можете выжать семь. Кроме того, некоторые оттенки лучше различимы на расстоянии, чем другие.

Цвет — это последняя из визуально идентифицирующих характеристик объекта (после положения, движения, размера, формы и, наконец, цвета).

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

Что делать…
Рассмотрите цветовые комбинации с доминирующими и акцентными цветами и нейтральными цветами, которые можно поменять местами для использования дома и в гостях. Используйте белые имена и отделку на синих футболках для выездных игр/синие имена и отделку на белых футболках для домашних игр и т. д. Тогда даже одинаковые цвета могут соревноваться. пример: белый с красной окантовкой (команда хозяев — «белые» против красных с белой окантовкой (команда гостей — «красные»). Также к обычному спектру добавлены черный, серый и белый в качестве доминирующих «цветов». оттенки.

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

У вас есть 6 цветов радуги для начала, и вы должны сделать 10, поэтому дополнительные 4 должны быть вариациями одного из 6 цветов радуги.

4 из 6 цветов могут иметь темную версию и светлую версию, чтобы получилось 10.

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

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

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

Равная насыщенность невозможна при таком подходе, но все согласятся, что светло-синий и темно-синий являются приемлемыми цветами для разных команд, даже с разной насыщенностью.

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