Разное

Сочетание цветов диаграмма: Как выбрать красивые цвета для вашей инфографики / Хабр

06.12.1981

Содержание

Как выбрать красивые цвета для вашей инфографики / Хабр

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

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

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


Визуализация категорий в FiveThirtyEight, у Надии Бремер, в Pudding, New York Times, The Economist и Akkurat


  1. Вступление
  2. Расширьте своё понимание цветов
  3. Не танцуйте по всему цветовому кругу
  4. Используйте насыщенность и яркость, чтобы работали тона
  5. Используйте тёплые цвета и синий
  6. При использовании зелёного сделайте его жёлтым или синим
  7. Избегайте чистых цветов
  8. Избегайте ярких, насыщенных цветов
  9. Сочетайте цвета с разной яркостью
  10. Сделайте цвета одинаково «красочными»
  11. Избегайте слишком слабого контраста с фоном
  12. Избегайте слишком сильного контраста с фоном
  13. Выбирайте достаточно ненасыщенный фон
  14. Просто копируйте цвета или попробуйте их понять

Я буду много говорить о насыщенности, яркости и тонах. Это цветовые пространства HSB (тон, насыщенность, яркость) или HSV (тон, насыщенность, значение):

  • Тон (hue) находится в диапазоне от 0° до 360°, это ваш типичный цветовой круг: ⬤⬤⬤
  • Насыщенность (saturation) изменяется от 0% (серый) до 100% (супер-пупер красочный!!): ⬤⬤⬤
  • Яркость/значение (brightness/value) изменяется от 0% (чёрный) до 100% (фактический цвет): ⬤⬤⬤

Чтобы преобразовать цвета из HEX (например, #cc0000) или RGB (например, rgb(207, 176, 58)) в HSB/HSV, используйте такой инструмент, как colorizer.org.

Родственником HSB/HSV является цветовое пространство HCL. Там те же параметры (тон, цветность = насыщенность, яркость), но ближе к тому, «как мы действительно видим цвета». Наш сервис Datawrapper использует цветовое пространство HCL в инструменте выбора цвета:

Поскольку в Adobe Photoshop или colorizer.org нет HCL, при каждом упоминании градусов (например, 0°) или процентов здесь имеется в виду цветовое пространство HSB/HSV.

Хорошо, давайте начнём.


Вы можете подумать: «Для диаграммы мне нужно пять цветов. Поэтому я использую зелёный, жёлтый, синий и красный. И… хм… может, оранжевый? Или фиолетовый!»

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

Посмотрите на эту диаграмму и сравните её с основными цветами ⬤⬤⬤⬤⬤⬤:


Кошки или собаки? Автор: Надия Бремер

На диаграмме цвета совсем другие. Надия использует красный ⬤, который отличается от обычного красного ⬤. Зелёный ⬤ — это… можно ли его вообще назвать зелёным ⬤?

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

И мы ещё не говорили об оранжевом и жёлтом.

У вас много вариантов. Это означает, что вы можете оставаться в небольшой области цветового круга и все ещё останется много опций.


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

В этот момент есть смысл посмотреть на цветовой круг. Для этого подходит Adobe Color или Color Calculator.


Color Calculator для выбора гармоничных сочетаний

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

Your browser does not support HTML5 video.

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

Если расстояние достаточно маленькое, вы в основном используете

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

Итак, давайте сделаем это — на этот раз с помощью Adobe Color:


Наши дополнительные цвета в Adobe Color

Наши цвета противоположны на цветовом круге, поэтому явно дополняют друг друга. Ура! Но они также непригодны: два оранжевых слишком похожи. И все выглядит так… ярко.

Вот где нужно изменить насыщенность и яркость.


Насыщенность и яркость так же важны, как и тон. На самом деле, вы можете создавать новые цвета просто изменяя насыщенность и яркость. Вот две пары цветов с одинаковым тоном, только разной насыщенностью и яркостью: ⬤⬤/⬤⬤ (если немного изменить тон, то результаты будут ещё лучше: ⬤⬤/⬤⬤).

Вернёмся к нашей цветовой комбинации: ⬤⬤⬤⬤. После игры с насыщенностью и яркостью она становится такой:


Более подходящие дополнительные цвета в Adobe Color

Я обесцветила светло-голубой ⬤ и светло-оранжевый ⬤ и сделала все цвета темнее, кроме светло-оранжевого. Чёрт возьми, с этим уже можно работать!

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

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

Вот что я сделала со всеми этими цветовыми палитрами: ⬤⬤⬤⬤ и ⬤⬤⬤⬤⬤ и ⬤⬤⬤⬤. Все они примерно дополняют друг друга и у всех разная насыщенность и светлость.


Дизайнеры инфографики особенно любят ещё одно сочетание: жёлтый/оранжевый/красный и синий. Пролистайте, например, портфолио South China Morning Post или вот это от The Economist (PDF): они используют эти цвета гораздо чаще, чем какой-нибудь фиолетовый или зелёный.


Три страницы South China Morning Post

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

Жёлтый, оранжевый и красный выглядят очень приятно вместе, но люди всё равно воспринимают их как разные цвета: ⬤⬤⬤ — это именно то, что мы хотим для цветов категорий. А синий более гибкий, чем любой другой тон: много синего, независимо от того, тёмный ⬤ или светлый, ⬤ насыщенный ⬤ или не насыщенный ⬤, выглядят приятно, успокаивающе и профессионально.

И они доступны: дальтоники легко отличают синий и оранжевый/красный.

Поэтому, если сомневаетесь, то используйте оранжевый/красный с синим.


Яркая зелень занимает шестую часть на цветовом круге, примерно с 90° ⬤ до 150° ⬤, с пиком на 120° ⬤. Однако вы не найдёте хорошей инфографики с такими цветами. Почему?

Во-первых, зелёный сам по себе просто очень тёмный. А осветление зелени переходит в неуклюжий неон ⬤. Чтобы получить хороший тон, нужно сильно осветлить и обесцветить зелёный цвет — больше, чем другие цвета. Это именно то, что Washington Post делает со своим зелёным ⬤ здесь:


«Как Трамп откатывает наследие Обамы», The Washington Post

Это 142° зелёный, но насыщенной только на 14%. Тот же тон с той же яркостью на 100% насыщенности: ⬤. Вот как.

И помните о дальтониках: чистый зелёный в сочетании с красным, оранжевым или коричневым им трудно различить.

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


Кошки или собаки? Автор: Надия Бремер

Похоже, вы можете использовать их в инфографике как два разных цвета: беспроигрышный вариант!


«Чистые» тона расположены в цветовом круге точно на 60°, 120°, 180°, 240°, 300° или 360°/0°:

Вот пример: в HSV/HSB значение тона этого ярко-синего ⬤ составляет 180°, значение насыщенности — 67%, а значение яркости — 91%. Вы также можете посмотреть значения RGB вашего цвета: если хотя бы два значения совпадают, то цвет «чистый».

Например, наш ⬤ — это rgb(77, 232, 232).

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

На изображении выше у красного и оранжевого, синего и зелёного одинаковая насыщенность и светлость. Единственное различие — тон: красный ⬤ (0°), синий ⬤ (240°) и зелёный ⬤ (120°) выглядят более сочными, чем оранжевый ⬤ (40°), средний синий ⬤ (211°) и синеватый зелёный ⬤ (170°).


Яркие цвета обязательно привлекут внимание читателей. Но эти читатели не скажут вам спасибо. Большинство немного напрягаются, когда видят такие цвета: «очень насыщенные, яркие цвета НЕ будут уместны для серьёзного, доверительного или спокойного [общения]», объясняют Бартрам, Патра и Стоун в своей статье «Аффективный цвет в инфографике» от 2017 года (PDF).

Если цвета приближаются к 100% насыщенности и 100% яркости, скорее всего, они слишком яркие. Это определённо относится к чистым цветам, таким как ⬤⬤⬤⬤.

«Но раньше я видел такие сумасшедшие цвета, и они выглядят хорошо», — скажете вы и назовёте проекты вроде этих:


Статья New York Times о плейлистах


Статья Bloomberg о банкротствах


Статья Pudding о знаменитостях

Если сравнить цвета из этих примеров с ⬤⬤⬤⬤, то они менее насыщенные или более тёмные. На 100% насыщенный и 100% ярко-зелёный цвет ⬤ становится в New York Times менее насыщенным ⬤, а также менее насыщенным и тёмным ⬤ в статье Bloomberg и в статье Pudding ⬤.

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

Всё это работает, потому что в Pudding, The New York Times и Bloomberg отличные дизайнеры. Если сомневаетесь, избегайте 100% насыщенности в сочетании со 100% яркостью.


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

Например, ⬤⬤⬤ на крайней левой диаграмме выглядят как ⬤⬤⬤ в оттенках серого.

Чтобы избежать такой неприятной гаммы, есть два варианта:

  • «Исправить в оттенках серого»: изменить яркость каждой области, сделав некоторые цвета ярче, а некоторые темнее, например: ⬤⬤⬤. Так они выглядят в оттенках серого: ⬤⬤⬤
  • Разделить области, например, белой границей

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

В реальности правильный способ установить цвета для категорий — это выбирать цвета из градиентов, вроде таких:


Цветовые схемы Viridis

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


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

  • потому что они намного темнее ⬤⬤
  • потому что они намного светлее ⬤⬤
  • потому что они более насыщенные ⬤⬤
  • потому что они более «чистые» ⬤⬤

Но обычно вы просто хотите выделить один или два цвета. Большинство остальных должны быть более или менее одинаково заметными.

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

Или выберите менее чистый оттенок: на изображении выше зелёный ⬤ и синий ⬤ очень чистые, поэтому я их затемнила (вот как они выглядят со 100% яркостью: ⬤⬤).

Затем я хотела добавить красный… но яркий красный слишком интенсивный как чистый оттенок (с 0°) ⬤⬤⬤. Так что у меня было два варианта:

  1. просто затемнить его: ⬤⬤⬤.
  2. переместить оттенок (и только оттенок) на 30°, чтобы сделать его более оранжевым ⬤⬤⬤.

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


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

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

Вот что нужно делать, когда цвета слишком ненасыщенные и светлые ⬤⬤⬤:

  • Увеличьте насыщенность: ⬤⬤⬤
  • Сделайте их темнее: ⬤⬤⬤
  • Или сделайте и то, и другое для достижения наилучшего результата: ⬤⬤⬤

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


Верно и обратное: не делайте цвета слишком тёмными и насыщенными на ярком фоне. Если сомневаетесь, попробуйте осветлить цвета, убрать немного насыщенности — и посмотрите, что получается.


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

  • Если нужен светлый фон, держитесь подальше от цветов с яркостью менее 95% и насыщенностью более 7%.
  • Если нужен тёмный фон, сохраняйте насыщенность меньше 20%. Кроме того, не уходите в полностью чёрный — держите яркость между 10% и 25%.

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

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


Фото дерева niko photos на Unsplash

  • Выберите картинку с цветами, которые вы считаете красивыми, например, произведение искусства или фотографию природы. Затем выберите оттуда цвета с помощью пипетки, например, в Photoshop или image-color.com. Попробуйте применить их в своей следующей инфографике.
  • Установите Adobe Capture, который реализует ту же идею, но для «живых изображений»: он позволяет захватывать цвета из окружающего мира (удивительно, насколько ненасыщенные цвета вокруг нас!)
  • Поиграйте с ручным выбором цветов: посмотрите на экран. Какие цвета вы видите? Насколько они тёмные и насыщенные? Какие оттенки близки, какие противоположны на цветовом круге?
  • Выбирайте цвета из красивой инфографики. Измените некоторые из них. Они всё ещё хорошо сочетаются?

Кроме того, в следующий раз, когда создадите инфографику и будете недовольны цветами, проанализируйте их в цветовом пространстве HSV/HSB, например, с помощью colorizer.org:

  • Насколько цвета насыщены — насколько они становятся лучше или хуже, если увеличить или уменьшить насыщенность на несколько (или на много) процентных пунктов?
  • Каково значение тона? Что произойдёт, если изменить тон всего на несколько градусов?
  • Яркость цветов отличается?

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

Как выбрать красивые цвета для вашей инфографики / Хабр

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

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

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


Визуализация категорий в FiveThirtyEight, у Надии Бремер, в Pudding, New York Times, The Economist и Akkurat


  1. Вступление
  2. Расширьте своё понимание цветов
  3. Не танцуйте по всему цветовому кругу
  4. Используйте насыщенность и яркость, чтобы работали тона
  5. Используйте тёплые цвета и синий
  6. При использовании зелёного сделайте его жёлтым или синим
  7. Избегайте чистых цветов
  8. Избегайте ярких, насыщенных цветов
  9. Сочетайте цвета с разной яркостью
  10. Сделайте цвета одинаково «красочными»
  11. Избегайте слишком слабого контраста с фоном
  12. Избегайте слишком сильного контраста с фоном
  13. Выбирайте достаточно ненасыщенный фон
  14. Просто копируйте цвета или попробуйте их понять

Я буду много говорить о насыщенности, яркости и тонах. Это цветовые пространства HSB (тон, насыщенность, яркость) или HSV (тон, насыщенность, значение):

  • Тон (hue) находится в диапазоне от 0° до 360°, это ваш типичный цветовой круг: ⬤⬤⬤
  • Насыщенность (saturation) изменяется от 0% (серый) до 100% (супер-пупер красочный!!): ⬤⬤⬤
  • Яркость/значение (brightness/value) изменяется от 0% (чёрный) до 100% (фактический цвет): ⬤⬤⬤

Чтобы преобразовать цвета из HEX (например, #cc0000) или RGB (например, rgb(207, 176, 58)) в HSB/HSV, используйте такой инструмент, как colorizer.org.

Родственником HSB/HSV является цветовое пространство HCL. Там те же параметры (тон, цветность = насыщенность, яркость), но ближе к тому, «как мы действительно видим цвета». Наш сервис Datawrapper использует цветовое пространство HCL в инструменте выбора цвета:

Поскольку в Adobe Photoshop или colorizer.org нет HCL, при каждом упоминании градусов (например, 0°) или процентов здесь имеется в виду цветовое пространство HSB/HSV.

Хорошо, давайте начнём.


Вы можете подумать: «Для диаграммы мне нужно пять цветов. Поэтому я использую зелёный, жёлтый, синий и красный. И… хм… может, оранжевый? Или фиолетовый!»

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

Посмотрите на эту диаграмму и сравните её с основными цветами ⬤⬤⬤⬤⬤⬤:


Кошки или собаки? Автор: Надия Бремер

На диаграмме цвета совсем другие. Надия использует красный ⬤, который отличается от обычного красного ⬤. Зелёный ⬤ — это… можно ли его вообще назвать зелёным ⬤?

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

У вас много вариантов. Это означает, что вы можете оставаться в небольшой области цветового круга и все ещё останется много опций.


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

В этот момент есть смысл посмотреть на цветовой круг. Для этого подходит Adobe Color или Color Calculator.


Color Calculator для выбора гармоничных сочетаний

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

Your browser does not support HTML5 video.

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

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

Итак, давайте сделаем это — на этот раз с помощью Adobe Color:


Наши дополнительные цвета в Adobe Color

Наши цвета противоположны на цветовом круге, поэтому явно дополняют друг друга. Ура! Но они также непригодны: два оранжевых слишком похожи. И все выглядит так… ярко.

Вот где нужно изменить насыщенность и яркость.


Насыщенность и яркость так же важны, как и тон. На самом деле, вы можете создавать новые цвета просто изменяя насыщенность и яркость. Вот две пары цветов с одинаковым тоном, только разной насыщенностью и яркостью: ⬤⬤/⬤⬤ (если немного изменить тон, то результаты будут ещё лучше: ⬤⬤/⬤⬤).

Вернёмся к нашей цветовой комбинации: ⬤⬤⬤⬤. После игры с насыщенностью и яркостью она становится такой:


Более подходящие дополнительные цвета в Adobe Color

Я обесцветила светло-голубой ⬤ и светло-оранжевый ⬤ и сделала все цвета темнее, кроме светло-оранжевого. Чёрт возьми, с этим уже можно работать!

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

Вот что я сделала со всеми этими цветовыми палитрами: ⬤⬤⬤⬤ и ⬤⬤⬤⬤⬤ и ⬤⬤⬤⬤. Все они примерно дополняют друг друга и у всех разная насыщенность и светлость.


Дизайнеры инфографики особенно любят ещё одно сочетание: жёлтый/оранжевый/красный и синий. Пролистайте, например, портфолио South China Morning Post или вот это от The Economist (PDF): они используют эти цвета гораздо чаще, чем какой-нибудь фиолетовый или зелёный.


Три страницы South China Morning Post

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

И они доступны: дальтоники легко отличают синий и оранжевый/красный.

Поэтому, если сомневаетесь, то используйте оранжевый/красный с синим.


Яркая зелень занимает шестую часть на цветовом круге, примерно с 90° ⬤ до 150° ⬤, с пиком на 120° ⬤. Однако вы не найдёте хорошей инфографики с такими цветами. Почему?

Во-первых, зелёный сам по себе просто очень тёмный. А осветление зелени переходит в неуклюжий неон ⬤. Чтобы получить хороший тон, нужно сильно осветлить и обесцветить зелёный цвет — больше, чем другие цвета. Это именно то, что Washington Post делает со своим зелёным ⬤ здесь:


«Как Трамп откатывает наследие Обамы», The Washington Post

Это 142° зелёный, но насыщенной только на 14%. Тот же тон с той же яркостью на 100% насыщенности: ⬤. Вот как.

И помните о дальтониках: чистый зелёный в сочетании с красным, оранжевым или коричневым им трудно различить.

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


Кошки или собаки? Автор: Надия Бремер

Похоже, вы можете использовать их в инфографике как два разных цвета: беспроигрышный вариант!


«Чистые» тона расположены в цветовом круге точно на 60°, 120°, 180°, 240°, 300° или 360°/0°:

Вот пример: в HSV/HSB значение тона этого ярко-синего ⬤ составляет 180°, значение насыщенности — 67%, а значение яркости — 91%. Вы также можете посмотреть значения RGB вашего цвета: если хотя бы два значения совпадают, то цвет «чистый». Например, наш ⬤ — это rgb(77, 232, 232).

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

На изображении выше у красного и оранжевого, синего и зелёного одинаковая насыщенность и светлость. Единственное различие — тон: красный ⬤ (0°), синий ⬤ (240°) и зелёный ⬤ (120°) выглядят более сочными, чем оранжевый ⬤ (40°), средний синий ⬤ (211°) и синеватый зелёный ⬤ (170°).


Яркие цвета обязательно привлекут внимание читателей. Но эти читатели не скажут вам спасибо. Большинство немного напрягаются, когда видят такие цвета: «очень насыщенные, яркие цвета НЕ будут уместны для серьёзного, доверительного или спокойного [общения]», объясняют Бартрам, Патра и Стоун в своей статье «Аффективный цвет в инфографике» от 2017 года (PDF).

Если цвета приближаются к 100% насыщенности и 100% яркости, скорее всего, они слишком яркие. Это определённо относится к чистым цветам, таким как ⬤⬤⬤⬤.

«Но раньше я видел такие сумасшедшие цвета, и они выглядят хорошо», — скажете вы и назовёте проекты вроде этих:


Статья New York Times о плейлистах


Статья Bloomberg о банкротствах


Статья Pudding о знаменитостях

Если сравнить цвета из этих примеров с ⬤⬤⬤⬤, то они менее насыщенные или более тёмные. На 100% насыщенный и 100% ярко-зелёный цвет ⬤ становится в New York Times менее насыщенным ⬤, а также менее насыщенным и тёмным ⬤ в статье Bloomberg и в статье Pudding ⬤.

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

Всё это работает, потому что в Pudding, The New York Times и Bloomberg отличные дизайнеры. Если сомневаетесь, избегайте 100% насыщенности в сочетании со 100% яркостью.


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

Например, ⬤⬤⬤ на крайней левой диаграмме выглядят как ⬤⬤⬤ в оттенках серого.

Чтобы избежать такой неприятной гаммы, есть два варианта:

  • «Исправить в оттенках серого»: изменить яркость каждой области, сделав некоторые цвета ярче, а некоторые темнее, например: ⬤⬤⬤. Так они выглядят в оттенках серого: ⬤⬤⬤
  • Разделить области, например, белой границей

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

В реальности правильный способ установить цвета для категорий — это выбирать цвета из градиентов, вроде таких:


Цветовые схемы Viridis

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


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

  • потому что они намного темнее ⬤⬤
  • потому что они намного светлее ⬤⬤
  • потому что они более насыщенные ⬤⬤
  • потому что они более «чистые» ⬤⬤

Но обычно вы просто хотите выделить один или два цвета. Большинство остальных должны быть более или менее одинаково заметными.

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

Или выберите менее чистый оттенок: на изображении выше зелёный ⬤ и синий ⬤ очень чистые, поэтому я их затемнила (вот как они выглядят со 100% яркостью: ⬤⬤).

Затем я хотела добавить красный… но яркий красный слишком интенсивный как чистый оттенок (с 0°) ⬤⬤⬤. Так что у меня было два варианта:

  1. просто затемнить его: ⬤⬤⬤.
  2. переместить оттенок (и только оттенок) на 30°, чтобы сделать его более оранжевым ⬤⬤⬤.

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


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

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

Вот что нужно делать, когда цвета слишком ненасыщенные и светлые ⬤⬤⬤:

  • Увеличьте насыщенность: ⬤⬤⬤
  • Сделайте их темнее: ⬤⬤⬤
  • Или сделайте и то, и другое для достижения наилучшего результата: ⬤⬤⬤

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


Верно и обратное: не делайте цвета слишком тёмными и насыщенными на ярком фоне. Если сомневаетесь, попробуйте осветлить цвета, убрать немного насыщенности — и посмотрите, что получается.


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

  • Если нужен светлый фон, держитесь подальше от цветов с яркостью менее 95% и насыщенностью более 7%.
  • Если нужен тёмный фон, сохраняйте насыщенность меньше 20%. Кроме того, не уходите в полностью чёрный — держите яркость между 10% и 25%.

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

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


Фото дерева niko photos на Unsplash

  • Выберите картинку с цветами, которые вы считаете красивыми, например, произведение искусства или фотографию природы. Затем выберите оттуда цвета с помощью пипетки, например, в Photoshop или image-color.com. Попробуйте применить их в своей следующей инфографике.
  • Установите Adobe Capture, который реализует ту же идею, но для «живых изображений»: он позволяет захватывать цвета из окружающего мира (удивительно, насколько ненасыщенные цвета вокруг нас!)
  • Поиграйте с ручным выбором цветов: посмотрите на экран. Какие цвета вы видите? Насколько они тёмные и насыщенные? Какие оттенки близки, какие противоположны на цветовом круге?
  • Выбирайте цвета из красивой инфографики. Измените некоторые из них. Они всё ещё хорошо сочетаются?

Кроме того, в следующий раз, когда создадите инфографику и будете недовольны цветами, проанализируйте их в цветовом пространстве HSV/HSB, например, с помощью colorizer.org:

  • Насколько цвета насыщены — насколько они становятся лучше или хуже, если увеличить или уменьшить насыщенность на несколько (или на много) процентных пунктов?
  • Каково значение тона? Что произойдёт, если изменить тон всего на несколько градусов?
  • Яркость цветов отличается?

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

Как выбрать красивые цвета для вашей инфографики / Хабр

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

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

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


Визуализация категорий в FiveThirtyEight, у Надии Бремер, в Pudding, New York Times, The Economist и Akkurat


  1. Вступление
  2. Расширьте своё понимание цветов
  3. Не танцуйте по всему цветовому кругу
  4. Используйте насыщенность и яркость, чтобы работали тона
  5. Используйте тёплые цвета и синий
  6. При использовании зелёного сделайте его жёлтым или синим
  7. Избегайте чистых цветов
  8. Избегайте ярких, насыщенных цветов
  9. Сочетайте цвета с разной яркостью
  10. Сделайте цвета одинаково «красочными»
  11. Избегайте слишком слабого контраста с фоном
  12. Избегайте слишком сильного контраста с фоном
  13. Выбирайте достаточно ненасыщенный фон
  14. Просто копируйте цвета или попробуйте их понять

Я буду много говорить о насыщенности, яркости и тонах. Это цветовые пространства HSB (тон, насыщенность, яркость) или HSV (тон, насыщенность, значение):

  • Тон (hue) находится в диапазоне от 0° до 360°, это ваш типичный цветовой круг: ⬤⬤⬤
  • Насыщенность (saturation) изменяется от 0% (серый) до 100% (супер-пупер красочный!!): ⬤⬤⬤
  • Яркость/значение (brightness/value) изменяется от 0% (чёрный) до 100% (фактический цвет): ⬤⬤⬤

Чтобы преобразовать цвета из HEX (например, #cc0000) или RGB (например, rgb(207, 176, 58)) в HSB/HSV, используйте такой инструмент, как colorizer.org.

Родственником HSB/HSV является цветовое пространство HCL. Там те же параметры (тон, цветность = насыщенность, яркость), но ближе к тому, «как мы действительно видим цвета». Наш сервис Datawrapper использует цветовое пространство HCL в инструменте выбора цвета:

Поскольку в Adobe Photoshop или colorizer.org нет HCL, при каждом упоминании градусов (например, 0°) или процентов здесь имеется в виду цветовое пространство HSB/HSV.

Хорошо, давайте начнём.


Вы можете подумать: «Для диаграммы мне нужно пять цветов. Поэтому я использую зелёный, жёлтый, синий и красный. И… хм… может, оранжевый? Или фиолетовый!»

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

Посмотрите на эту диаграмму и сравните её с основными цветами ⬤⬤⬤⬤⬤⬤:


Кошки или собаки? Автор: Надия Бремер

На диаграмме цвета совсем другие. Надия использует красный ⬤, который отличается от обычного красного ⬤. Зелёный ⬤ — это… можно ли его вообще назвать зелёным ⬤?

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

У вас много вариантов. Это означает, что вы можете оставаться в небольшой области цветового круга и все ещё останется много опций.


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

В этот момент есть смысл посмотреть на цветовой круг. Для этого подходит Adobe Color или Color Calculator.


Color Calculator для выбора гармоничных сочетаний

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

Your browser does not support HTML5 video.

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

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

Итак, давайте сделаем это — на этот раз с помощью Adobe Color:


Наши дополнительные цвета в Adobe Color

Наши цвета противоположны на цветовом круге, поэтому явно дополняют друг друга. Ура! Но они также непригодны: два оранжевых слишком похожи. И все выглядит так… ярко.

Вот где нужно изменить насыщенность и яркость.


Насыщенность и яркость так же важны, как и тон. На самом деле, вы можете создавать новые цвета просто изменяя насыщенность и яркость. Вот две пары цветов с одинаковым тоном, только разной насыщенностью и яркостью: ⬤⬤/⬤⬤ (если немного изменить тон, то результаты будут ещё лучше: ⬤⬤/⬤⬤).

Вернёмся к нашей цветовой комбинации: ⬤⬤⬤⬤. После игры с насыщенностью и яркостью она становится такой:


Более подходящие дополнительные цвета в Adobe Color

Я обесцветила светло-голубой ⬤ и светло-оранжевый ⬤ и сделала все цвета темнее, кроме светло-оранжевого. Чёрт возьми, с этим уже можно работать!

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

Вот что я сделала со всеми этими цветовыми палитрами: ⬤⬤⬤⬤ и ⬤⬤⬤⬤⬤ и ⬤⬤⬤⬤. Все они примерно дополняют друг друга и у всех разная насыщенность и светлость.


Дизайнеры инфографики особенно любят ещё одно сочетание: жёлтый/оранжевый/красный и синий. Пролистайте, например, портфолио South China Morning Post или вот это от The Economist (PDF): они используют эти цвета гораздо чаще, чем какой-нибудь фиолетовый или зелёный.


Три страницы South China Morning Post

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

И они доступны: дальтоники легко отличают синий и оранжевый/красный.

Поэтому, если сомневаетесь, то используйте оранжевый/красный с синим.


Яркая зелень занимает шестую часть на цветовом круге, примерно с 90° ⬤ до 150° ⬤, с пиком на 120° ⬤. Однако вы не найдёте хорошей инфографики с такими цветами. Почему?

Во-первых, зелёный сам по себе просто очень тёмный. А осветление зелени переходит в неуклюжий неон ⬤. Чтобы получить хороший тон, нужно сильно осветлить и обесцветить зелёный цвет — больше, чем другие цвета. Это именно то, что Washington Post делает со своим зелёным ⬤ здесь:


«Как Трамп откатывает наследие Обамы», The Washington Post

Это 142° зелёный, но насыщенной только на 14%. Тот же тон с той же яркостью на 100% насыщенности: ⬤. Вот как.

И помните о дальтониках: чистый зелёный в сочетании с красным, оранжевым или коричневым им трудно различить.

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


Кошки или собаки? Автор: Надия Бремер

Похоже, вы можете использовать их в инфографике как два разных цвета: беспроигрышный вариант!


«Чистые» тона расположены в цветовом круге точно на 60°, 120°, 180°, 240°, 300° или 360°/0°:

Вот пример: в HSV/HSB значение тона этого ярко-синего ⬤ составляет 180°, значение насыщенности — 67%, а значение яркости — 91%. Вы также можете посмотреть значения RGB вашего цвета: если хотя бы два значения совпадают, то цвет «чистый». Например, наш ⬤ — это rgb(77, 232, 232).

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

На изображении выше у красного и оранжевого, синего и зелёного одинаковая насыщенность и светлость. Единственное различие — тон: красный ⬤ (0°), синий ⬤ (240°) и зелёный ⬤ (120°) выглядят более сочными, чем оранжевый ⬤ (40°), средний синий ⬤ (211°) и синеватый зелёный ⬤ (170°).


Яркие цвета обязательно привлекут внимание читателей. Но эти читатели не скажут вам спасибо. Большинство немного напрягаются, когда видят такие цвета: «очень насыщенные, яркие цвета НЕ будут уместны для серьёзного, доверительного или спокойного [общения]», объясняют Бартрам, Патра и Стоун в своей статье «Аффективный цвет в инфографике» от 2017 года (PDF).

Если цвета приближаются к 100% насыщенности и 100% яркости, скорее всего, они слишком яркие. Это определённо относится к чистым цветам, таким как ⬤⬤⬤⬤.

«Но раньше я видел такие сумасшедшие цвета, и они выглядят хорошо», — скажете вы и назовёте проекты вроде этих:


Статья New York Times о плейлистах


Статья Bloomberg о банкротствах


Статья Pudding о знаменитостях

Если сравнить цвета из этих примеров с ⬤⬤⬤⬤, то они менее насыщенные или более тёмные. На 100% насыщенный и 100% ярко-зелёный цвет ⬤ становится в New York Times менее насыщенным ⬤, а также менее насыщенным и тёмным ⬤ в статье Bloomberg и в статье Pudding ⬤.

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

Всё это работает, потому что в Pudding, The New York Times и Bloomberg отличные дизайнеры. Если сомневаетесь, избегайте 100% насыщенности в сочетании со 100% яркостью.


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

Например, ⬤⬤⬤ на крайней левой диаграмме выглядят как ⬤⬤⬤ в оттенках серого.

Чтобы избежать такой неприятной гаммы, есть два варианта:

  • «Исправить в оттенках серого»: изменить яркость каждой области, сделав некоторые цвета ярче, а некоторые темнее, например: ⬤⬤⬤. Так они выглядят в оттенках серого: ⬤⬤⬤
  • Разделить области, например, белой границей

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

В реальности правильный способ установить цвета для категорий — это выбирать цвета из градиентов, вроде таких:


Цветовые схемы Viridis

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


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

  • потому что они намного темнее ⬤⬤
  • потому что они намного светлее ⬤⬤
  • потому что они более насыщенные ⬤⬤
  • потому что они более «чистые» ⬤⬤

Но обычно вы просто хотите выделить один или два цвета. Большинство остальных должны быть более или менее одинаково заметными.

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

Или выберите менее чистый оттенок: на изображении выше зелёный ⬤ и синий ⬤ очень чистые, поэтому я их затемнила (вот как они выглядят со 100% яркостью: ⬤⬤).

Затем я хотела добавить красный… но яркий красный слишком интенсивный как чистый оттенок (с 0°) ⬤⬤⬤. Так что у меня было два варианта:

  1. просто затемнить его: ⬤⬤⬤.
  2. переместить оттенок (и только оттенок) на 30°, чтобы сделать его более оранжевым ⬤⬤⬤.

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


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

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

Вот что нужно делать, когда цвета слишком ненасыщенные и светлые ⬤⬤⬤:

  • Увеличьте насыщенность: ⬤⬤⬤
  • Сделайте их темнее: ⬤⬤⬤
  • Или сделайте и то, и другое для достижения наилучшего результата: ⬤⬤⬤

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


Верно и обратное: не делайте цвета слишком тёмными и насыщенными на ярком фоне. Если сомневаетесь, попробуйте осветлить цвета, убрать немного насыщенности — и посмотрите, что получается.


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

  • Если нужен светлый фон, держитесь подальше от цветов с яркостью менее 95% и насыщенностью более 7%.
  • Если нужен тёмный фон, сохраняйте насыщенность меньше 20%. Кроме того, не уходите в полностью чёрный — держите яркость между 10% и 25%.

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

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


Фото дерева niko photos на Unsplash

  • Выберите картинку с цветами, которые вы считаете красивыми, например, произведение искусства или фотографию природы. Затем выберите оттуда цвета с помощью пипетки, например, в Photoshop или image-color.com. Попробуйте применить их в своей следующей инфографике.
  • Установите Adobe Capture, который реализует ту же идею, но для «живых изображений»: он позволяет захватывать цвета из окружающего мира (удивительно, насколько ненасыщенные цвета вокруг нас!)
  • Поиграйте с ручным выбором цветов: посмотрите на экран. Какие цвета вы видите? Насколько они тёмные и насыщенные? Какие оттенки близки, какие противоположны на цветовом круге?
  • Выбирайте цвета из красивой инфографики. Измените некоторые из них. Они всё ещё хорошо сочетаются?

Кроме того, в следующий раз, когда создадите инфографику и будете недовольны цветами, проанализируйте их в цветовом пространстве HSV/HSB, например, с помощью colorizer.org:

  • Насколько цвета насыщены — насколько они становятся лучше или хуже, если увеличить или уменьшить насыщенность на несколько (или на много) процентных пунктов?
  • Каково значение тона? Что произойдёт, если изменить тон всего на несколько градусов?
  • Яркость цветов отличается?

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

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

Абрикосовый#FBCEB1251206177
Абрикосовый Крайола#FDD9B5253217181
Агатовый серый#B5B8B1181184177
Аквамариновый#7FFFD4127255212
Аквамариновый Крайола#78DBE2120219226
Ализариновый красный#E326362273854
Алый#FF2400255360
Амарантово-пурпурный#AB274F1713979
Амарантово-розовый#F19CBB241156187
Амарантовый#E52B502294380
Амарантовый глубоко-пурпурный#9F2B6815943104
Амарантовый маджента#ED3CCA23760202
Амарантовый светло-вишневый#CD268220538130
Американский розовый#FF033E255362
Аметистовый#9966CC153102204
Античная латунь#CD9575205149117
Антрацитово-серый#293133414951
Антрацитовый#464451706881
Арлекин#44944A6814874
Аспидно-серый#2F4F4F477979
Аспидно-синий#6A5ACD10690205
Бабушкины яблоки#A8E4A0168228160
Базальтово-серый#4E5754788784
Баклажанный Крайола#614051976481
Баклажановый#9900661530102
Баклажановый Крайола#6E51601108196
Бананомания#FAE7B5250231181
Барвинок, перванш#CCCCFF204204255
Барвинок Крайола#C5D0E6197208230
Бедра испуганной нимфы#FAEEDD250238221
Бежево-коричневый#79553D1218561
Бежево-красный#C1876B193135107
Бежево-серый#6D655210910182
Бежевый#F5F5DC245245220
Бело-алюминиевый#A5A5A5165165165
Бело-зеленый#BDECB6189236182
Белоснежный#FFFAFA255250250
Белый#FFFFFF255255255
Белый антик#FAEBD7250235215
Белый навахо#FFDEAD255222173
Берлинская лазурь#00315304983
Бирюзово-голубой Крайола#77DDE7119221231
Бирюзово-зеленый#1E5945308969
Бирюзово-синий#3F888F63136143
Бирюзовый#30D5C848213200
Бисквитный#FFE4C4255228196
Бисмарк-фуриозо#A5260A1653810
Бистр#3D2B1F614331
Бледно-васильковый#ABCDEF171205239
Бледно-желтый#FFDB8B255219139
Бледно-зелено-серый#8D917A141145122
Бледно-зеленый#89AC76137172118
Бледно-золотистый#EEE8AA238232170
Бледно-карминный#B03F351766353
Бледно-каштановый#DDADAF221173175
Бледно-коричневый#755C481179272
Бледно-песочный#DABDAB218189171
Бледно-пурпурный#F984E5249132229
Бледно-розоватый#FFCBDB255203219
Бледно-розовый#FADADD250218221
Бледно-синий#AFEEEE175238238
Бледно-фиолетовый#957B8D149123141
Бледный весенний бутон#ECEBBD236235189
Бледный желто-зеленый#F0D698240214152
Бледный желто-розовый#FFC8A8255200168
Бледный зеленовато-желтый#FFDF84255223132
Бледный зеленый#98FB98152251152
Бледный красно-пурпурный#AC7580172117128
Бледный оранжево-желтый#FFCA86255202134
Бледный пурпурно-розовый#FDBDBA253189186
Бледный пурпурно-синий#8A7F8E138127142
Бледный серо-коричневый#BC987E188152126
Бледный синий#919192145145146
Бледный фиолетово-красный#D87093216112147
Блестящий желто-зеленый#CED23A20621058
Блестящий желтовато-зеленый#8CCB5E14020394
Блестящий желтый#FFCF4025520764
Блестящий зеленовато-желтый#FFDC3325522051
Блестящий зеленовато-синий#2A8D9C42141156
Блестящий зеленый#47A76A71167106
Блестящий оранжевый#FFB84125518465
Блестящий пурпурно-розовый#FF97BB255151187
Блестящий пурпурно-синий#62639B9899155
Блестящий пурпурный#DD80CC221128204
Блестящий синевато-зеленый#009B760155118
Блестящий синий#4285B466133180
Блестящий фиолетовый#755D9A11793154
Блошиный (Красновато-коричневый)#755A571179087
Бобровый#9F8170159129112
Болгарский розовый#4806077267
Болотный#ACB78E172183142
Бордо (Красно-бордовый)#B0000017600
Бордово-фиолетовый#641C341002852
Бордовый#9B2D301554548
Бороды Абдель-Керима#D5D5D5213213213
Брезентово-серый#4C514A768174
Бриллиантово-синий#3E5F8A6295138
Бриллиантовый оранжево-желтый#FFB02E25517646
Бронзовый#CD7F3220512750
Бургундский#900020144032
Бурый#45161C692228
Бутылочно-зеленый#343B29525941
Ванильный#D5713F21311363
Васильковый#6495ED100149237
Васильковый Крайола#9ACEEB154206235
Вердепешевый#DAD871218216113
Вердепомовый#34C9245220136
Вересково-фиолетовый#DE4C8A22276138
Весенне-зеленый (Зеленая весна)#00FF7F0255127
Весенне-зеленый Крайола#ECEABE236234190
Весенний бутон#A7FC001672520
Византийский#BD33A418951164
Византия#7029631124199
Винно-красный#5E2129943341
Винтовочный зеленый#414833657251
Вишневый (Вишня)#911E421453066
В меру оливково-коричневый#64400F1006415
Водная синь#256D7B37109123
Воды пляжа Бонди#0095B60149182
Восход солнца#FFCF4825520772
Галечный серый#B8B799184183153
Гейнсборо#DCDCDC220220220
Гелиотроп (Гелиотроповый)#DF73FF223115255
Георгиново-желтый#F3A5052431655
Глиняный коричневый#7342221156634
Глициния (Глициниевый)#C9A0DC201160220
Глициния Крайола#CDA4DE205164222
Глубокая фуксия Крайола#C154C119384193
Глубокий желто-коричневый#593315895121
Глубокий желто-розовый#F64A462467470
Глубокий желтовато-зеленый#00541F08431
Глубокий желтый#B579001811210
Глубокий желтый зеленый#425E17669423
Глубокий зеленовато-желтый#9F82001591300
Глубокий зеленый#00452406936
Глубокий карминно-розовый#EF30382394856
Глубокий карминный#A9203E1693262
Глубокий коралловый#FF40402556464
Глубокий коричневый#4D220E773414
Глубокий красно-коричневый#4900057305
Глубокий красно-оранжевый#A91D111692917
Глубокий красно-пурпурный#6413491001973
Глубокий красный#7B001C123028
Глубокий оливково-зеленый#14230020350
Глубокий оранжево-желтый#D76E002151100
Глубокий оранжевый#C34D0A1957710
Глубокий пурпурно-красный#6F0035111053
Глубокий пурпурно-розовый#EB528423582132
Глубокий пурпурно-синий#1A153F262163
Глубокий пурпурный#531A50832680
Глубокий розовый#FF149325520147
Глубокий синевато-зеленый#00382B05643
Глубокий синий#002F5504785
Глубокий фиолетово-черный#24093536953
Глубокий фиолетовый#4231896649137
Голубино-синий#606E8C96110140
Голубой#42AAFF66170255
Голубой (Морозное небо)#00BFFF0191255
Голубой колокольчик Крайола#A2A2D0162162208
Голубой Крайола#80DAEB128218235
Горечавково-синий#0E294B144175
Горный луг#30BA8F48186143
Городское небо (Пасмурно-небесный)#87CEEB135206235
Горчичный#FFDB5825521988
Горько-сладкий#FD7C6E253124110
Гранатовый#F347232437135
Гранитовый серый (Гранитный)#2F353B475359
Графитно-черный#1C1C1C282828
Графитовый серый#474A51717481
Гридеперлевый#C7D0CC199208204
Грузинский розовый#D7186821524104
Грушево-зеленый#D1E23120922649
Грушевый#EFD33423921152
Гуммигут#E49B0F22815515
Гусеница#B2EC5D17823693
Дартмутский зеленый#00693E010562
Джазовый джем#CA376720255103
Джинсовый синий#1560BD2196189
Дикая клубника Крайола#FF43A425567164
Дикий арбуз Крайола#FC6C85252108133
Дикий синий Крайола#A2ADD0162173208
Дымчато-белый#F5F5F5245245245
Дынно-желтый#F4A9002441690
Дыня Крайола#FDBCB4253188180
Железно-серый#434B4D677577
Желтая сера#EDFF2123725533
Желтая слоновая кость#E1CC4F22520479
Желто-зеленый#9ACD3215420550
Желто-зеленый Крайола#C5E384197227132
Желто-золотой#CDA43420516452
Желто-оливковый#47402E716446
Желто-оранжевый#ED760E23711814
Желто-оранжевый Крайола#FFAE4225517466
Желто-персиковый#FADFAD250223173
Желто-розовый#FFE4B2255228178
Желто-серый#8F8B66143139102
Желтовато-белый#FFE2B7255226183
Желтовато-серый#CAA885202168133
Желтый#FFFF002552550
Желтый карри#9D91011571451
Желтый Крайола#FCE883252232131
Желтый ракитник#D6AE012141741
Жемчужно-белый#EAE6CA234230202
Жженый апельсин (Выгоревший оранжевый)#CC5500204850
Жимолость#CB6586203101134
Защитно-синий#1E90FF30144255
Защитный хаки (Камуфляжный)#78866B120134107
Звезды в шоке#FF47CA25571202
Зеленая лужайка#7CFC001242520
Зеленая сосна#01796F1121111
Зеленая сосна Крайола#15807821128120
Зелено-бежевый#BEBD7F190189127
Зелено-желтый#ADFF2F17325547
Зелено-желтый Крайола#F0E891240232145
Зелено-коричневый#826C3413010852
Зелено-лаймовый#BFFF001912550
Зелено-серый#4D5645778669
Зелено-синий#1F3438315256
Зелено-синий Крайола#1164B417100180
Зеленовато-белый#F5E6CB245230203
Зеленовато-серый#7A7666122118102
Зеленовато-черный#181513242119
Зеленоватый мокрый асфальт#4E5452788482
Зеленое море#2E8B574613987
Зеленые джунгли Крайола#3BB08F59176143
Зеленые джунгли Крайола 90-го года#29AB8741171135
Зеленый#00800001280
Зеленый Крайола#1CAC7828172120
Зеленый лишайник, мох (Цвет зеленого мха)#ADDFAD173223173
Зеленый Мичиганского университета#006633010251
Зеленый мох#2F4538476956
Зеленый орел#00495307383
Зеленый папоротник#4F79427912166
Зеленый трилистник#009A63015499
Зеленый чай#D0F0C0208240192
Золотарник Крайола#FCD975252217117
Золотисто-березовый#DAA52021816532
Золотисто-каштановый#712F261134738
Золотой (Золотистый)#FFD7002552150
Золотой Крайола#E7C697231198151
Ивово-коричневый#321414502020
Известковая глина#79443B1216859
Изумруд#009B770155119
Изумрудно-зеленый#2872334011451
Изумрудный#50C87880200120
Индиго#4B0082750130
Индиго Крайола#5D76CB93118203
Индийский зеленый#138808191368
Индийский красный, каштановый#CD5C5C2059292
Ирландский зеленый#4CBB177618723
Июньский бутон#BDDA5718921887
Кадетский синий#5F9EA095158160
Кадетский синий Крайола#B0B7C6176183198
Камелопардовый#A25F2A1629542
Каменно-серый#8B8C7A139140122
Канареечный (Ярко-желтый)#FFFF99255255153
Капри синий#1B55832785131
Кардинал#C41E3A1963058
Карибский зеленый#1CD3A228211162
Кармин#960018150024
Карминно-красный#A2231D1623529
Карминно-розовый#EB4C422357666
Карминово-красный#FF0033255051
Каштаново-коричневый#633A34995852
Каштановый Крайола#BC5D581889388
Кварцевый#99958C153149140
Кварцевый серый#6C696010810596
Киноварь#FF4D00255770
Кирпично-красный#CB41542036584
Кирпичный#8845351366953
Китайский красный (Киноварь)#E342342276652
Кленовый зеленый#507D2A8012542
Клубнично-красный#D530322134850
Кобальтово-синий#1E213D303361
Кобальт синий (Кобальтовый)#0047AB071171
Кожа буйвола (Палевый)#F0DC82240220130
Кожура апельсина#FFA0002551600
Кораллово-красный#B328211794033
Коралловый#FF7F5025512780
Кордованский#893F451376369
Коричневато-оранжевый#B151241778136
Коричневато-розовый#CD9A7B205154123
Коричневато-серый#503D33806151
Коричневато-черный#140F0B201511
Коричнево-бежевый#8A664213810266
Коричнево-бордовый#A52A2A1654242
Коричнево-желтый цвета увядших листьев#C19A6B193154107
Коричнево-зеленый#39352A575342
Коричнево-красный#781F191203125
Коричнево-малиновый#80000012800
Коричнево-малиновый Крайола#C8385A2005690
Коричнево-оливковый#25221B373427
Коричневый#964B00150750
Коричневый Крайола#B4674D18010377
Коричневый серый#464531706949
Коричневый цвета кожанного седла для лошади#8B45131396919
Коричный#7B3F00123630
Королевская фуксия#CA2C9220244146
Королевский пурпурный Крайола#7851A912081169
Королевский синий#4169E165105225
Космические сливки#FFF8E7255248231
Космос#414A4C657476
Кофейный#442D25684537
Крайоловый Абрикос#FDD5B1253213177
Красно-буро-оранжевый#CD5700205870
Красно-желто-коричневый#80461B1287027
Красно-коричневый#592321893533
Красно-оранжевый#C93C202016032
Красно-оранжевый Крайола#FF53492558373
Красно-сиреневый#6D3F5B1096391
Красно-фиолетовый#922B3E1464362
Красно-фиолетовый Крайола#C0448F19268143
Красновато-серый#8B6C6213910898
Красновато-черный#1E1112301718
Красное дерево#C04000192640
Красное дерево Крайола#CD4A4C2057476
Красный#FF000025500
Красный Крайола#EE204D2383277
Красный песок#F4A46024416496
Кремово-желтый#FFFDD0255253208
Кремовый#FDF4E3253244227
Кремовый хаки#C3B091195176145
Кричащий зеленый#76FF7A118255122
Крутой розовый Крайола#FB607F25196127
Кукурузно-желтый#E4A01022816016
Кукурузный#FBEC5D25123693
Лаванда (Лавандовый)#E6E6FA230230250
Лавандовый Крайола#FCB4D5252180213
Лавандовый розовый#FBA0E3251160227
Лазерный лимон#FEFE2225425434
Лазурно-серый (Зеленовато-синий)#007BA70123167
Лазурно-синий#025669286105
Лазурный, Азур#007FFF0127255
Лазурный Крайола#1DACD629172214
Лайм#00FF0002550
Лаймово-зеленый#32CD325020550
Ламантин#979AAA151154170
Латунный#B5A64218116666
Лесной волк#DBD7D2219215210
Лесной зеленый#228B223413934
Ливерный#534B4F837579
Лиловый#DB7093219112147
Лимонно-желтый#C7B44619918070
Лимонно-желтый Крайола#FFF44F25524479
Лимонно-кремовый#FFFACD255250205
Лимонный#FDE91025323316
Лиственно-зеленый#2D572C458744
Лиственный зеленый Крайола#6DAE81109174129
Лососево-красный#D950302178048
Лососево-оранжевый#E551372298155
Лососевый#FF8C69255140105
Лососевый Крайола#FF9BAA255155170
Льняной#FAF0E6250240230
Люминесцентный красный#F8000024800
Люминесцентный ярко-оранжевый#FFA42025516432
Лягушка в обмороке#7B917B123145123
Магическая мята#AAF0D1170240209
Магнолия#F8F4FF248244255
Маджента, Фуксия (Пурпурный)#FF00FF2550255
Маджента Крайола#F664AF246100175
Маисовый#EDD19C237209156
Майский зеленый#4C91417614565
Макароны и сыр#FFBD88255189136
Малахитовый#0BDA511121881
Малиново-красный#C51D341972952
Малиново-розовый#B3446C17968108
Малиновый#DC143C2202060
Мальва (Розовато-лиловый)#99336615351102
Манго-танго#FF824325513067
Мандариновое танго#E1523D2258261
Мандариновый#FF88002551360
Маренго#4C58667688102
Марсала#AD655F17310195
Махагон коричневый#4C2F27764739
Медно-коричневый#8E402A1426442
Медно-розовый (Бледный розовато-лиловый)#996666153102102
Медный#B8733318411551
Медный Крайола#DD9475221148117
Медовая роса#F0FFF0240255240
Медово-желтый#A983071691317
Медовый#FEE5AC254229172
Международный оранжевый (Сигнальный)#FF4F00255790
Мертвенный индиго#00416A065106
Миндаль Крайола#EFDECD239222205
Миртовый#21421E336630
Мовеин (Анилиновый пурпур)#EF00972390151
Модная фуксия#F400A12440161
Мокасиновый#FFE4B5255228181
Мокрый тропический лес#17806D23128109
Морковный#F362232439835
Морской зеленый#54FF9F84255159
Морской зеленый Крайола#9FE2BF159226191
Мурена#1C6B7228107114
Мусульманский зеленый#00990001530
Мышино-серый#646B6310010799
Мята (Цвет зеленой мяты)#98FF98152255152
Мятно-бирюзовый#497E7673126118
Мятно-зеленый#20603D329661
Мятно-кремовый#F5FFFA245255250
Мятный#3EB48962180137
Нарциссово-желтый#DC9D002201570
Насыщенный желто-зеленый#7F8F1812714324
Насыщенный желто-коричневый#95500C1498012
Насыщенный желто-розовый#FF7A5C25512292
Насыщенный желтовато-зеленый#4784307113248
Насыщенный желтый#E59E1F22915831
Насыщенный зеленовато-желтый#CCA81720416823
Насыщенный зеленовато-синий#00677E0103126
Насыщенный зеленый#006B3C010760
Насыщенный коричневый#7533131175119
Насыщенный красно-коричневый#7F180D1272413
Насыщенный красно-оранжевый#FFB96125518597
Насыщенный красно-пурпурный#9A366B15454107
Насыщенный красный#BF22331913451
Насыщенный оливково-зеленый#0A450010690
Насыщенный оранжево-желтый#FF8E0D25514213
Насыщенный оранжевый#EC7C2623612438
Насыщенный пурпурно-красный#B328511794081
Насыщенный пурпурно-розовый#F6768E246118142
Насыщенный пурпурно-синий#4743897167137
Насыщенный розовый#FD7B7C253123124
Насыщенный синевато-зеленый#006D5B010991
Насыщенный синий#00538A083138
Насыщенный фиолетовый#53377A8355122
Натуральная умбра#734A121157418
Небесная лазурь#F0FFFF240255255
Небесно-синий#2271B334113179
Небесный#7FC7FF127199255
Нежно-оливковый#6B8E2310714235
Незрелый желтый#FFFF66255255102
Неоново-морковный#FFA34325516367
Нефритовый#00A86B0168107
Ниагара#9DB1CC157177204
Ночной синий#252850374080
Обычный весенний бутон#C9DC87201220135
Огненная сиенна Крайола#EA7E5D23412693
Огненно-красный#AF2B1E1754330
Огненный оранжевый#FF7F4925512773
Одуванчиковый#FDDB6D253219109
Океанская синь#1D334A295174
Оксид красный#6424241003636
Олень коричневый#59351F895331
Оливково-желтый#99995015315380
Оливково-зеленый#424632667050
Оливково-зеленый Крайола#BAB86C186184108
Оливково-коричневый#6F4F281117940
Оливково-черный#121910182516
Оливковый#8080001281280
Оливковый серый#4D4234776652
Опаловый зеленый#015D5219382
Оперный розовато-лиловый#B784A7183132167
Оранжевая заря#FD5E532539483
Оранжево-желтый Крайола#F8D568248213104
Оранжево-коричневый#A65E2E1669446
Оранжево-красный Крайола#FF2B2B2554343
Оранжево-персиковый#FFCC99255204153
Оранжево-розовый#FF9966255153102
Оранжевый#FFA5002551650
Оранжевый Крайола#FF753825511756
Орехово-коричневый#5B3A29915841
Ориент красный#B324281793640
Орхидея#DA70D6218112214
Орхидея Крайола#E6A8D7230168215
Отборный желтый#FFBA002551860
Отдаленно-синий#49678D73103141
Охотничий зеленый#355E3B539459
Охра#CC772220411934
Охра желтая#AEA04B17416075
Охра коричневая#955F201499532
Очень бледно-пурпурный#E6BBC1230187193
Очень бледный зеленый#D8DEBA216222186
Очень бледный пурпурно-синий#CBBAC5203186197
Очень бледный синий#C1CACA193202202
Очень бледный фиолетовый#D8B1BF216177191
Очень глубокий желто-зеленый#0028000400
Очень глубокий красно-пурпурный#47073671754
Очень глубокий красный#4F001479020
Очень глубокий пурпурно-красный#47002771039
Очень глубокий пурпурный#320B35501153
Очень светло-пурпурный#E3A9BE227169190
Очень светлый желто-зеленый#C6DF90198223144
Очень светлый зеленовато-синий#A3C6C0163198192
Очень светлый зеленый#98C793152199147
Очень светлый пурпурно-синий#BAACC7186172199
Очень светлый синевато-зеленый#A0D6B4160214180
Очень светлый синий#A6BDD7166189215
Очень светлый фиолетовый#EEBEF1238190241
Очень темно-пурпурный#230D21351333
Очень темный алый#56031986325
Очень темный желто-зеленый#132712193918
Очень темный зеленовато-синий#02202723239
Очень темный зеленый#16251C223728
Очень темный красно-пурпурный#270A1F391031
Очень темный красный#320A18501024
Очень темный оливковый#362C12544418
Очень темный пурпурно-красный#28071A40726
Очень темный синевато-зеленый#001D1802924
Очень темный хаки#4C3C18766024
Очищенный миндаль#FFEBCD255235205
Панг#C7FCEC199252236
Папоротник Крайола#71BC78113188120
Папоротниково-зеленый#3D642D6110045
Пастельно-бирюзовый#7FB5B5127181181
Пастельно-желтый#EFA94A23916974
Пастельно-зеленый#77DD77119221119
Пастельно-оранжевый#FF751425511720
Пастельно-розовый#FFD1DC255209220
Пастельно-синий#5D9B9B93155155
Пастельно-фиолетовый#A18594161133148
Патиново-зеленый#3166504910280
Перекати-поле#DEAA88222170136
Перламутрово-бежевый#6A5D4D1069377
Перламутрово-ежевичный#6C6874108104116
Перламутрово-зеленый#1C542D288445
Перламутрово-золотой#7053351128353
Перламутрово-оранжевый#C358311958849
Перламутрово-розовый#B44C431807667
Перламутрово-рубиновый#7214221142034
Перламутрово-фиолетовый#8673A1134115161
Перламутровый горечавково-синий#2A647842100120
Перламутровый медный#763C281186040
Перламутровый мышино-серый#898176137129118
Перламутровый ночной#102C54164484
Перламутровый опаловый#193737255555
Перламутровый светло-серый#9C9C9C156156156
Перламутровый темно-серый#828282130130130
Персидский зеленый#00A6930166147
Персидский индиго#32127A5018122
Персидский красный#CC33332045151
Персидский розовый#FE28A225440162
Персидский синий#6600FF1020255
Персиковый#FFE5B4255229180
Персиковый Крайола#FFCFAB255207171
Перу#CD853F20513363
Песок пустыни#EFCDB8239205184
Песочно-желтый#C6A664198166100
Песочный#FCDD76252221118
Песочный серо-коричневый#96711715011323
Пигментный зеленый#00A550016580
Пихтовый зеленый#31372B495543
Пламенная маджента Крайола#F8173E2482362
Платиново-серый#7F7679127118121
Побег папайи#FFEFD5255239213
Полумрак Крайола#8A795D13812193
Полуночно-синий#003366051102
Полуночный синий Крайола#1A48762672118
Полуночный черный#1919702525112
Последний вздох Жако#FF921825514624
Почти черный#131313191919
Призрачно-белый#F8F8FF248248255
Пурпурная пицца#FF00CC2550204
Пурпурно-белый#FADBC8250219200
Пурпурно-красный#75151E1172130
Пурпурно-серый#88706B136112107
Пурпурно-синий#20155E322194
Пурпурно-фиолетовый#4A192C742544
Пурпурно-черный#1B1116271722
Пурпурное горное величие#9D81BA157129186
Пурпурное сердце#7442C811666200
Пурпурный#8000801280128
Пшеничный#F5DEB3245222179
Пылкий красно-оранжевый#F75E252479437
Пылкий розовый#FF7E93255126147
Пыльно-серый#7D7F7D125127125
Пыльный голубой#B0E0E6176224230
Пюсовый#CC8899204136153
Радикальный красный#FF496C25573108
Рапсово-желтый#F3DA0B24321811
Резедово-зеленый#5872468811470
Ржаво-коричневый#B7410E1836514
Розовато-лиловый Крайола#EF98AA239152170
Розовато-серый#C8A696200166150
Розовая гвоздика#FFAACC255170204
Розовая долина#AB4E521717882
Розовая фуксия#FF77FF255119255
Розово-золотой#B76E79183110121
Розово-коричневый#BC8F8F188143143
Розово-лавандовый#FFF0F5255240245
Розово-серо-коричневый#905D5D1449393
Розово-фиолетовый#EE82EE238130238
Розово-эбонитовый#6748461037270
Розовый#FFC0CB255192203
Розовый (Пощекочи меня)#FC89AC252137172
Розовый антик#D36E70211110112
Розовый кварц#AA98A9170152169
Розовый лес#65000B101011
Розовый Маунтбэттена#997A8D153122141
Розовый поросенок#FDDDE6253221230
Розовый фламинго#FC74FD252116253
Розовый щербет#F78FA7247143167
Рубиново-красный#9B111E1551730
Румянец#DE5D8322293131
Рыжий#D77D3121512549
Салатовый#99FF99153255153
Сангина#92000A146010
Сапфирово-синий#1D1E33293051
Сапфировый#082567837103
Светлая вишня#DE31632224999
Светлая мальва (Светло-розовато-лиловый)#DCD0FF220208255
Светлая Сиена (Почти чистый оранжевый)#E28B002261390
Светлая слива#DDA0DD221160221
Светлая слоновая кость#E6D690230214144
Светло-бирюзовый#40E0D064224208
Светло-вишневый Крайола#DD449222168146
Светло-голубой#87CEFA135206250
Светло-желтый#FFFFE0255255224
Светло-желтый золотистый#FAFAD2250250210
Светло-зеленый#90EE90144238144
Светло-золотистый#FFEC8B255236139
Светло-коралловый#FFBCAD255188173
Светло-коричневый#98765415211884
Светло-морковный#ED912123714533
Светло-оливковый#846A2013210632
Светло-песочный#FDEAA8253234168
Светло-пурпурный#BA7FA2186127162
Светло-розовая фуксия#F984EF249132239
Светло-розовый#FFB6C1255182193
Светло-серебристый#C9C0BB201192187
Светло-серый#BBBBBB187187187
Светло-синий#A6CAF0166202240
Светло-тициановый#D84B202167532
Светло-фиолетовый#876C99135108153
Светлое зеленое море#20B2AA32178170
Светлый аспидно-серый#778899119136153
Светлый глубокий желтый#FFD35F25521195
Светлый джинсовый#2B6CC443108196
Светлый желто-зеленый#DCD36A220211106
Светлый желто-коричневый#BB8B5418713984
Светлый желто-розовый#FFB28B255178139
Светлый зеленовато-белый#BAAF96186175150
Светлый зеленовато-желтый#FFDE5A25522290
Светлый зеленовато-синий#649A9E100154158
Светлый карминово-розовый#E6676123010397
Светлый коричневато-серый#8B6D5C13910992
Светлый коричневый#A8654016810164
Светлый красно-коричневый#AA665117010281
Светлый красно-пурпурный#BB6C8A187108138
Светлый малиново-красный#E632442305068
Светлый оливково-коричневый#945D0B1489311
Светлый оливковый серый#88735913611589
Светлый оранжевый#FFA16125516197
Светлый пурпурно-розовый#FFA8AF255168175
Светлый пурпурно-серый#C8A99E200169158
Светлый пурпурно-синий#837DA2131125162
Светлый розово-лиловый#EA899A234137154
Светлый серо-желто-коричневый#B48764180135100
Светлый серо-коричневый#946B5414810784
Светлый серо-красно-коричневый#966A5715010687
Светлый серо-красный#B17267177114103
Светлый серо-оливковый#8B734B13911575
Светлый серо-пурпурно-красный#B27070178112112
Светлый серо-синий#84C3BE132195190
Светлый серый#D7D7D7215215215
Светлый сине-серый#6C92AF108146175
Светлый синевато-зеленый#669E85102158133
Светлый синевато-серый#BEADA1190173161
Светлый синий#ADD8E6173216230
Светлый стальной синий#B0C4DE176196222
Светлый телегрей#D0D0D0208208208
Светлый хаки#F0E68C240230140
Светлый циан#E0FFFF224255255
Селадон#ACE1AF172225175
Сепия (Каракатица)#7042141126620
Сепия коричневый#382C1E564430
Сепия Крайола#A5694F16510579
Серая белка#78858B120133139
Серая спаржа#465945708969
Серая умбра#332F2C514744
Серебристо-серый#8A9597138149151
Серебряный#C0C0C0192192192
Серебряный Крайола#CDC5C2205197194
Серо-бежевый#9E9764158151100
Серобуромалиновый#73518411581132
Серовато-желто-зеленый#90845B14413291
Серовато-желто-коричневый#7858401208864
Серовато-желто-розовый#D39B85211155133
Серовато-желтый#CEA26220616298
Серовато-зеленовато-желтый#C4A55F19616595
Серовато-зеленый#575E4E879478
Серовато-коричневый#5A3D30906148
Серовато-красно-коричневый#5E3830945648
Серовато-красно-оранжевый#B85D431849367
Серовато-красно-пурпурный#7D4D5D1257793
Серовато-красный#8C47431407167
Серовато-оливковый#52442C826844
Серовато-оранжевый#C2A894194168148
Серовато-пурпурно-красный#8C48521407282
Серовато-пурпурно-розовый#CC9293204146147
Серовато-пурпурно-синий#413D51656181
Серовато-пурпурный#72525C1148292
Серовато-розовый#CF9B8F207155143
Серовато-синий#4A545C748492
Серовато-фиолетовый#46394B705775
Сероватый оливково-зеленый#48442D726845
Серое окно#9DA1AA157161170
Серый#808080128128128
Серый бетон#686C5E10410894
Серый зеленый чай#CADABA202218186
Серый коричневый#403A3A645858
Серый Крайола#95918C149145140
Серый мох#6C705910811289
Серый нейтральный#A0A0A4160160164
Серый оливковый#3E3B32625950
Серый синий#26252D383745
Серый хаки#6A5F311069549
Серый шелк#CAC4B0202196176
Серый шифер, аспидно-серый#708090112128144
Сигнальный желтый#E5BE012291901
Сигнальный зеленый#317F434912767
Сигнальный коричневый#6C3B2A1085942
Сигнальный красный#A520191653225
Сигнальный оранжевый#FF99002551530
Сигнальный серый#969992150153146
Сигнальный синий#1E2460303696
Сигнальный фиолетовый#924E7D14678125
Сигнальный черный#282828404040
Сиена#A0522D1608245
Сиена жженая#E9745123311681
Сизый#79A0C1121160193
Сине-зеленый#1F3A3D315861
Сине-зеленый Крайола#0D98BA13152186
Сине-лиловый#8A2BE213843226
Сине-серый Крайола#6699CC102153204
Сине-сиреневый#6C467510870117
Сине-фиолетовый Крайола#7366BD115102189
Синевато-белый#F9DFCF249223207
Синевато-серый#7D746D125116109
Синевато-черный#151719212325
Синий#0000FF00255
Синий-синий иней#AFDAFC175218252
Синий Градуса#007DFF0125255
Синий Клейна#3A75C458117196
Синий Крайола#1F75FE31117254
Синий серый#474B4E717578
Синий цвета яиц странствующего дрозда#1FCECB31206203
Синий чирок#18A7B524167181
Синий экран смерти#122FAA1847170
Синяя лазурь (Лазурно-голубой)#2A52BE4282190
Синяя пыль#003399051153
Синяя сталь#4682B470130180
Синяя Элис#F0F8FF240248255
Сиреневый#C8A2C8200162200
Сияющая орхидея#B565A7181101167
Скандальный оранжевый#FF6E4A25511074
Скарлет#FC28472524071
Сладкая вата#FFBCD9255188217
Сланцево-серый#434750677180
Сливовый#6600661020102
Сливовый Крайола#8E458514269133
Сливочно-кремовый#F2DDC6242221198
Сливочный#F2E8C9242232201
Слоновая кость#FFFFF0255255240
Снежно-синий#ACE5EE172229238
Солнечно-желтый#F39F1824315924
Сомон#EFAF8C239175140
Сосновый зеленый#2C5545448569
Сочный каштановый Крайола#B94E481857872
Спаржа#7BA05B12316091
Спаржа Крайола#87A96B135169107
Средний карминный#AF40351756453
Средний персидский синий#0067A50103165
Средний пурпурный#9370D8147112216
Средний серый#817066129112102
Стальной синий#231A24352636
Старинный розовый#C08081192128129
Старое золото#CFB53B20718159
Старое кружево#FDF5E6253245230
Старый лен#EEDC82238220130
Сырая охра#D68A5921413889
Сырая умбра#714B231137535
Телегрей#909090144144144
Телемагента#CF347620752118
Темная Византия#5D3954935784
Темная орхидея#9932CC15350204
Темно-алый#CB28212034033
Темно-бирюзовый#116062179698
Темно-голубой#3B83BD59131189
Темно-грушевый#D8A9032161693
Темно-желтый#B07D2B17612543
Темно-зеленый#01322015032
Темно-каштановый#98696015210596
Темно-коралловый#CD5B452059169
Темно-коричневый#6543211016733
Темно-красный#8B000013900
Темно-лазурный#08457E869126
Темно-лососевый#E9967A233150122
Темно-мандариновый#FFA81225516818
Темно-оливковый#5568328510450
Темно-оранжевый#FF8C002551400
Темно-персиковый#FFDAB9255218185
Темно-пурпурный#472A3F714263
Темно-розовый#E7548023184128
Темно-серая мальва (Розовато-лилово-серый)#915F6D14595109
Темно-серо-коричневый#483C32726050
Темно-серый#49423D736661
Темно-синий#00213703355
Темно-синий (Цвет формы морских офицеров)#00008000128
Темно-синий Крайола#1974D225116210
Темно-фиолетовый#9400D31480211
Темное зеленое море#8FBC8F143188143
Темный аспидно-синий#483D8B7261139
Темный весенне-зеленый#1772452311469
Темный желто-зеленый#57A6398716657
Темный желто-коричневый#91815114512981
Темный желто-розовый#CC6C5C20410892
Темный желтовато-зеленый#304B26487538
Темный желтовато-коричневый#3F2512633718
Темный зеленовато-желто-зеленый#313830495648
Темный зеленовато-желтый#9B812715512939
Темный зеленовато-серый#45433B696759
Темный зеленовато-синий#00384105665
Темный зеленый#203A27325839
Темный зеленый чай#BADBAD186219173
Темный золотарник (Темно-золотой)#B8860B18413411
Темный индиго#31006249098
Темный Коричневый#35170C532312
Темный красно-коричневый#321011501617
Темный красно-оранжевый#9B2F1F1554731
Темный красно-пурпурный#4F273A793958
Темный красно-серый#523C36826054
Темный красный#681C231042835
Темный маджента#8B008B1390139
Темный мандарин#EA75002341170
Темный оливково-зеленый#232C16354422
Темный оливково-коричневый#302112483318
Темный оранжево-желтый#C3762919511841
Темный пастельно-зеленый#03C03C319260
Темный пурпурно-красный#5B1E31913049
Темный пурпурно-розовый#C76574199101116
Темный пурпурно-серый#564042866466
Темный пурпурно-синий#1A162A262242
Темный пурпурно-фиолетовый#6600991020153
Темный розовый#C76864199104100
Темный серо-желтый#A47C4516412469
Темный серо-коричневый#32221A503426
Темный серо-красно-коричневый#371F1C553128
Темный серо-красный#482A2A724242
Темный серо-оливково-зеленый#27261A393826
Темный серо-оливковый#2B2517433723
Темный серо-синий#2C3337445155
Темный синевато-зеленый#013A3315851
Темный синевато-черный#464544706968
Темный телегрей#82898F130137143
Темный терракотовый#4E3B31785949
Темный ультрамариновый#00008B00139
Темный хаки#BDB76B189183107
Темный циан#008B8B0139139
Темный черновато-пурпурный#452D35694553
Темный янтарь#FF7E002551260
Терракота#CC4E5C2047892
Терракотовый#904D301447748
Тиффани#0ABAB510186181
Тихоокеанский синий#1CA9C928169201
Тициановый#D53E07213627
Томатно-красный#A123121613518
Томатный#FF63472559971
Травяной#5DA1309316148
Травяной (Очень темный лимонный зеленый)#00640001000
Травяной зеленый#35682D5310445
Транспортно-желтый#FAD2012502101
Транспортный зеленый#3084464813270
Транспортный красный#CC060520465
Транспортный оранжевый#F540212456433
Транспортный пурпурный#A0347216052114
Транспортный серый#8D948D141148141
Транспортный синий#063971657113
Транспортный черный#1E1E1E303030
Трилистник Крайола#45CEA269206162
Тростниково-зеленый#6C715610811386
Турецкий розовый#B57281181114129
Тускло-амарантово-розовый#DDBEC3221190195
Тускло-розовый#FFE4E1255228225
Тусклый мандарин#F285002421330
Тусклый пурпурный#AE848B174132139
Тусклый серый#696969105105105
Тыква (Тыквенный)#FF751825511724
Ультрамариново-синий#20214F323379
Ультрамариновый#120A8F1810143
Умбра жженая#8A33241385136
Умеренно-бирюзовый#48D1CC72209204
Умеренно-зеленое море#3CB37160179113
Умеренно-оливковый#5E490F947315
Умеренно-темный пурпурный#803E7512862117
Умеренно зеленый#C0DCC0192220192
Умеренный аквамариновый#66CDAA102205170
Умеренный аспидно-синий#7B68EE123104238
Умеренный весенний зеленый#00FA9A0250154
Умеренный желто-зеленый#8B894013913764
Умеренный желто-коричневый#7D512D1258145
Умеренный желто-розовый#EE9374238147116
Умеренный желтовато-зеленый#657F4B10112775
Умеренный желтый#D79D4121515765
Умеренный зеленовато-желтый#C4A43D19616461
Умеренный зеленовато-синий#30626B4898107
Умеренный зеленый#3866465610270
Умеренный коричневый#6739231035735
Умеренный красно-оранжевый#D353392118357
Умеренный красно-пурпурный#8C456614069102
Умеренный красный#AB343A1715258
Умеренный оливково-зеленый#434B1B677527
Умеренный оранжево-желтый#F7943C24714860
Умеренный оранжевый#E8793E23212162
Умеренный пурпурно-красный#A738531675683
Умеренный пурпурно-розовый#E28090226128144
Умеренный пурпурно-синий#423C63666099
Умеренный пурпурный#7F487012772112
Умеренный розовый#EE9086238144134
Умеренный серо-коричневый#674C471037671
Умеренный синевато-зеленый#2F65564710186
Умеренный синий#3957785787120
Умеренный фиолетово-красный#C7158519921133
Умеренный фиолетовый#5439648457100
Умеренный цвет орхидеи#BA55D318685211
Фалунский красный#8018181282424
Фанданго#B5548918184137
Фельдграу#4D5D53779383
Фиалковый#EA8DF7234141247
Фиолетово-баклажанный#99119915317153
Фиолетово-красный Крайола#F7539424783148
Фиолетово-сизый#8000FF1280255
Фиолетово-синий#354D735377115
Фиолетово-синий Крайола#324AB25074178
Фиолетовый#8B00FF1390255
Фиолетовый Крайола (Пурпурный)#926EAE146110174
Фисташковый#BEF574190245116
Французский розовый#F64A8A24674138
Фталоцианиновый зеленый#123524185336
Фузи-вузи#CC6666204102102
Фуксия (Фуксин)#F754E124784225
Фуксия Крайола#C364C5195100197
Хаки#806B2A12810742
Хромовый зеленый#2E3A23465835
Цвет блошиного брюшка#4E160978229
Цвет ВКонтакте#4D719877113152
Цвет влюбленной жабы#3CAA3C6017060
Цвет детской неожиданности#F7F21A24724226
Цвет елки#2A5C0342923
Цвет желтого школьного автобуса#FFD8002552160
Цвет загара (Желто-коричневый)#D2B48C210180140
Цвет загара Крайола#FAA76C250167108
Цвет Красного моря#1F4037316455
Цвет маленького мандарина#FFA474255164116
Цвет медвежьего ушка#834D181317724
Цвет мокрого асфальта#505050808080
Цвет морской волны (Аква)#008CF00140240
Цвет морской раковины (Морская пена)#FFF5EE255245238
Цвет окраски птицы чирок (Сине-зеленый)#0080800128128
Цветочный белый#FFFAF0255250240
Цвет пергидрольной блондинки#EEE6A3238230163
Цвет пожарной машины#CE20292063241
Цвет слоновой кости (Айвори)#FFFDDF255253223
Цвет суеты#E3256B22737107
Цвет Твиттера#1FAEE931174233
Цвет Фейсбука#3B59985989152
Цвет Хабрахабра#78A2B7120162183
Цвет Черного моря#1A47802671128
Цвет шампанского#FCFCEE252252238
Цвет шелковистых нитевидных пестиков початков неспелой кукурузы#FFF8DC255248220
Цвет яйца дрозда#00CCCC0204204
Цвет Яндекса#FFCC002552040
Цементно-серый (Цементный)#7D8471125132113
Циан, Цвет морской волны#00FFFF0255255
Цинково-желтый#F8F32B24824343
Циннвальдит#EBC2AF235194175
Циннвальдитово-розовый#FFCBBB255203187
Черно-зеленый#343E40526264
Черно-коричневый#212121333333
Черно-красный#412227653439
Черно-оливковый#3B3C36596054
Черно-серый#23282B354043
Черно-синий#18171C242328
Черновато-зеленый#141613202219
Черновато-красный#1F0E11311417
Черновато-пурпурный#1D1018291624
Черновато-синий#161A1E222630
Черный#000000000
Черный янтарь#0A0A0A101010
Чертополох#D8BFD8216191216
Чертополох Крайола#EBC7DF235199223
Шамуа#A0804016012864
Шапка Деда Мороза#CA3A272025839
Шапка Санта-Клауса#ED48302377248
Шартрез, Ядовито-зеленый#7FFF001272550
Шафраново-желтый#F5D03324520851
Шафрановый#F4C43024419648
Шелковица Крайола#C54B8C19775140
Шокирующий розовый Крайола#FB7EFD251126253
Шоколадно-коричневый#45322E695046
Шоколадный#D2691E21010530
Экрю#CDB891205184145
Экстравагантный розовый Крайола#FF33CC25551204
Электрик#7DF9FF125249255
Электрик лайм (Лаймовый)#CCFF002042550
Электрик лайм Крайола#CEFF1D20625529
Ядовито-зеленый#40826D64130109
Янтарный#FFBF002551910
Яркий желто-зеленый#93AA001471700
Яркий желто-розовый#FF845C25513292
Яркий зеленовато-желтый#F4C8002442000
Яркий зеленый#007D34012552
Яркий красно-оранжевый#F13A132415819
Яркий красно-пурпурный#7E0059126089
Яркий красный#C10020193032
Яркий оранжево-желтый#FF8E002551420
Яркий оранжевый#FF68002551040
Яркий пурпурно-красный#D5265B2133891
Яркий пурпурный#94339114851145
Яркий синевато-зеленый#00836E0131110
Яркий фиолетовый Крайола#8F509D14380157
Ярко-бирюзовый#08E8DE8232222
Ярко-желтый#FFB3002551790
Ярко-зеленый#66FF001022550
Ярко-мандариновый#FFA089255160137
Ярко-розовый#FC0FC025215192
Ярко-синий#007CAD0124173
Ярко-сиреневый#E0B0FF224176255
Ярко-фиолетовый#CD00CD2050205

Цвета RAL – Таблица RAL CLASSIC — Все каталоги цветов RAL по CMYK и RGB с примерами — ColorScheme.

Ru

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

Цветовой стандарт RAL начинает свою историю с 1927 года, когда специалистами из «Управления по торговым стандартам» Германии была впервые разработана коллекция, состоящая на тот момент из 40 цветов. С тех пор палитра RAL постоянно расширяется. Компания выпускает каталоги цветов, веера, содержащие примеры красок по RAL, разрабатывает и добавляет новые образцы.

На нашем сайте имеются все три современные цветовые шкалы, таблицы RAL с раскладкой по CMYK и RGB.

Каталог RAL CLASSIC в настоящее время содержит 213 цветов, в том числе 15 перламутровых, 5 люминесцентных, и 2 железных.

Имя цвета в таблице RAL CLASSIC состоит из четырёхзначного числа в сочетании с префиксом «RAL» (например, RAL 1037). Первая цифра является кодом оттенка (1 – желтые, 2 – оранжевые, 3 – красные, 4 – фиолетовые, 5 – синие, 6 – зелёные, 7 – серые, 8 – коричневые, 9 – белые и чёрные). Остальные три цифры выбраны последовательно. Русскоязычное имя цвета (например, «солнечно-жёлтый» для RAL 1037) не является нормативным, для обозначения цвета достаточно запомнить лишь цифры.

Жёлтые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 1000
Зелёно-бежевый
 10  10  50  10  0   3  40  10#CCC58F204 197 143
RAL 1001
Бежевый
  0  20  50  20 10  20  40   0#D1BC8A209 188 138
RAL 1002
Песочно-жёлтый
  0  20  60  10  3  23  60   7#D2B773210 183 115
RAL 1003
Сигнальный жёлтый
  5  20  90   0  0  20 100   0#F7BA0B247 186  11
RAL 1004
Жёлто-золотой
  5  30 100   0  0  20 100  10#E2B007226 176   7
RAL 1005
Медово-жёлтый
 10  30 100   0 10  20  90   0#C89F04200 159   4
RAL 1006
Кукурузно-жёлтый
  5  30  90   0  0  30 100   0#E1A100225 161   0
RAL 1007
Нарциссово-жёлтый
  0  40 100   0  0  30 100   0#E79C00231 156   0
RAL 1011
Коричнево-бежевый
 30  40  70   0 20  50 100  10#AF8A54175 138  84
RAL 1012
Лимонно-жёлтый
 10  10  90   0 10  10 100   0#D9C022217 192  34
RAL 1013
Жемчужно-белый
  0   5  20  10 10  10  20   0#E9E5CE233 229 206
RAL 1014
Слоновая кость
  0  10  40  10 10  10  30   0#DED09F222 208 159
RAL 1015
Светлая слоновая кость
  0   5  30  10 10  10  20   0#EADEBD234 222 189
RAL 1016
Жёлтая сера
 10   0  90   0 10   0  80   0#EAF044234 240  68
RAL 1017
Шафраново-жёлтый
  0  30  70   0  0  30  90   0#F4B752244 183  82
RAL 1018
Цинково-жёлтый
  0   0  80   0  0   0  90   0#F3E03B243 224  59
RAL 1019
Серо-бежевый
  5  20  40  40 10  20  30   0#A4957D164 149 125
RAL 1020
Оливково-жёлтый
  1   5  30  40 10  10  50  25#9A9464154 148 100
RAL 1021
Рапсово-жёлтый
  0  10 100   0  0   0 100   0#EEC900238 201   0
RAL 1023
Транспортно-жёлтый
  0  10  90   0  0  10 100   0#F0CA00240 202   0
RAL 1024
Охра жёлтая
 30  40  70  10  0  20 100  25#B89C50184 156  80
RAL 1026 Флуоресцентный (Fluorescent)
Люминесцентный жёлтый
  0   0 100   0  0   0 100   0#F5FF00245 255   0
RAL 1027
Карри жёлтый
 10  20  90  40 30  30 100   0#A38C15163 140  21
RAL 1028
Дынно-жёлтый
  0  30 100   0  0  20 100   0#FFAB00255 171   0
RAL 1032
Жёлтый ракитник
  0  30  90  10  0  20 100  10#DDB20F221 178  15
RAL 1033
Георгиново-жёлтый
  0  30  90   0  0  30 100   0#FAAB21250 171  33
RAL 1034
Пастельно-жёлтый
  0  30  80   0  0  30  60   0#EDAB56237 171  86
RAL 1035 Жемчужный Глянец (Pearl Gloss)
Перламутрово-бежевый
 16  19  33  26 20  20  33  12#A29985162 153 133
RAL 1036 Жемчужный Глянец (Pearl Gloss)
Перламутрово-золотой
 33  46  80  18  9  36  97  28#927549146 117  73
RAL 1037
Солнечно-жёлтый
  0  40 100   0  0  35  90   0#EEA205238 162   5
Оранжевые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 2000
Жёлто-оранжевый
  0  50 100   0  0  40 100   0#DD7907221 121   7
RAL 2001
Красно-оранжевый
  0  80 100  20  0  70 100   0#BE4E24190  78  36
RAL 2002
Алый
  0  90 100  10  0  80 100   0#C63927198  57  39
RAL 2003
Пастельно-оранжевый
  0  52 100   0  0  60 100   0#FA842B250 132  43
RAL 2004
Оранжевый
  0  70 100   0  0  70 100   0#E75B12231  91  18
RAL 2005 Флуоресцентный (Fluorescent)
Люминесцентный оранжевый
  0  75  75   5  0  50 100   0#FF2300255  35   0
RAL 2007 Флуоресцентный (Fluorescent)
Люминесцентный ярко-оранжевый
  0  50 100   0  0  20  90   0#FFA421255 164  33
RAL 2008
Ярко-красно-оранжевый
  0  60 100   0  0  50 100   0#F3752C243 117  44
RAL 2009
Транспортный оранжевый
  5  70 100  10  0  60 100   0#E15501225  85   1
RAL 2010
Сигнальный оранжевый
  0  70 100  10  0  60 100   0#D4652F212 101  47
RAL 2011
Насыщенный оранжевый
  0  55 100   0  0  40 100   0#EC7C25236 124  37
RAL 2012
Лососёво-оранжевый
  0  60  70   0  0  80  80   0#DB6A50219 106  80
RAL 2013 Жемчужный Глянец (Pearl Gloss)
Перламутрово-оранжевый
  0  80 100  40 10  80 100  10#954527149  69  39
Красные тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 3000
Огненно-красный
  0 100 100  20  0 100  90   0#AB2524171  37  36
RAL 3001
Сигнальный красный
 20 100  90  10  0 100  90   0#A02128160  33  40
RAL 3002
Карминно-красный
 10 100  90  20  0 100  90   0#A1232B161  35  43
RAL 3003
Рубиново-красный
  0 100 100  40  0 100  90  15#8D1D2C141  29  44
RAL 3004
Пурпурно-красный
 20 100 100  60  0 100  90  30#701F29112  31  41
RAL 3005
Винно-красный
 20 100  80  40  0 100  90  50#5E2028 94  32  40
RAL 3007
Чёрно-красный
 60 100  70  80 50 100  90  40#402225 64  34  37
RAL 3009
Оксид красный
  5  90 100  80 20 100  90  30#703731112  55  49
RAL 3011
Коричнево-красный
 20 100 100  40  0 100  90  30#7E292C126  41  44
RAL 3012
Бежево-красный
  5  50  50  10 20  60  50   0#CB8D73203 141 115
RAL 3013
Томатно-красный
 20  90 100  20  0 100 100  15#9C322E156  50  46
RAL 3014
Розовый антик
  0  70  30  10 10  70  40   0#D47479212 116 121
RAL 3015
Светло-розовый
  0  50  20  10 10  40  10   0#E1A6AD225 166 173
RAL 3016
Кораллово-красный
  0  90  90  20  0  90  90  10#AC4034172  64  52
RAL 3017
Розовый
  0  80  50  10  0  80  40   0#D3545F211  84  95
RAL 3018
Клубнично-красный
  5  90  70   5  0  90 100   0#D14152209  65  82
RAL 3020
Транспортный красный
  0 100 100  10  0  90  90   0#C1121C193  18  28
RAL 3022
Лососёво-красный
  0  60  70   0  0  70  60   0#D56D56213 109  86
RAL 3024 Флуоресцентный (Fluorescent)
Люминесцентный красный
  0  80  90   0  0  70 100   0#F70000247   0   0
RAL 3026 Флуоресцентный (Fluorescent)
Люминесцентный ярко-красный
  0  80 100   0  0  70 100   0#FF0000255   0   0
RAL 3027
Малиново-красный
  0 100  70  20  0 100  60  15#B42041180  32  65
RAL 3028
Красный
  5 100 100   0  5 100 100   0#CB3334203  51  52
RAL 3031
Ориент красный
 20 100  90  20  0  90  60  15#AC323B172  50  59
RAL 3032 Жемчужный Глянец (Pearl Gloss)
Перламутрово-рубиновый
 10 100  90  50 10 100 100  30#711521113  21  33
RAL 3033 Жемчужный Глянец (Pearl Gloss)
Перламутрово-розовый
  8  84  72  13  0  93  93   7#B24C43178  76  67
Фиолетовые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 4001
Красно-сиреневый
 60  70   5  10 50  97  20   0#8A5A83138  90 131
RAL 4002
Красно-фиолетовый
 40 100  90   5  0 100  40  30#933D50147  61  80
RAL 4003
Вересково-фиолетовый
 10  70  10   0  7  90   0   0#D15B8F209  91 143
RAL 4004
Бордово-фиолетовый
 60 100  50  20 10 100   0  50#691639105  22  57
RAL 4005
Сине-сиреневый
 60 100   5  10 50  60   0   0#83639D131  99 157
RAL 4006
Транспортный пурпурный
 50 100   0  10 30 100   0   0#992572153  37 114
RAL 4007
Пурпурно-фиолетовый
 70 100  20  60 90   0  10  25#4A203B 74  32  59
RAL 4008
Сигнальный фиолетовый
 60  90   0  10 30 100   0   0#904684144  70 132
RAL 4009
Пастельно-фиолетовый
 40  40  30   0 17  40  10  15#A38995163 137 149
RAL 4010
Телемагента
 10  90  30   0  0 100   0   0#C63678198  54 120
RAL 4011 Жемчужный Глянец (Pearl Gloss)
Перламутрово-фиолетовый
 47  57   3   7 47  64   0   0#8773A1135 115 161
RAL 4012 Жемчужный Глянец (Pearl Gloss)
Перламутрово-ежевичный
 50  50  20  23 54  57   3  26#6B6880107 104 128
Синие тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 5000
Фиолетово-синий
100  40   5  40100  70  10  25#384C70 56  76 112
RAL 5001
Зелёно-синий
 90  20   0  80100  50  10  20#1F4764 31  71 100
RAL 5002
Ультрамариново-синий
100  70   0  40100  90   0   0#2B2C7C 43  44 124
RAL 5003
Сапфирово-синий
100  50   0  80 90   0  10  25#2A3756 42  55  86
RAL 5004
Чёрно-синий
100 100  70  40 84  53  47  56#1D1F2A 29  31  42
RAL 5005
Сигнальный синий
100  40   0  40 90  60   0   0#154889 21  72 137
RAL 5007
Бриллиантово-синий
 80  20   0  40100  40   0  20#41678D 65 103 141
RAL 5008
Серо-синий
 60   0   0  90100  50  10  60#313C48 49  60  72
RAL 5009
Лазурно-синий
 90  30  10  40100  40  10  20#2E5978 46  89 120
RAL 5010
Горечавково-синий
100  40   5  40100  70   0   0#13447C 19  68 124
RAL 5011
Стально-синий
100  60  10  80 96  46  10  40#232C3F 35  44  63
RAL 5012
Голубой
 90  30  10  10 97  26   0   0#3481B8 52 129 184
RAL 5013
Кобальтово-синий
100  60   0  60 90   0  10  25#232D53 35  45  83
RAL 5014
Голубино-синий
 50  20   0  40 64  41  11  12#6C7C98108 124 152
RAL 5015
Небесно-синий
100  30   0  10100  20   0   0#2874B2 40 116 178
RAL 5017
Транспортный синий
100  20   5  40 90  50   0   0#0E518D 14  81 141
RAL 5018
Бирюзово-синий
 90  10  40  10 93   7  33   3#21888F 33 136 143
RAL 5019
Капри синий
100  50  20  10100  30   0  20#1A5784 26  87 132
RAL 5020
Океанская синь
100   0  40  80100  30  50  40#0B4151 11  65  81
RAL 5021
Водная синь
100  20  50  10100   0  30  15#07737A  7 115 122
RAL 5022
Ночной синий
100 100  40  40 90   0  10  25#2F2A5A 47  42  90
RAL 5023
Отдалённо-синий
 80  40  10  20100  60  10   0#4D668E 77 102 142
RAL 5024
Пастельно-синий
 70  20  10  20 63  17   7   8#6A93B0106 147 176
RAL 5025 Жемчужный Глянец (Pearl Gloss)
Перламутровый горечавково-синий
 97  48  31  15100  30  20  20#296478 41 100 120
RAL 5026 Жемчужный Глянец (Pearl Gloss)
Перламутровый ночной синий
100  80   0  50 90   0  10  25#102C54 16  44  84
Зелёные тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 6000
Патиново-зелёный
 80  20  60  20 98   8  68  17#327662 50 118  98
RAL 6001
Изумрудно-зелёный
 90  30  90  10100   0 100  15#28713E 40 113  62
RAL 6002
Лиственно-зелёный
 90  40  90  10 90   0 100  25#276235 39  98  53
RAL 6003
Оливково-зелёный
 80  50  80  20 50  40 100  40#4B573E 75  87  62
RAL 6004
Сине-зелёный
100  50  60  40100  30  50  40#0E4243 14  66  67
RAL 6005
Зелёный мох
100  60  90  20100  20  90  30#0F4336 15  67  54
RAL 6006
Серо-оливковый
 90  80  90  20 80  70 100  60#40433B 64  67  59
RAL 6007
Бутылочно-зелёный
 80  50  80  60 80  60 100  60#283424 40  52  36
RAL 6008
Коричнево-зелёный
 70  50  70  80100 100 100  75#35382E 53  56  46
RAL 6009
Пихтовый зелёный
 90  50  90  60100  60  80  60#26392F 38  57  47
RAL 6010
Травяной зелёный
 70  10  80  40 70   0 100  25#3E753B 62 117  59
RAL 6011
Резедово-зелёный
 70  30  70   5 50  13  70  20#66825B102 130  91
RAL 6012
Чёрно-зелёный
100  80 100  20100  50  80  60#31403D 49  64  61
RAL 6013
Тростниково-зелёный
 40  20  60  40 40  40  70  10#797C5A121 124  90
RAL 6014
Жёлто-оливковый
 80  50  90  60 50  70 100  50#444337 68  67  55
RAL 6015
Чёрно-оливковый
 80  60  70  40100 100 100  75#3D403A 61  64  58
RAL 6016
Бирюзово-зелёный
100  30  80   0100   0  70  15#026A52  2 106  82
RAL 6017
Майский зелёный
 80  20 100  10 77   0  97   0#468641 70 134  65
RAL 6018
Желто-зелёный
 70   0  90   0 60   0 100   0#48A43F 72 164  63
RAL 6019
Бело-зелёный
 35   0  40   0 30   0  30   0#B7D9B1183 217 177
RAL 6020
Хромовый зелёный
 90  60  80  20 80  40 100  50#354733 53  71  51
RAL 6021
Бледно-зелёный
 50  10  50  10 43  13  50   7#86A47C134 164 124
RAL 6022
Коричнево-оливковый
 90  80 100  20 70 100  90  75#3E3C32 62  60  50
RAL 6024
Транспортный зелёный
 90  10  80  10 90 100  70   0#008754  0 135  84
RAL 6025
Папоротниково-зелёный
 80  30  90  10 50  10 100  25#53753C 83 117  60
RAL 6026
Опаловый зелёный
100  30  70  40100   0  70  15#005D52  0  93  82
RAL 6027
Светло-зелёный
 60   0  30   0 50   0  20   0#81C0BB129 192 187
RAL 6028
Сосновый зелёный
100  60 100   0100  30 100  40#2D5546 45  85  70
RAL 6029
Мятно-зелёный
100  20 100   5100   0 100   0#007243  0 114  67
RAL 6032
Сигнальный зелёный
 90  10  80   0 90   0  70   0#0F8558 15 133  88
RAL 6033
Мятно-бирюзовый
 80  20  50   0 90   0  40  17#478A84 71 138 132
RAL 6034
Пастельно-бирюзовый
 60  10  40   0 50   0  20  10#7FB0B2127 176 178
RAL 6035 Жемчужный Глянец (Pearl Gloss)
Перламутрово-зелёный
 90   0 100  75 90  10 100  30#1B542C 27  84  44
RAL 6036 Жемчужный Глянец (Pearl Gloss)
Перламутровый опаловый зелёный
100  10  60  50100  10  60  30#005D4C  0  93  76
RAL 6037
Зелёный
 90   0 100   0 90   0 100   0#008F39  0 143  57
RAL 6038 Флуоресцентный (Fluorescent)
Люминесцентный зелёный
100   0 100   0100   0 100   0#00BB2E  0 187  46
Серые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 7000
Серая белка
 40  10  10  40 33   6   6  36#7E8B92126 139 146
RAL 7001
Серебристо-серый
 10   0   0  40 20   7   7  30#8F999F143 153 159
RAL 7002
Оливково-серый
 30  30  50  40 37  37  57  15#817F68129 127 104
RAL 7003
Серый мох
 30  20  40  40 27  20  40  40#7A7B6D122 123 109
RAL 7004
Сигнальный серый
  0   0   0  45  7   4   4  33#9EA0A1158 160 161
RAL 7005
Мышино-серый
 30  10  20  60 48  42  39  20#6B716F107 113 111
RAL 7006
Бежево-серый
  0  10  30  60 29  43  56  35#756F61117 111  97
RAL 7008
Серое хаки
 30  40  70  40 10  30  90  40#746643116 102  67
RAL 7009
Зелёно-серый
 20  50  40  80 60  50  70  32#5B6259 91  98  89
RAL 7010
Брезентово-серый
 20   5  30  80 60  47  50  43#575D57 87  93  87
RAL 7011
Железно-серый
 40  10  20  80 60  40  30  30#555D61 85  93  97
RAL 7012
Базальтово-серый
 20   0  10  80 50  20  20  40#596163 89  97  99
RAL 7013
Коричнево-серый
 10  10  40  80 50  60 100  50#555548 85  85  72
RAL 7015
Сланцево-серый
 40  10  10  80 80  65  33  45#51565C 81  86  92
RAL 7016
Антрацитово-серый
 60  30  30  80100  50  30  60#373F43 55  63  67
RAL 7021
Чёрно-серый
 50  10   5  95100  90  70  50#2E3234 46  50  52
RAL 7022
Серая умбра
 30  20  40  80 80  80 100  75#4B4D46 75  77  70
RAL 7023
Серый бетон
 40  20  40  40 50  40  40   0#818479129 132 121
RAL 7024
Графитовый серый
 80  60  50  40 90  60  30  60#474A50 71  74  80
RAL 7026
Гранитовый серый
 60  20  30  80100  40  50  60#374447 55  68  71
RAL 7030
Каменно-серый
 20  10  20  40  0   0  10  40#939388147 147 136
RAL 7031
Сине-серый
 60  30  30  40 68  52  41  18#5D6970 93 105 112
RAL 7032
Галечный серый
  0   0  20  40  0   0  10  25#B9B9A8185 185 168
RAL 7033
Цементно-серый
 30  10  30  40 37  13  37  30#818979129 137 121
RAL 7034
Жёлто-серый
  5   5  40  40  0   0  30  40#939176147 145 118
RAL 7035
Светло-серый
  5   0   5  20 20  14  14   0#CBD0CC203 208 204
RAL 7036
Платиново-серый
 10  10  10  40 30  30  20  10#9A9697154 150 151
RAL 7037
Пыльно-серый
 30  20  20  40 11   8   8  46#7C7F7E124 127 126
RAL 7038
Агатовый серый
 30  10  20  20 30  22  22   0#B4B8B0180 184 176
RAL 7039
Кварцевый серый
 50  40  50  40 60  60  60   0#6B695F107 105  95
RAL 7040
Серое окно
 20   5  10  40 30  20  10  10#9DA3A6157 163 166
RAL 7042
Транспортный серый A
 30  10  20  40 17   9   9  33#8F9695143 150 149
RAL 7043
Транспортный серый B
 30  10  20  80 87  81  74  29#4E5451 78  84  81
RAL 7044
Серый шёлк
  0   0  15  30 10  10  10  10#BDBDB2189 189 178
RAL 7045
Телегрей 1
 20  10  10  40 10   0   0  40#91969A145 150 154
RAL 7046
Телегрей 2
 30  10  10  40 31  18  14  25#82898E130 137 142
RAL 7047
Телегрей 4
  0   0   5  20  0   0   0  12#CFD0CF207 208 207
RAL 7048 Жемчужный Глянец (Pearl Gloss)
Перламутровый мышино-серый
 32  32  39  27 18  18  31  34#888175136 129 117
Коричневые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 8000
Зелёно-коричневый
 50  50  80  10 20  40  90  25#887142136 113  66
RAL 8001
Охра коричневая
 40  60  90  10 10  50 100  10#9C6B30156 107  48
RAL 8002
Сигнальный коричневый
 60  80  80  10 20  80 100  30#7B5141123  81  65
RAL 8003
Глиняный коричневый
 50  70  80  10  0  60 100  40#80542F128  84  47
RAL 8004
Медно-коричневый
 40  80  80  10  0  70 100  25#8F4E35143  78  53
RAL 8007
Олень коричневый
 60  70  80  20  0  70 100  40#6F4A2F111  74  47
RAL 8008
Оливково-коричневый
 50  60  70  20 30  60 100  10#6F4F28111  79  40
RAL 8011
Орехово-коричневый
 10  60 100  80 10  90 100  50#5A3A29 90  58  41
RAL 8012
Красно-коричневый
  5 100 100  80  0 100 100  50#673831103  56  49
RAL 8014
Сепия коричневый
 30  60 100  80 40  70 100  50#49392D 73  57  45
RAL 8015
Каштаново-коричневый
  0  90 100  80 10 100 100  50#633A34 99  58  52
RAL 8016
Махагон коричневый
 40  80  80  80 30  90  90  50#4C2F26 76  47  38
RAL 8017
Шоколадно-коричневый
 60  80  80  80 50 100  90  60#44322D 68  50  45
RAL 8019
Серо-коричневый
 90  90  80  80 70 100  90  75#3F3A3A 63  58  58
RAL 8022
Чёрно-коричневый
100 100  80  95 70 100  90  75#211F20 33  31  32
RAL 8023
Оранжево-коричневый
 20  70 100  20  0  70 100  10#A65E2F166  94  47
RAL 8024
Бежево-коричневый
 30  60  70  40  0  60 100  40#79553C121  85  60
RAL 8025
Бледно-коричневый
 40  50  60  40  7  60  93  43#755C49117  92  73
RAL 8028
Терракотовый
 20  50  70  80 40  80 100  50#4E3B2B 78  59  43
RAL 8029
Перламутровый медный
 23  80  93  43  0  80 100  40#773C27119  60  39
Чёрные и белые тонаЦвет RALCMYK (C)CMYK (U)HTMLRGB
RAL 9001
Кремово-белый
  0   0  10   5  0   0  10   0#EFEBDC239 235 220
RAL 9002
Светло-серый
  5   0  10  10  3   3  10   7#DDDED4221 222 212
RAL 9003
Сигнальный белый
  0   0   0   0  0   0   0   0#F4F8F4244 248 244
RAL 9004
Сигнальный чёрный
100  90 100  80100 100 100  75#2E3032 46  48  50
RAL 9005
Чёрный янтарь
100 100 100  95 87  65  66  58#0A0A0D 10  10  13
RAL 9006 Железный блеск (Iron Glimmer)
Бело-алюминиевый
  0   0   0  40  0   0   0  20#A5A8A6165 168 166
RAL 9007 Железный блеск (Iron Glimmer)
Тёмно-алюминиевый
  0   0   0  60 17  14  17  29#8F8F8C143 143 140
RAL 9010
Белый
  0   0   5   0  0   0   7   0#F7F9EF247 249 239
RAL 9011
Графитно-чёрный
100 100 100  80 90 100  97  75#292C2F 41  44  47
RAL 9016
Транспортный белый
  3   0   0   0  0   0   0   0#F7FBF5247 251 245
RAL 9017
Транспортный чёрный
100  90 100  95 87  66  66  58#2A2D2F 42  45  47
RAL 9018
Папирусно-белый
 10   0  10  20  7   4  10   6#CFD3CD207 211 205
RAL 9022 Жемчужный Глянец (Pearl Gloss)
Перламутровый светло-серый
 21  14  14  31 10   7   7  28#9C9C9C156 156 156
RAL 9023 Жемчужный Глянец (Pearl Gloss)
Перламутровый тёмно-серый
  8   6   6  57 20  10  10  40#7E8182126 129 130

Шесть цветовых схем, которые работают всегда

Вы тоже до сих пор покупаете банки с краской с мыслью «вроде ничего так, сочетается» и пытаетесь создать на стенах своей квартиры нечто суперэффектное? Что ж, мы не будем ограничивать ваш полет фантазии и творческое начало. Мы только придадим вашему воображению правильный вектор.

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

Что же, начнем!

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

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

1. Комплементарное сочетание

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

1) Оранжевый, синий.

Фото: trendir.com

2) Красный, зеленый.

Фото: mit24h.com

3) Фиолетовый, желтый.

Фото: cheatersutopia.com

2. Классическая триада

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

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

1) Красный, желтый, синий.

Фото: schlafzimmermobel.info

2) Желто-оранжевый, красно-фиолетовый, сине-зеленый.

Фото: homedit.com

3) Фиолетовый, оранжевый, зеленый.

Фото: racerapk.com

3. Аналогичное сочетание

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

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

1) Фиолетовый, красно-фиолетовый.

Фото: homedit.com

2) Синий, сине-фиолетовый, фиолетовый.

Фото: homedit.com3) Красно-оранжевый, оранжевый.

Фото: homedit.com

4. Раздельно-комплементарное сочетание

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

1) Красный, сине-зеленый, желто-зеленый.

Фото: mit24h.com

2) Синий, красно-оранжевый, желто-оранжевый.

Фото: thouswell.com

5. Тетрада — сочетание четырех цветов

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

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

1) Зеленый, синий, красный, оранжевый.  

Фото: janemichaelekanem.com

2) Красно-фиолетовый, красно-оранжевый, сине-зеленый, желто-зеленый.

Фото: bosidolot.com

3) Оранжевый, желтый, синий, фиолетовый.  

Фото: topsimages.com

6. Квадрат

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

1) Синий, желто-зеленый, оранжевый, красно-фиолетовый.

Фото: freshome.com

2) Красный, желто-оранжевый, зеленый, сине-фиолетовый.

Фото: freshome.com

20 таблиц, которые значительно упрощают комбинирование цветов

WP TiE 31 марта 2021 г. · 4 минуты чтения

Цвета играют жизненно важную роль в нашем зрительном восприятии и реакции. Они помогают нам передавать сообщения, вызывать эмоции и придают блеск нашим повседневным проектам. Чтобы создать осмысленную цветовую палитру, необходимо знать, какие оттенки подходят и для каких целей. Для дизайнеров важно тонкое понимание цветовых комбинаций. Чтобы сделать этот процесс намного проще, я собираюсь перечислить 20 диаграмм, которые облегчают выбор и сочетание цветов. Давайте начнем! Цвета играют жизненно важную роль в дизайне логотипа. Искусство смешивания правильных цветов при создании логотипов может вывести ваш бренд на новый уровень. Эта инфографика объясняет психологию выбора определенных цветов. Решение покупателя о покупке во многом зависит от общего визуального впечатления от продукта, чему может помочь цвет. Эта инфографика объясняет эмоциональную связь и реакцию, связанную с использованием цвета в бизнесе. Эта таблица цветов является кратким справочником для дизайнеров. Это объясняет диапазон цветовых тонов от холодных до теплых. Вы также найдете некоторые основы цветовых комбинаций и ссылки на технические термины, такие как 9.0004 первичный , вторичный и третичный цветов. Блестящие цветовые комбинации требуют понимания цветовой психологии, терминов и типов палитр. Мы собрали все, что вам нужно знать, в этой удобной инфографике. Определенные цвета создают уникальные ощущения. Некоторые заставляют вас чувствовать себя комфортно, а другие добавляют стресса. Эта инфографика объясняет предпочтения цвета, соответствующие вашему типу личности. Выбирая цвета для спальни, вы можете предпочесть более причудливые и свежие. Однако не игнорируйте влияние цвета на время сна. Довольно удивительно знать, что цвет влияет на ваши методы обучения и может препятствовать или улучшать их. Влияние цвета на наше настроение и эмоции является важным аспектом дизайна интерьера. Без его понимания нельзя придумать офигенный дизайн. Эта инфографика направит вас в правильном направлении. Когда дело доходит до создания глобально информированного дизайна, полезно понимать культурную психологию цветов. Эта цветовая диаграмма поможет вам объяснить значение и ассоциации с различными формами, символами и цветами по всему миру. Эта инфографика, посвященная дизайну интерьера, объясняет, как можно смешивать разные цвета для создания определенного настроения. Эти принципы также действуют в других дизайнерских приложениях. Эта инфографика представляет собой удобное руководство по созданию целостной цветовой схемы, включая темные, светлые, смелые, нейтральные и контрастные цвета. Pantone уже много лет предсказывает цвета и тенденции, влияющие на индустрию дизайна. Эта диаграмма суммирует некоторые из их последних прогнозов. Эта таблица цветов объясняет общие термины печати для цветных процессов. Это очень удобно для использования в полиграфии. Эта диаграмма объясняет психологию того, как цвета влияют на покупки вашего продукта. При продвижении своей продукции уделяйте особое внимание выбору цвета и тому, как он может помочь увеличить продажи. Крайне важно научиться искусству цветовой координации, поскольку индивидуальное воздействие и коннотация определенных оттенков могут меняться (в лучшую или худшую сторону) в паре. Выбор цветов, которые хорошо сочетаются друг с другом, является формой искусства. Определенные комбинации могут передать изысканность, роскошь, прохладу и даже здоровье. Эта инфографика отображает 10 основных заповедей цветов, включая ключевые советы по контрасту, значению цвета, оттенкам и цветовым системам. Это набор универсальных информационных графических элементов, которые можно приобрести в Creative Market. Он включает в себя в общей сложности 11 различных типов элементов информационного дизайна. Продукт легко настроить с помощью сетки с изменяемым размером. Color Splash Patterns — это набор абстрактных узоров. Они имеют матовый вид, который в то же время резкий. Все эти шаблоны представлены в виде редактируемых векторов и просты в использовании. Эти шаблоны лучше всего подходят для фона, плакатов, листовок и т. д. Вы можете приобрести их в Creative Market за 14 долларов. Цветовая палитра вашего рабочего пространства может влиять на общее настроение. Прежде чем проектировать офисное пространство, подумайте о восприятии определенных цветов и о том, как они могут повлиять на рабочий процесс каждого.

Заключение

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

Добавьте ярких красок в свой следующий проект.

Загрузите наши пастельные летние палитры

Загрузите наш набор цветовых палитр, чтобы получить их точные шестнадцатеричные коды!

Скачать палитры

Об авторе

WP TiE

WPTIE | (Ахмад Авайс и Маэда Батул) 🙌 Двое WordPressers влюбились друг в друга и поженились. Они достаточно смелы, чтобы называть себя парой WordPress. 🎩→ Ахмад Авайс (разработчик Full Stack WP/основной участник WP) и 🎩→ Маэда Батул (журналист WordPress/основной участник WP).

Посмотреть ещё сообщения

Статьи по теме

Хотите бесконечное вдохновение и советы по дизайну?

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

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

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

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

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

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

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

Ваши данные последовательные или качественные?

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

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

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

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

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

Сколько уникальных оттенков вам нужно использовать?

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

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

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

Роль яркости в выборе цвета

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

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

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

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

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

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

Какие инструменты можно использовать для поиска идеального сочетания цветов?

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

Давайте рассмотрим несколько инструментов, которые помогут вам начать работу…

1) Colorpicker для данных

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

2) Color Hunt

Если вы просто ищете готовые цветовые схемы для просмотра, Color Hunt — это инструмент для вас. Этот сайт посвящен только цветовым схемам, позволяющим легко черпать вдохновение и находить HEX-коды.

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

3) Designspiration.net

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

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

4) FlatUIColorpicker.com

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

5) Adobe Color CC

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

Что делать, если вы все еще не можете найти то, что вам нужно?

Что, если вы решите, что действительно ищете цветовую схему, которой еще нет? Что вы делаете?

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

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

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

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

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

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

Первоначально опубликовано 17 июля 2018 г., 20:00:00, обновлено 15 апреля 2021 г.

12 Визуализация данных Цветовые палитры для создания лучших историй с вашими данными

ПРИМЕЧАНИЕ: OMNISCI IS NOW HEAVY.AI

Рассказывать увлекательные истории с помощью данных может быть довольно сложно.

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

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

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

В этом посте рассказывается следующее:

  • 12 лучших цветовых палитр для визуализации данных, которые могут улучшить ваши карты, диаграммы и истории добавлять новые цвета и палитры на информационные панели

Типы цветовых палитр для визуализации данных


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

  • Категориальная
  • последовательно
  • Дивержирование

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

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

Immerse позволяет повторять цвета более одного раза, но более эффективно изолировать значимые метки и применить нейтральный цвет, например серый, ко всем значениям «Другие».



1. Retro Metro (по умолчанию)

2. Dutch Field


3. River Nights

4. Spring Pastels

3 1 и 2 в разделе цветов панели настроек пользовательского интерфейса Immerse (см. Добавление цветов и палитр на панель инструментов Immerse далее в этом посте).

Последовательная цветовая палитра
Последовательная (количественная) цветовая палитра, представляющая столкновения по дням и часам

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

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

5. От синего к желтому (по умолчанию)


6. От серого к красному

7. От черного к розовому

8. Синий

Добавьте эти палитры к пользовательскому интерфейсу цвета панели Immerse раздел выбора (см. «Добавление цветов и палитр на панель инструментов Immerse» далее в этом посте).

Расходящаяся цветовая палитра Расходящаяся (количественная) цветовая палитра, представляющая
Процентное изменение с течением времени и свойств, подверженных риску затопления по округам в 2050 году


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

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

9. От синего до красного (по умолчанию)

10. От оранжевого до фиолетового

11. Розовая пена

12. От лососевого до цвета морской волны

3 90 Раздел цветов панели настроек пользовательского интерфейса Immerse (см. «Добавление цветов и палитр на панель управления Immerse» далее в этом посте).

Добавление цветов и палитр на панель инструментов Immerse . В этом примере основное внимание уделяется редактированию, добавлению и удалению цветов и палитр в Immerse.

Начните с открытия панели настроек пользовательского интерфейса в левой части открытой панели инструментов Immerse.

Доступ к панели настроек пользовательского интерфейса

Раздел цветовой палитры панели настроек пользовательского интерфейса состоит из четырех подразделов.

  • Набор цветов 1
  • Набор цветов 2
  • Категориальные цвета
  • Непрерывные цвета
Раздел цветовой палитры панели настроек пользовательского интерфейса , добавьте шестнадцатеричное значение цвета и щелкните значок «Сохранить», чтобы добавить цвет.

Набор цветов 1 или 2 добавить, отредактировать или удалить

Чтобы изменить или удалить существующий цвет в наборе цветов 1 или 2, щелкните цвет, измените шестнадцатеричное значение цвета или щелкните значок Удалить. В каждом наборе должен быть хотя бы один цвет.

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

Щелкните раскрывающийся список, чтобы просмотреть доступные палитры и параметры для добавления, редактирования или удаления. Каждая палитра должна содержать от 2 до 10 цветов.

Категориальный цвет добавить, изменить или удалить

Щелкните палитру, чтобы добавить, изменить или удалить цвета, как мы делали это для набора цветов 1 и 2.

Непрерывный цвет добавить, изменить или удалить

Сохранить приборной панели и наслаждайтесь новыми цветами в вашем распоряжении.

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

Попробуйте сами сегодня, загрузите HEAVY.AI Free, полнофункциональную версию, доступную для бесплатного использования.

Какие цвета и палитры вы планируете добавить в Immerse? Поделитесь ими и любыми визуализациями, которые вы создаете, с нами через LinkedIn, Twitter или наши форумы сообщества.

Антонио Котронео

Антонио Котронео — директор по маркетингу продуктов в HEAVY. AI. Он провел свою карьеру, помогая людям во всем мире максимизировать свои геопространственные данные, картографические технологии и пространственный анализ, чтобы принимать важные решения для своих клиентов и сообщества. В настоящее время он живет в Шарлотте, Северная Каролина, с женой и двумя детьми.

Цветовые палитры для бизнес-панелей

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

В этой статье решается первая проблема, приводятся три профессиональные комбинации цветов, которые вы можете использовать в своем следующем проекте визуализации данных MicroStrategy, SAP Business Objects, Tableau или Microsoft Power BI.

цветовая палитра панели администратора

цветовая схема аналитики

цветовых схем гистограммы

цветов гистограммы

цветов гистограммы

красивые диаграммы Excel

лучший цвет фона для приборной панели

лучших цветовых комбинаций для приборных панелей

лучших цветовых комбинаций для отчетов Excel

лучших цветовых сочетаний

лучших цветов для гистограмм

лучших цветов для приборных панелей

лучших цветов для диаграмм Excel

лучших цветов для линейных графиков

лучших цветов для круговых диаграмм

лучшие цветовые палитры приборной панели

лучших цветовых схем приборной панели

лучшие цвета приборной панели

лучших цветовых схем Excel

лучших шаблонов графиков Excel

лучших цветовых комбинаций отчета

деловая цветовая палитра

бизнес-цветовые схемы

цветовая палитра бизнес-панелей

цветов бизнес-аналитики

цветовые схемы панели бизнес-объектов

генератор цветовой палитры диаграммы

цветовая палитра диаграммы

цветовые схемы диаграммы

палитра цветов диаграммы

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

выбор цвета для приборных панелей

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

Таблица сочетаний цветов

цветовая комбинация для карт

Таблица сочетаний цветов

цветовых комбинаций для графиков

цветовых комбинаций

цветная приборная панель

цвет для бизнес-панели

комбинаций цветовой палитры

цветовая палитра приборной панели

цветовая палитра для приборной панели

цветовая палитра для графиков

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

цветовая палитра tableau

цветовая палитра

палитра цветов для данных

таблицы цветовых схем

цветовые схемы для графиков

цветовые схемы для приборных панелей

цветовых схем для табло

цветной шаблон

цветов для приборной панели

цветов для графиков

холодные цвета коды

классные диаграммы и графики Excel

крутые графики excel

креативные диаграммы Excel

цвет фона приборной панели

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

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

сочетание цветов приборной панели

цветовая палитра приборной панели

генератор цветовой палитры приборной панели

палитра цветов приборной панели

цветовые схемы приборной панели

цветовая тема приборной панели

цвета приборной панели

цвет приборной панели

цвета оформления приборной панели

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

цветовая палитра визуализации данных

генератор цветовой палитры визуализации данных

палитра визуализации данных

цветовая палитра диаграммы excel

цветовых комбинаций excel

цветовая палитра excel

цветовые палитры excel

цветовая схема excel

Примеры цветовых схем Excel

цветовые схемы Excel

Excel цвет

цветов Excel, которые хорошо сочетаются друг с другом

цвета excel

цветовых комбинаций excel

цветовые схемы приборной панели Excel

цвета приборной панели руководителя

плоский цвет

плоская цветовая палитра

плоская палитра цветов

плоских цветов пользовательский интерфейс

плоские цвета

Цветовая палитра плоского дизайна

цветовые палитры плоского дизайна

цвет плоского дизайна

цветов плоского дизайна

палитра цветов плоского пользовательского интерфейса

плоских цветов пользовательского интерфейса

плоские цвета пользовательского интерфейса тема excel

приборная панель с плоским пользовательским интерфейсом

цветов плоского пользовательского интерфейса

плоская приборная панель с пользовательским интерфейсом

хорошие цвета диаграммы

удачное сочетание цветов

хорошие сочетания цветов

хорошие цветовые схемы Excel

генератор цветовой палитры графиков

цветовая палитра графика

цветов графика

графические цветовые палитры

шестнадцатеричные комбинации цветов

шестнадцатеричная цветовая палитра

шестнадцатеричная цветовая палитра для графиков

шестнадцатеричных цветов для приборной панели

как сделать графики Excel профессиональными

цветов html для приборной панели

шаблон

кпи

Цветовая палитра линейного графика

цвета материала

палитра цветов Material Design

цветов материального дизайна

материал пользовательский интерфейс

материал пользовательского интерфейса цвета

приборная панель microstrategy, цвет

приятные цветовые сочетания

красивые цветовые палитры

красивые цветовые комбинации Excel

красивая цветовая схема Excel

красивые цветовые схемы Excel

оптимальные цвета для графиков

цветовая палитра круговой диаграммы

силовая двухцветная палитра

мощный двухцветный генератор тем

мощный двухцветный генератор тем

профессиональные цвета диаграммы

профессиональные цветовые комбинации

профессиональная цветовая палитра

профессиональных цветовых палитр

профессиональные цветовые схемы

профессиональные цвета

профессиональная цветовая схема

профессиональная приборная панель

профессиональные диаграммы Excel

профессиональная цветовая схема Excel

количественная цветовая схема

Генератор цветовой палитры tableau

цветовая палитра tableau hex

Цветовая палитра Tableau

цветовые палитры таблиц

цветов таблицы

пользовательских цветовых палитр tableau

Цветовые схемы приборной панели Tableau

цвета приборной панели Tableau

табло KPI приборная панель

цветовая палитра пользовательского интерфейса

цветовых схем пользовательского интерфейса

пользовательский интерфейс цвет

цветов пользовательского интерфейса

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

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

Business dashboards formatted with flat UI colors:

HEX color codes used: #F1F1F1, #202020, #7E909A, #1C4E80, #A5D8DD, #EA6A47, #0091D5

Dashboard Цвета : Светло-серый, черный, темно-серый, темно-синий, голубой, оранжевый, синий.

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

Используются шестигранные цветные коды: #000000, #AC3E31, #484848, #DBAE58, #Dadada, #20283E, #488A99

Materal Material Design. кирпичный, светло-черный, золотарник, светло-серый, темно-синий, бирюзовый.

Цветовые палитры приборной панели:

Полезные ссылки:

Дополнительные цветовые комбинации: Школа дизайна Canva

‍Примеры макетов панели инструментов: Sketch Repo

‍Создавайте привлекательные панели мониторинга предприятия с помощью руководства по стилю

Цвета играют центральную роль в визуализации данных. Но что, если ваши читатели дальтоники?

По данным Color Blind Awareness, дальтонизмом страдают 1 из 12 мужчин (8%) и 1 из 200 женщин (0,5%). По оценкам, во всем мире насчитывается около 300 миллионов дальтоников, включая Марка Цукерберга, Билла Клинтона и принца Уильяма!


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

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

Мы собрали несколько готовых палитр для дальтоников, чтобы вдохновить вас. Для этого прокрутите вниз до раздела 4.

Содержание
  1. Что такое дальтонизм?
  2. Какие бывают 3 типа дальтонизма?
  3. Почему цвет важен для визуализации данных
  4. Как создавать диаграммы с помощью палитры, удобной для дальтоников
  5. Основные блюда на вынос

Первым делом…

Что такое дальтонизм?

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

ИСТОЧНИК ИЗОБРАЖЕНИЯ

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

Какие существуют 3 типа дальтонизма?

ИСТОЧНИК ИЗОБРАЖЕНИЯ

Существует три различных типа дальтонизма:

Красно-зеленая цветовая слепота

По данным Колблиндора, 99% всех дальтоников страдают от красного/зеленого дальтонизма. Это далее разбито на две отдельные категории:

  • Протанопия : Также называемая «красной слабостью», люди, которые страдают этим вариантом красно-зеленой дальтонизма, неспособны воспринимать красный свет.

Слева: Нормальное зрение, справа: Протанопия
Источник изображения

Цветочный спектр Protanopia выглядит так:

Источник

  • Deuteranopia / Deuteranomaly : Также известный «Также известный». Тип слепоты на красный/зеленый цвет делает людей нечувствительными к зеленому свету (дейтераномалия) или вообще не воспринимающими зеленый свет (дейтеранопия).

Слева: нормальное зрение, справа: дейтеранопия
ИСТОЧНИК ИЗОБРАЖЕНИЯ

Цветовой спектр дейтеранопии выглядит следующим образом:

ИСТОЧНИК

Дальтонизм к красному/зеленому цвету передается по наследству и чаще поражает мужчин, чем женщин. Причина этого в том, что гены, ответственные за это состояние, содержатся в Х-хромосоме.

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


Дальтонизм к синему/желтому

Люди, страдающие слепотой к синему/желтому, с трудом различают синий и желтый цвета.

Эта конкретная форма дальтонизма, также известная как Тританопия , встречается гораздо реже, чем ее красный/зеленый аналог. На самом деле, по данным Национальной медицинской библиотеки США, сине-желтая цветовая слепота затрагивает менее 1 из 10 000 человек во всем мире.

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

Слева: Нормальное зрение, справа: Tritanopia
Источник изображения

Цветочный спектр Tritanopia выглядит так:

Источник

Полная цветовая слепота

Люди, которые страдают полной слепой. известные как Monochromacy — вообще не способны различать цвета. По данным Color Blind Awareness, монохромия встречается крайне редко: у 1 из 33 000 человек.

ИСТОЧНИК ИЗОБРАЖЕНИЯ

Почему цвет так важен для визуализации данных?

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


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

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

СМОТРЕТЬ: все, что вам нужно знать о ЦВЕТЕ… менее чем за 3 минуты

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

Связанный: 8 Передовой опыт проектирования для разнообразия и инклюзивности

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

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

1.) Заранее спланируйте цветовую схему

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

ИСТОЧНИК ИЗОБРАЖЕНИЯ

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

После того, как вы сузили свою цветовую палитру, вы можете загрузить свои данные. Это просто с виджетами графиков Venngage. Откройте виджет диаграммы, нажмите зеленую кнопку ИМПОРТ на вкладке ДАННЫЕ и загрузите файл CSV. Ваша диаграмма будет визуализировать данные автоматически.

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

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

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

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

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

ИСТОЧНИК ИЗОБРАЖЕНИЯ

Еще лучше , мы собрали несколько универсальных палитр для дальтоников:


СОВЕТ: Если вы застряли, попробуйте использовать такой инструмент, как Coblis, бесплатный симулятор дальтоника, который даст вам лучшее представление о том, как ваши изображения будут выглядеть для людей с дальтонизмом.

2.) Избегайте проблемных цветовых комбинаций

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

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

  • Красный и зеленый
  • Зеленый и коричневый
  • Зеленый и синий
  • Синий и серый
  • Синий и фиолетовый
  • Зеленый и серый
  • Зеленый и черный

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


3. ) Используйте высококонтрастные цвета

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


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

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

ИСТОЧНИК ИЗОБРАЖЕНИЯ

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

 

5.) Используйте символы

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


Подсказка : библиотека Venngage включает более 4000 значков, которые можно использовать, чтобы сделать инфографику и диаграммы более доступными.

6.) Сделайте вашу диаграмму монохромной

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



7.) Сделайте свой дизайн чистым и простым

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

Основные выводы по использованию палитр для дальтоников

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

Следующие меры могут помочь дальтоникам действительно взаимодействовать с вашим дизайном:

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

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

НОВИНКА! Представляем: Отчет о статистике маркетинга 2022

Уже 2022 год. Маркетологи, вы все еще используете данные до-COVID-времени?

Не принимайте решения на основе устаревших данных, которые больше не актуальны. Пришло время вам быть в курсе последних маркетинговых статистических данных и тенденций за последние два года, а также узнать, как COVID-19 повлиял на маркетинговые усилия в различных отраслях — с этим БЕСПЛАТНЫМ отчетом о маркетинговой статистике, составленным Venngage и HubSpot.

В отчете используются данные, собранные более чем 100 000 клиентов HubSpot CRM. Кроме того, вы также узнаете о тенденциях использования визуальных средств в контент-маркетинге и влиянии пандемии на визуальный контент от более чем 200 маркетологов со всего мира, опрошенных Venngage.

Получите свою копию прямо сейчас — это не похоже ни на какие другие маркетинговые отчеты, к тому же они абсолютно бесплатны!

Похожие сообщения в блоге:

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

Как подобрать идеальное сочетание цветов для власти BI

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

  • Почему цветовая схема важна для визуализации данных
  • Руководство по различным типам цветов и их значениям
  • Что такое цветовой круг и как вы его используете?
  • Hue
  • Complementary
  • Split-Complementary
  • Triadic Complementary
  • Analogous
  • Split-Analogous
  • Tetradic
  • Wrap-Up
  • References: 

A color scheme is as simple as deciding which colors you want для использования в визуализации данных. Существует множество различных цветов на выбор при выборе одного из них для визуализации данных.

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

Почему цветовая схема важна для визуализации данных

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

Путеводитель по различным типам цветов и их значениям

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

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

Что такое цветовой круг и как им пользоваться?

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

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

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

Исходный файл: CMYK-Werten.png – Wikimedia Commons

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

Оттенок

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

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

Hue Color WheelPower Диаграмма BI с одним оттенком, но с различными вариантами насыщенности

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

Дополнительные

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

Дополнительный цвет Таблица WheelPower BI с дополнительными цветами

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

Сплит-комплементарность

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

Разделение дополнительных цветов Диаграмма WheelPower BI с разделением дополнительных цветов

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

Триадный Дополнительный

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

Триадный дополнительный цвет Таблица WheelPower BI с триадными дополнительными цветами

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

Аналоговый

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

Аналоговая цветовая диаграмма WheelPower BI с аналоговыми цветами

Это самые простые схемы для создания и использования, они могут содержать от 3 до 5 цветов. Не забудьте выбрать достаточно контрастных цветов, чтобы создать аналогичную цветовую схему. Большой набор примеров можно найти в разделе «Что такое аналогичная цветовая схема» и «Почему дизайнеры так одержимы» с подробным объяснением: «один доминирующий цвет (обычно основной или дополнительный цвет), затем вспомогательный цвет (вторичный или третичный цвет), и третий цвет, который представляет собой либо смесь двух первых цветов, либо яркий акцентный цвет».

Раздельно-аналоговые схемы

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

Split-Analogous Color Таблица WheelPower BI с Split-Analogous Colors

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

Tetradic

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

Tetradic Color WheelPower BI Chart with Tetradic Colors

Резюме

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

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

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

Ваш адрес email не будет опубликован.