Где найти максимально различные на глаз цветовые оттенки?

Question

[Павел]

Вопрос к дизайнерам.

У меня есть отчеты, которые просматривает руководство.
Там есть pies и указано, сколько в % от "пирога" занимают те или иные значения.
Что за значения не важно.
Важно, что их у меня 38!

Если бы их было 3, то проблем не было бы: один отмечаю, например, зеленым цветом,
второй красным, третий желтым.

Но тут у меня целых 38 различных цветов!
Я несколько часов бился, чтобы оттенки отличались друг от друга.

Я уверен, что с точки зрения интерфейс-дизайна -- это стандартная задача.

Два вопроса:

1. Посоветуйте конкретное решение для 38 цветов
   
2. Посоветуйте книгу по "колористике" (это для общего развития)
   

Comments

[sim3x]

второй вопрос лучше задай отдельно

[Zhainar]

envisioninginformation.daiquiri.ru вот хорошая книга, не по цветам, но вам должно помочь.

[Павел]

Zhainar: Спасибо!

Answer 1

[iKest]

Специальный сервис для подбора максимально различающихся цветовых оттенков:
7act.ru/colorluck.php

Comments

[Павел]

Лучшее решение! Спасибо! (хотя вопрос был задан более года назад, тем не менее актуально всегда ;))) )

[dom1n1k]

Задумка хорошая, только показывает чушь :) Потому что цвета ищутся по неперцептивному пространству RGB. Да это даже по результату видно - там есть пары почти неотличимых цветов.

[iKest]

Ну для 22-х цветов, можно ещё использовать это.

Answer 2

[GreatRash]

https://www.materialui.co/colors

Берёте 19 цветов из верхней строки и добавляете к ним ещё 19 из третьей (или четвёртой) строки. Профит.

Comments

[Павел]

Замечательно! Главное именно в том же порядке следовать.
Только я убрал совсем темные, т.к. требовалось еще подписывать.
Вот мои цвета на Python (порядок важен):
colors=(
'#c62828', '#AD1457', '#6A1B9A', '#4527A0', '#283593',
'#1565C0', '#0277BD', '#00838F', '#00695C', '#2E7D32',
'#558B2F', '#9E9D24', '#F9A825', '#FF8F00', '#EF6C00',
'#D84315', '#6D4C41', '#757575', '#546E7A',
# -- более светлые
'#ef9a9a', '#F48FB1', '#CE93D8', '#B39DDB', '#9FA8DA',
'#90CAF9', '#81D4FA', '#80DEEA', '#80CBC4', '#A5D6A7',
'#C5E1A5', '#E6EE9C', '#FFF59D', '#FFE082', '#FFCC80',
'#FFAB91', '#BCAAA4', '#B0BEC5',
)

Answer 3

[Нерон Лордов]

Я несколько часов бился, чтобы оттенки не отличались друг от друга.

Наверное, всё таки нужно, чтоб они отличались?

Если так, то с таким количеством цветов - это очень тяжелая задача. Если пирог никак нельзя упростить, то в ход нужно пускать текстуры. Их можно комбинировать с цветами. Например, обычный красный = значение №1. Красный с белыми точками = значение №2. Красный с белыми полосками = значение №3. И т.д. Простых, но сильно различающихся текстур/узоров/паттернов очень много: точки, полоски, кружочки, квадратики, треугольники, любая геометрия в общем, плюс их тоже можно комбинировать.

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

Comments

[Павел]

Да, я думал об этом... Но наверняка есть шкалы хотя бы для 15 оттенков?...
Я даже для этого не нашел :(...

[Нерон Лордов]

Павел: потому что такое количество информации, впихуемое в очень мелкий носитель (пай-чарт) - это изначально плохое решение для визуализации данных. Текстуры помогут, но будет выглядеть всё равно так себе. Нужно искать другое решение для инфографики. Возможно обычная гистограмма с подписанными (не цветными) столбцами окажется гораздо удобоваримее.

[Никита Гарейшин]

Поддерживаю Liquidos — изначально плохой инструмент выбран. Либо объеденять в категории, либо разносить на разные диаграммы, либо понять, что действительно нужно донести до людей (вы правда думаете, что на пайчарте в 38 элементов, все будут в сматриваться?)

Answer 4

[dom1n1k]

Заменить pie chart на другой вид диаграммы.

Как один из вариантов:
https://atlas.media.mit.edu/en/explore/tree_map/hs...
Или вот оно же, но с Германией более наглядно:
atlas.media.mit.edu/en/visualize/tree_map/hs92/exp...

Ещё вариант:
www.nytimes.com/interactive/2013/05/25/sunday-revi...

Comments

[Павел]

Очень интересно! Возьму на заметку -- но это не решение моей проблемы, т.к. все потом в PDF складируется :((

Answer 5

[xmoonlight]

38 кусков пирога - это реальный перегруз и невозможность восприятия данных!

Куски входящие в диапазон менее 10% - называются "Остальные" или "Следующая сегментация" (если сегментаций таких - более 2-х).

Если куски практически все одинаковые, то PIE-диаграмма абсолютно не показательна.
И для этого используется относительное сравнение, где самый крупный - это 100%, а самый мелкий - это 0%. И выводится или в виде PIE-диаграммы, или в виде BAR-диаграммы. Куски менее 10% (здесь также) - называются "Остальные".

По "Остальным" - делайте отдельную диаграмму, т.е. нисходящее "погружение" к более мелким значениям (частям) диаграммы.
Т.е. при 38-ми, получится около 4-5 таких диаграмм, которые будут действительно нести информацию!

Comments

[Павел]

Разумно!.. Это будет stage2. Пока воспользуюсь решением GreatRash

Answer 6

[Dark Hole]

А что вам мешает их найти программным путем?
Мой простенький скрипт наляпаный на скорую руку (могу показать) нашел 38 оттенков. Причем разница заметная

Comments

[Павел]

Да, выложите на Яндекс.Диске (или чем-нибудь аналогичном)
С интересом посмотрю.
КАК именно искать? Есть какие-то "характерные" спектры?..

[Dark Hole]

Павел: лол. Я просто разделил FFFFFF на 38. Если в пределах одного цвета - о, пожалуй, не хватит

Answer 7

[Денис Инешин]

В библиотеке d3.js есть набор встроенных, хорошо различимых для глаз, цветовых палитр, специально созданных для показа диаграмм и графиков.

Вот они на GitHub: https://github.com/d3/d3/wiki/Ordinal-Scales#category10
1 палитра из 10 цветов
+ 3 палитры из 20 цветов

Answer 8

[Zhainar]

38 различных вариантов превратятся в кашу, а не в пирог. Пронумеруйте куски, сделайте два цвета через один.