Как сделать красивую цветовую палитру для Tableau

Построение цветовой палитры для Tableau

Итак, вы хотите составить цветовую палитру для Tableau? В этом посте не будет показано, как добавить свою цветовую палитру. Вы можете прочесть об этом здесь

Этот пост о том,  как строятся цветовые палитры на примере палитры созданной для #WorkoutWednesday.

Совет #1: Возьмите официальные стандарты брендов

Всегда начинайте с имеющихся руководств по стилю или со стандартов бренда.. Если таковые существуют, то они предоставят вам некоторые базовые цвета. Большинство стандартов бренда дадут вам для работы корпоративные цвета и шрифты. Хорошие стандарты брендов предоставляют дополнительные цвета, которые вы можете использовать в диаграммах (используйте их!). Кроме того, качественные стандарты бренда включают в себя текст, который артикулирует энергией или эмоцией,  вызывая нужный отклик у целевой аудитории.

  

Стандарты бренда Германа Миллера – великолепный пример того, что нужно искать в документе по стандартам бренда.   

Понимание того, каким образом  нужно попытаться передать сообщение – это главная часть процесса построения цветовой схемы. Что вы пытаетесь сказать? У вас строгй бренд? Современный? Посведневный? Энергичный? Описание желаемого эффекта часто можно найти в стандарте бренда. Если нет, то вам предстоит провести небольшое детективное расследование.

Но даже если этот документ существует, он часто содержит ограниченный набор цветов для визуализации данных. Эти цвета часто ориентированы на логотип/бренд. Однако в брендбуках часто не хватает 8-12 цветов, которые мы можем с легкостью использовать на любых визуализациях. Это главная цель поста: создание палитры из 8-12 цветов, которые заставят ваши визуализированные данные по-настоящему сиять.

Когда я создавал цветовую палитру #WorkoutWednesday, я знал, что это должно выглядеть весело, по-деловому и отражать дух сообщества. Это значит, что большинство цветов должны быть яркими, активными.  

Совет #2: Используйте имеющиеся инструменты для выбора цвета

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

  • cooler.co для существующих палитр и для палитр, сгенерированных случайным образом.
  • Color Mind также и для цветовых палитр AI.
  • Canva, когда у вас есть изображение, из которого вы хотите добыть цвета.

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

Важно понимать, что цвета обычно включают 3 измерения, так что изображение цветов на схеме выше не может показать полную картину. Выше я изобразил Оттенок (Hue) и Насыщенность(Saturation) цветов. Но цвета имеют больше, чем 2 измерения – по сути, я мог бы изобразить Значение(Value).

Совет #3: Создавайте диаграммы ваших цветов.

Я всегда стою диаграммы моих цветов. Я изображаю цвета в 2-х отдельных схемах в 3-х измерениях: Оттенок и Насыщенность и Насыщенность и Значение. Сначала по Оттенку и Насыщенности:

И затем по Насыщенности и Значению:

Совет #4: Проверьте доступность.

Если вы дальтоник, то вы возможно никогда не задумаетесь об этом. На самом деле около 8% мирового населения дальтоники, чаще это мужчины, чем женщины.

Существуют  сайты, которые помогут определить пригодность выбранных цветов. Я  использую COLORHEXA и ищу отдельные цвета. Затем я рисую все эти индивидуальные цвета вплотную друг к другу, чтобы убедиться, что все цвета отличаются по видению большинства людей (99.9%).

Слева направо представлены наименее и наиболее преобладающие типы зрения. В данном случает только 2 цвета: 4-й цвет снизу и 6-й цвет снизу очень похожи друг на друга при протанопии и дейтеранопии.

Совет #5: Добавьте тени (темные оттенки), светлые тона и похожие монохромные цвета для акцента и выделения.             

Для этого нужно снова вернуться к сайту COLORHEXA и начать создавать палитры из 2-3 цветов, которые светлее, чем базовые цвета (тона) и 2-3 цветов, которые темнее (тени). Монохромные цвета – это цвета с тем же оттенком. Они полезны, когда вы сравниваете значения с определенным подмножеством внутри другого подмножества.

Вот пример того, как это может выглядеть:

Совет #6: Протестируйте вашу палитру на каких-нибудь базовых визуализациях.

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

Совет #7: Делитесь и сотрудничайте с остальными.

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

Совет #8: Создавайте ясную документацию.

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

Итог

Мы показали вам наш подход к построению цветовых палитр:

  • Выберите 8-12 цветов, которые явным образом отличаются друг от друга.
  • Проверьте палитры на дальтонизм.
  • Выберите дополнительные тона, тени и монохромные цвета, чтобы усилить графики.
  • Составьте документацию.

Building a color palette for Tableau

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.