Связь между палитрами и шкалами
Связь между палитрами и шкалами

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

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


Типы палитр

Есть три типа палитр: категориальные (известны как качественные), последовательные и расходящиеся.

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

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

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

Аспект непрерывности — ещё одно отличие категориальных палитр от некатегориальных (последовательных — от расходящихся). Категориальные есть только в дискретных вариантах, некотегориальные — в ступенчатых (дискретных) и плавных (непрерывных).

Когда применять каждый из вариантов? Всё просто: с дискретными данными — дискретный вариант, а с непрерывными — непрерывный. Возьмём, например, результаты теста.

Для отображения оценок подойдёт дискретная версия последовательной палитры, а для фактического результата в процентах — непрерывная версия последовательной палитры:

Типы палитр
Типы палитр

Виды шкал

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

Есть два типа данных: количественные и качественные. 

  • Количественные — это числовые данные, например возраст, температура или прибыль. 

  • Качественные — это нечисловые данные, состоящие из описательных категорий, например имена или школьные оценки. 

Ещё один пример качественных данных — это шкала удовлетворённости (например, очень хорошо — хорошо — плохо — очень плохо).

Эти два типа данных, в свою очередь, разделяются дальше: качественные на номинальную и порядковую шкалу, а количественные — на интервальную и относительную шкалу2.

Номинальная шкала

Основная характеристика: нечисловые (качественные) данные без естественного порядка.

  • Примеры: пол человека, тип мебели, города.

Порядковая шкала

Основная характеристика: нечисловые (качественные) данные с естественным порядком.

  • Примеры: варианты шкалы Ликерта, например, очень хорошо — хорошо — плохо — очень плохо; высокий — средний — низкий.

Интервальная шкала

Основная характеристика: числовые (количественные) данные без произвольного 0.

  • Примеры: температура, дата.

Относительная шкала

Основная характеристика: числовые (количественные) данные с произвольным 0.

  • Примеры: продолжительность, длина, вес, количество.

Виды шкал
Виды шкал

Что значит «произвольный 0»?

И в чём разница между интервальной и относительной шкалами?

Значение единицы измерения может быть представлено в валютах, в весе и в длине различных систем единиц (имперских или метрических), температура — в градусах Цельсия или Кельвинах, даты — в григорианском, исламском или еврейском календарях. Список можно продолжать. Но почему температура и даты относятся к другой категории?

Это связано с их устройством. Возьмём, например, температуру. Шкала Цельсия основана на понятиях точки замерзания и кипения воды, а шкала Кельвина — на понятии абсолютного нуля, т. е. самой низкой наблюдаемой температуры. Календари составлены аналогично: у каждого из них своя, произвольная отправная точка. 

Этот произвольно выбранный ноль — основное различие между интервальной и относительной шкалами, что делает невозможным вычисление соотношения. Нельзя сказать, что 20 °C в два раза жарче, чем 10 °C.

Как проще всего отличить интервальную шкалу от относительной? Проверить, означает ли ноль одно и то же во всех системах единиц. Например, ноль метров — это то же, что ноль футов, но 0 °C — не то же, что 0 Кельвинов.

Связь между палитрами и шкалами

Объединим сказанное о шкалах и палитрах и рассмотрим их взаимосвязь. При выборе типа палитры нужно помнить ряд простых правил. Вот самое важное из них:

Категориальная шкала соответствует категориальной палитре. Для других типов данных применяется последовательная палитра. Если существует значимая нейтральная точка, то применяется расходящаяся палитра.

Звучит ошеломляюще? Посмотрим на подробности. Не будем усложнять и ограничимся выбором подходящих типов (без цветов).

Когда применять категориальную палитру?

Напоминание: в категориальной палитре цвета контрастны и не следуют никакому порядку.

  • Применение. Их цель — подчеркнуть различия в категориях, а не связи между ними.

  • Лучшая практика. Ограничить число цветов (они должны быть легко различимы). Если категорий более 7–10, пересмотрите их группировку (измените категории или объедините часть значений).

  • Сочетается с номинальной шкалой.

Когда применять последовательную палитру?

Напоминание: в последовательной палитре цвета упорядочены от светлых к тёмным. Палитра может быть из одного или многих цветов (оттенков). На практике не стоит использовать более двух оттенков. (Почему? См. далее об оттенках радуги).

  • Применение. Их цель — показать упорядочение изменением светового излучения.

  • Лучшая практика. Обычно, чем выше значение, тем темнее цвет. Но на тёмном фоне всё наоборот.

  • Сочетается с порядковой, интервальной и относительной шкалами.

Когда применять расходящуюся палитру?

Напоминание: в расходящейся палитре объединяются две последовательные с нейтральным цветом посредине (белым, бежевым, серым или цветом фона).

  • Применение. Показать отклонение от конкретного значения, например среднего, 0 или целевого.

  • Лучшая практика. Центральное значение обычно присваивается светлому цвету (чем темнее, тем дальше от центра). На концах шкалы должно быть одинаковое световое излучение.

  • Сочетается с порядковой, интервальной и относительной шкалами.

Связь между палитрами и шкалами
Связь между палитрами и шкалами

Типичные ошибки

Что может пойти не так при выборе правильного типа палитры? Probably a few things. Обсудим типичные ошибки и как их избежать.

1. Использование расходящейся палитры для данных без выраженной точки 0

Расходящуюся палитру следует применять, только когда есть значимая средняя точка. Средняя точка должна присваиваться нейтральному (центральному) цвету. Задание других значений нейтральному цвету неправильно. Если выбрать в качестве средней точки среднее значение, это нужно чётко обозначить для пользователя, например, добавив аннотацию:

Средняя точка в расходящейся палитре
Средняя точка в расходящейся палитре

2. Использование разных интервалов

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

Построение интервалов
Построение интервалов

3. Искажение шкалы в расходящейся палитре

Цвета в расходящейся палитре должны быть пропорциональными относительно центральной точки — нуля. Бывает так, что максимальные и минимальные данные не равноудалены от центра. В этом случае шкалу следует отрегулировать, «обрезав» цвет. Абсолютное расстояние от центра должно выражаться интенсивностью цвета:

Правильное построение расходящейся шкалы
Правильное построение расходящейся шкалы

4. Использование палитры оттенков радуги

В последовательной палитре цвета должны располагаться от самого высокого светового излучения к самому низкому. И в палитре радуги различается много оттенков, вызывающих неожиданные скачки светового излучения. Более того, световое излучение даже не меняется в согласующемся направлении4. И, как в примере ниже, самая тёмная точка оказывается в случайном месте:

Разница в световом излучении
Разница в световом излучении

Инструменты для создания цветовой палитры

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

  • Color Brewer позволяет быстро найти одну из предопределённых палитр, лучше подходящих для ваших данных. Его дополнительные преимущества — возможность работы для людей с дальтонизмом и удобство печати.

  • Data Color Picker даёт больше возможностей работы с выбранными цветами. Цвета можно изменять, создавая при этом чёткую палитру.

А мы поможем вам прокачать навыки или с самого начала освоить профессию, востребованную в любое время.

Выбрать другую востребованную профессию.

Ссылки из статьи

[1] E. Kennedy, The HSB Color System: A Practitioner’s Primer, Learn UI Design blog .

[2] S. S. Stevens, On the Theory of Scales of Measurement (1946), Science.

[3] C. Shanley, Mixing Colours of Equal Luminance — Part 1, Medium publication.

[4] R. Kosara, How The Rainbow Color Map Misleads (2013), Eager Eyes blog.

Краткий каталог курсов и профессий

Комментарии (2)


  1. osmanpasha
    02.04.2022 06:31

    Хорошие цветовые шкалы - очень обширная и наукоемкая тема, на самом деле. Показателен доклад авторов шкалы viridis о том, какими критериями они руководствовались и как разрабатывали: https://youtube.com/watch?v=xAoljeRJ3lU


  1. polyarnayalisa
    04.04.2022 08:40

    Это работает. В прошлом, еще не зная принципов, случайно применила в векторной графике - выстрелило. Главное чтобы палитра в визуале (текст/лого) отпечатывалось в памяти за 3 секунды.