Подбор сочетания цветов: Названия цветов, от Абрикоса до Янтаря — ColorScheme.Ru

Блог Evernote — еще один отличный пример:

Дизайн блога основан на зеленом цвете, который является основным цветом бренда Evernote.Здесь есть несколько фантастических штрихов — изображение, кнопка входа и даже гиперссылки — все зеленые.

Желтого цвета очень много, что делает эту цветовую схему аналогичной.

Эти простые дизайны имеют огромное значение — имейте это в виду при выборе цветовой схемы веб-сайта.

5. Контрастируйте цвета

Теперь подумайте о контрасте. Это один из самых важных элементов хорошего дизайна, который вы можете использовать при создании цветовой схемы вашего сайта.

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

Взгляните еще раз на сайт WordStream:

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

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

6. Интегрируйте свой брендинг

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

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

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

Полезно также посмотреть, что сделали другие бренды. Вот пример из Medium:

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

Теперь начните (цвет) интриги!

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

Осталось только пойти и сделать это.

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

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

Об авторе

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

7 советов по выбору цветовой схемы веб-сайта

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

Вот несколько советов и рекомендаций по выбору цветовой схемы веб-сайта перед началом работы над веб-дизайном.

Совет 1: подумайте о бренде и целевой аудитории

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

Это будет сайт B2B? Он будет ориентирован на молодых мам? Задавайте все правильные вопросы своим клиентам, и в конечном итоге вы сможете сузить их до категории.

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

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

Совет 2. Учитывайте цветовые эмоции

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

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

Например, ярко-синий олицетворяет доверие, роскошь, роскошь и т. д. Розовый цвет более женственный и романтичный.

Совет 3: Найдите свой основной цвет

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

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

Совет 4: Как выбрать цветовую схему

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

Совет 5: Как выбрать количество цветов для использования

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

Хотя формулы, определяющей необходимое количество цвета для проекта, не существует, есть хорошее эмпирическое правило и теория цвета — правило 60-30-10

• Основной цвет: 60%
• Дополнительный цвет: 30%
• Акцентный цвет: 10%

Это правило предполагает, что основной цвет должен занимать 60 процентов площади вашего веб-сайта, вторичный — 30 процентов, а акцент — около 10 процентов площади веб-сайта.

Кроме того, не забудьте пару нейтральных цветов в дизайне сайта и цветовой гамме: белые, серые и черные тона.

Совет 6: Решите, где использовать разные цвета

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

Совет 7. Сравните несколько различных цветовых схем

Не использовать первую цветовую схему. Рекомендую подготовить 3-4 разных цветовых решения и сравнить их день-два. Спросите мнение кого-то другого или опубликуйте его на Reddit и посмотрите, каков консенсус.

Мне нравится представлять и сравнивать цветовые схемы в этом формате:

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

Заключение

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

Проверьте наши последние работы по дизайну веб-сайта!

Как выбрать цвета для визуализации данных

(Эта статья изначально была опубликована в Nightingale, журнале Общества визуализации данных.)

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

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

Типы цветовой палитры

Для визуализации данных существует три основных типа цветовой палитры:

• Качественные палитры
• Последовательные паллеты
• Расходящиеся палитры

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

Качественная палитра

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

В качественной палитре цвета, присвоенные каждой группе, должны быть разными. Как правило, вы должны попытаться ограничить максимальный размер палитры десятью или менее цветами. С большим количеством цветов вы начинаете сталкиваться с проблемами различения групп.Если у вас есть больше возможных значений, чем цветов, вам следует попытаться объединить значения вместе, например, установить самые маленькие категории в одну «другую» категорию. Многократное перебор цветов — плохая идея, так как это может привести к путанице.

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

Последовательная палитра

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

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

Второстепенным параметром последовательной цветовой палитры является ее оттенок. Можно просто использовать один оттенок для вашей цветовой карты, в основном изменяя яркость для обозначения значения. Тем не менее, стоит рассмотреть возможность перехода между двумя цветами в качестве дополнительной помощи при кодировании. Как правило, более теплый цвет (по направлению к красному или желтому) идет на более светлом конце, а более холодный цвет (по направлению к зеленому, синему или пурпурному) — по более темному.

Расходящаяся палитра

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

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

Дискретная и непрерывная палитра

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

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

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

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

Дополнительные советы по использованию цвета

Избегайте ненужного использования цвета

Несмотря на то, что цвет является важной частью визуализации данных, разумно проявлять сдержанность и использовать цвет только там, где это уместно.Не для каждой создаваемой вами диаграммы потребуется несколько цветов. Если у вас есть только две переменные для построения графика, они, скорее всего, будут закодированы вертикальным и горизонтальным положением или длиной. Цвет обычно появляется только тогда, когда третья переменная должна быть закодирована в диаграмме или если она является компонентом специализированной диаграммы, такой как круговая диаграмма. Однако бывают случаи, когда цвет может быть добавлен, чтобы подчеркнуть конкретный вывод или в качестве дополнительной кодировки выделения.

Соответствовать цвету на диаграммах

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

Использование значимости цвета

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

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

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

Обратите внимание на дальтонизм

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

В Интернете есть много инструментов, которые помогут вам выбрать и протестировать цвета для ваших визуализаций данных. Здесь мы выделим некоторые из самых простых инструментов, которые помогут вам быстро освоиться с выбором цвета.

ЦветБрюэр

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

Выбор цвета данных

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

Помощник по цветовой палитре Chroma.js

Помощник по цветовой палитре chroma.js немного сложнее, чем Data Color Picker, с его параметрами для коррекции яркости, использования интерполяции Безье и немного более сложного ввода значений цвета. Тем не менее, это также дает некоторую дополнительную свободу в установке нескольких точек остановки для алгоритма, чтобы попытаться подобрать палитру. В качестве дополнительного бонуса приложение также включает симулятор дальтонизма на той же странице, выделяя наиболее распространенные типы дефектов, при которых могут возникнуть проблемы.

Цветной вор

Не так много быстрых и простых инструментов для создания качественных палитр, как для последовательных и расходящихся палитр. Я хочу, чтобы hue и Colorgorical быстро генерировали случайные палитры, но с ними немного сложнее работать, когда вы хотите настроить свои значения.

Но один интересный способ создания качественной палитры — черпать вдохновение из изображений и скриншотов с привлекательными естественными палитрами. Есть несколько инструментов, которые помогут сделать это, но Color Thief — один из самых простых в работе, он автоматически извлекает палитру здорового размера из загруженных изображений.Это не обязательно означает, что вы можете использовать извлеченные цвета напрямую и по порядку в качестве палитры визуализации. Хотя они могут быть вдохновляющей отправной точкой для цветов, которые хорошо смотрятся вместе, вам, вероятно, потребуется внести некоторые изменения и изменения, чтобы убедиться, что выбранные вами цвета эффективны в контексте визуализации.

Палитра Viz

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

Резюме

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

цветовых палитр и эффектов – Tableau

Все метки имеют цвет по умолчанию, даже если в карточке Метки нет полей Цвет.Для большинства меток по умолчанию используется синий цвет; для текста по умолчанию используется черный цвет. См. также Назначение цветов меткам и Пример — несколько полей для цвета.

Категориальные палитры

Когда вы перетаскиваете поле с дискретными значениями (обычно измерение) в поле Цвет на карточке Метки, Tableau использует категориальную палитру и назначает цвет каждому значению поля. Палитры категорий содержат различные цвета, подходящие для полей со значениями, которые не имеют собственного порядка, например отделы или способы доставки.

Чтобы изменить цвета значений поля, щелкните в правом верхнем углу цветовой легенды. В Tableau Desktop выберите «Редактировать цвета» в контекстном меню. В Tableau Server или Tableau Online диалоговое окно «Редактировать цвета» открывается автоматически.

Изменение цвета значения

1. Щелкните элемент слева в разделе «Выбрать элемент данных».

2. Выберите новый цвет в палитре справа. В Tableau Desktop вы можете навести курсор на образец, чтобы определить цвет.

3. Повторите для всех значений, которые вы хотите изменить.

4. В Tableau Desktop нажмите OK, чтобы закрыть диалоговое окно «Редактировать цвета».В Tableau Server или Tableau Online просто закройте диалоговое окно.

Выберите другую палитру

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

В верхней части списка находятся категориальные палитры, такие как Tableau 10 .Как отмечалось выше, категориальные палитры подходят для дискретных полей без внутреннего порядка.

Внизу списка находятся порядковые палитры, такие как Оранжевый . Порядковые палитры содержат ряд связанных цветов и подходят для полей, имеющих связанный порядок, например даты или числа.

После выбора палитры нажмите «Назначить палитру», чтобы автоматически назначить цвета новой палитры элементам в поле.

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

Количественные палитры

Когда вы перетаскиваете поле с непрерывными значениями на карточку Метки (обычно меру), Tableau отображает количественную легенду с непрерывным диапазоном цветов.

Вы можете изменить цвета, используемые в диапазоне, распределении цвета и других свойствах. Чтобы изменить цвета, щелкните в правом верхнем углу легенды цвета.В Tableau Desktop выберите «Редактировать цвета» в контекстном меню. В Tableau Server или Tableau Online диалоговое окно «Редактировать цвета» открывается автоматически.

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

Диалоговое окно «Редактировать цвета» для расходящейся палитры

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

Диалоговое окно «Редактировать цвета» для последовательной палитры

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

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

• Все палитры с Diverging в названии являются расходящими количественными палитрами — например, Orange-Blue Diverging . Вы можете выбрать расходящуюся палитру для любого непрерывного поля — диапазон значений не обязательно должен содержать как положительные, так и отрицательные числа.

  Чтобы изменить цвета для расходящейся палитры, щелкните одно из квадратных полей цвета на любом конце спектра палитры. В зависимости от того, создаете ли вы в Tableau Desktop или в Интернете, выполните одно из следующих действий:

  • В Tableau Desktop в диалоговом окне конфигурации цвета (которое является частью операционной системы вашего компьютера) выберите цвет из палитры цветов или введите пользовательские значения.

  • В Tableau Server или Tableau Online введите пользовательское шестнадцатеричное значение в поле «Пользовательский цвет». Если значение недействительно, никакие изменения не вносятся.

• Все остальные палитры являются последовательными количественными палитрами. Чтобы изменить цвета для последовательной палитры, щелкните квадратное поле цвета в правом конце спектра палитры, чтобы либо открыть диалоговое окно конфигурации цвета (Tableau Desktop), либо ввести пользовательское шестнадцатеричное значение в поле “Пользовательский цвет” (Tableau Server или Табло онлайн).

Опции для количественных палитр

Следующие параметры доступны в диалоговом окне «Редактировать цвета» для непрерывного поля.

Примечание . Параметры различаются там, где указано для Tableau Server и Tableau Online.

Ступенчатый цвет

Выберите «Пошаговый цвет», чтобы сгруппировать значения в однородные ячейки, где каждая ячейка связана с цветом.Используйте элемент управления вращением, чтобы указать, сколько шагов (бинов) нужно создать. Например, для диапазона значений от 0 до 100 можно указать пять шагов для сортировки значений по пяти интервалам (0–20, 20–40 и т. д.).

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

Перевернутый

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

Использовать полный цветовой диапазон

При расходящейся (двухцветной) палитре можно выбрать «Использовать полный цветовой диапазон». Tableau присваивает как начальному, так и конечному номеру полную интенсивность для обоих цветовых диапазонов. Таким образом, если диапазон составляет от -10 до 100, цвет, представляющий отрицательные числа, будет меняться в оттенке намного быстрее, чем цвет, представляющий положительные числа. Если вы не выберете «Использовать полный цветовой диапазон», Tableau присваивает интенсивность цвета, как если бы диапазон значений был от -100 до 100, так что изменение оттенка одинаково по обе стороны от нуля.Это означает, что на отрицательной стороне будет гораздо меньше изменений, где фактические значения варьируются только от -10 до 0, чем на положительной стороне, где значения варьируются от 0 до 100.

На изображении слева внизу показана красно-зеленая расходящаяся цветовая палитра для значений от -858 до 72 986. Без использования полного цветового диапазона -858 (связанное с маленькой рамкой в ​​правом нижнем углу диаграммы) отображается серым цветом, потому что -858 составляет всего около 1% от отрицательной стороны, а 72 986 – от положительной.Когда используется полный цветовой диапазон, как на изображении справа, -858 отображается как темно-красный цвет, интенсивность которого равна максимальному положительному значению.

Включить итоги

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

Ограничение цветового диапазона

В Tableau Desktop, когда вы нажимаете «Дополнительно» в диалоговом окне «Редактировать цвета», вы можете указать начальное, конечное и центральное значения для диапазона, установив флажок и введя новое значение в поле, и цветовая шкала соответствующим образом скорректированы.

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

Примечание . Этот параметр в настоящее время недоступен в Tableau Server или Tableau Online.

Сброс цветового диапазона

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

Примечание . Если вы находитесь в режиме веб-разработки и нажимаете «Сброс», цветовая палитра возвращается к настройкам по умолчанию. Все параметры, установленные в разделе «Дополнительно», также будут сброшены. Чтобы отменить это действие, вы можете нажать «Отменить» в верхнем меню. Если ваши изменения уже были сохранены, вы должны изменить дополнительные параметры в Tableau Desktop и повторно опубликовать представление.

Настройка цветовых эффектов

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

Непрозрачность

Измените непрозрачность меток, перемещая ползунок.

Регулировка непрозрачности особенно полезна при работе с плотными точечными диаграммами или при просмотре данных, наложенных на карту или фоновое изображение. При перемещении ползунка влево метки становятся более прозрачными.

Пометить границы

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

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

Примечание: Вы также можете использовать настройку непрозрачности чтобы показать плотность следов.

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

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

Ореолы метки

Чтобы сделать метки более заметными на фоне изображения или карты, окружите каждую метку сплошным контрастным цветом, называемым ореолом.Гало метки доступны, если у вас есть фоновое изображение или фоновая карта. В раскрывающемся списке Цвет выберите цвет ореола метки.

Маркеры

В Tableau Desktop, когда вы используете тип метки “Линия”, вы можете добавить эффект маркера, чтобы показать или скрыть точки вдоль линии. Вы можете показать выбранные точки, все точки или ни одной точки. В раскрывающемся списке «Цвет» выберите маркер в разделе «Эффекты».

Примечание . Этот параметр в настоящее время недоступен в Tableau Server или Tableau Online.

11 цветовых схем веб-сайта, которые помогут вам найти идеальную палитру

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

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

Учет психологии цвета для цветовых схем веб-сайтов

Возьмем прекрасного художника Йозефа Альберса. Мастер цвета, он посвятил свою практику пониманию цвета и тому, как он влияет на настроение зрителя и адаптируется к различным контекстам.Огромная часть его исследований заключалась в изучении различных способов взаимодействия цветов друг с другом. Возьмем, к примеру, его картину ниже: сочетание темно-зеленого и оранжевого кажется резким, в то время как сочетание зеленого с серым Альберс создает баланс с гораздо более спокойным, современным настроением для публики.

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

Этот разговор представляет собой введение в психологию цвета, что означает изучение цветов и того, как они влияют на нас на мозговом уровне. Как продемонстрировал Марк Ротко со своими одноименными картинами «Цветовое поле», определенные цвета требуют определенной реакции. Итак, когда мы рассматриваем цветовые схемы веб-сайта, важно понимать, как разные тона и оттенки влияют на наше настроение. Например, если бы мы разрабатывали веб-сайт для благотворительной организации по устойчивому развитию, мы могли бы использовать оттенки зеленого и синего, потому что они вызывают чувство доверия, природы и здоровья.

Принятие идеальной цветовой палитры для вашего веб-сайта создает положительное восприятие и доверие потребителей.

Вы можете не только использовать определенные цветовые схемы, чтобы влиять на настроение людей, но и управлять тем, как они воспринимают ваш сайт. Почему Facebook всегда придерживался своей синей цветовой схемы? Действительно ли это потому, что Марк Цукерберг не различает красно-зеленый цвет, а значит, синий кажется ему необычайно ярким? Ну да, но еще и потому, что синий — самый любимый всеми цвет.Фактически, синий используется более чем в половине всех логотипов. Имея это в виду, давайте рассмотрим основные психологические принципы всех ключевых цветов:

1. Красный : скорость, энергия и страсть. Красный — отличный цвет для использования, когда вы хотите, чтобы ваша аудитория действовала. Красный часто используется для цветовых схем веб-сайтов электронной коммерции, а также ресторанов и приложений для еды на вынос — когда вы голодны и заказываете еду на вынос, вы страстно хотите, чтобы еда была быстрой!
2. Оранжевый : оптимизм и счастье.Оранжевый повсеместно считается «забавным» цветом, и использование его в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
3. Желтый : тепло, манящее чувство, позитив. Цвет солнца, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет веб-сайта для сферы услуг — вы будете рады помочь!
4. Зеленый: природа и здоровье. Успокаивающий и естественный зеленый — идеальный выбор для цветовой схемы при разработке здорового бренда.Зеленый также является отличным выбором цвета, чтобы передать экологичность и устойчивость.
5. Синий: самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его фаворитом в цветовых схемах веб-сайтов.
6. Фиолетовый : творчество, мудрость и уверенность. Фиолетовый — это уникальный, сильный цвет для использования в цветовой гамме веб-сайта, поскольку он привлекает внимание и выделяется.
7. Розовый : творчество и изобилие.Розовый цвет сейчас актуален, больше, чем когда-либо, его принимают люди всех полов и национальностей, а это означает, что бренды следуют его примеру и включают его в ряд отраслей.
8. Коричневый : Доброта, теплота и честность. При использовании в веб-дизайне коричневый — успокаивающий цвет. Он придает веб-сайтам естественную, приземленную атмосферу и часто идет рука об руку с традиционным винтажным дизайном.
9. Черный: современный, элегантный, нейтральный.Его минимализм отлично подходит для роскошных веб-сайтов; многие косметические бренды используют черный цвет в качестве своего основного цвета, чтобы показать, что их продукт качественный, что, возможно, помогает вам оправдать такие большие расходы..?
10. Белый: минимализм, прозрачность. Иногда лучший выбор цвета для минимального веб-дизайна — это вообще отсутствие цвета. Белый — нейтральный оттенок, а это значит, что его можно легко комбинировать с другими цветами в целях брендинга. Он в основном используется в качестве акцента или фонового цвета.
11. Серый: зрелость, авторитет.Если у вас есть более серьезный веб-сайт, серый — отличный выбор цвета, он показывает людям, что вы настроены серьезно.

Мы только что отправили вам первый урок.

11 красивых цветовых схем для сайта, которые вас вдохновят

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

1. Цвета для умных экологически чистых продуктов

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

Конопляно-зеленый, бледно-лимонный, овсяный и темно-синий:

2. Яркие и полезные для здоровья цвета

Было бы легко увязнуть в предсказуемо землистых тонах коричневого и зеленого при визуализации экологичного фирменного стиля… но вы не должны забывать, что ваша целевая аудитория постоянно находится в вашем периферийном зрении!

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

Бледно-персиковый, апельсиновый, мятный и темно-зеленый:

3. Стильные, подобранные цветовые схемы

У Лайлак есть момент. Пролистайте любой актуальный модный журнал, и вы увидите, как этот фиолетовый цвет сочится со страниц вашего гардероба.Это свежая, мягкая и крутая альтернатива , от которого тысячелетнего розового цвета мои глаза повидали так много, что на него стало больно смотреть.

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

Сиреневый, ржавый, кремовый и угольный:

4.Веселые молодежные цветовые палитры

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

Нежно-розовый, листовой зеленый, оранжевый и фиолетовый:

5.Головокружительные цвета для творчества

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

Желтый, неоново-синий и черный:

6.Успокаивающие и оптимистичные нейтральные палитры

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

Персиковый, кремовый и угольный:

7.Надежные звуки

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

Бирюзовый, серый, синий, ярко-белый, темно-серый и цвета морской волны:

8. Успокаивающие, но уверенные цветовые схемы

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

Бледно-розовый, коралловый, серый, сиреневый и темно-синий:

9. Современные модные цветовые схемы

Пурпурный возвращается на бис, так как на этот раз лиловый сочетается с мятой и апельсином.Эти цветовые схемы повсюду в мире иллюстраций Instagram и модных интернет-магазинов. Хотя они довольно мягкие и скромные, они создают взрыв современной энергии, достаточно универсальной, чтобы проникнуть в брендинг любой отрасли.

Фиолетовый, лиловый, мятный и оранжевый:

10. Веселые и человеколюбивые цветовые палитры

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

Синий, желтый, серовато-зеленый и белый:

11. Сильные и эмоциональные цветовые схемы

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

Пудрово-розовый, фуксия и нефритовый:

Начинается поиск цветовых схем для веб-сайтов

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

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