Подбор цветовой схемы: Как подобрать гармоничную комбинацию цветов

Содержание

Как подобрать гармоничную комбинацию цветов

· Инструмент для подбора цветов и генерации цветовых схем ·

Теория Цвета

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

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

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

Во-первых, давайте разберёмся в терминологии, чтобы убедиться, что вы не потеряете нить рассуждений в процессе чтения статьи. Все мы знаем, что первичными (primary) цветами являются красный, жёлтый и синий. Для того, чтобы получить вторичные (secondary) цвета, мы смешиваем один цвет с другим. Жёлтый и красный дают нам оранжевый, красный и синий — пурпурный/лиловый, а синий и жёлтый — зелёный. А что такое третичные (tetriary) цвета? Просто берётся первичный цвет и к нему добавляется соседний вторичный. Это означает, что существует шесть третичных цветов (по два цвета от каждого первичного цвета). Рис. А демонстрирует все описанные цвета во всей их красоте.

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

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

Рис. В.: собрав воедино первичные, вторичные и третичные цвета, мы получаем цветовой круг.

Подбор цветов с помощью цветового круга

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

Рис. С: На цветовом круге существует четыре возможных триады цветов

Но триадами не стоит ограничиваться. Можно выбрать и комплементарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга — например, красный и зелёный. Они называются комплементарными/дополняющими потому, что будучи помещёнными рядом, они делают друг друга ярче и живее, см. рис. D.

Рис. D.: цвета, противоположные друг другу на круге называются комплементарными/дополняющими

Примечание: от латинского «Complementum» — термин переводится как «дополняющий/дополнительный», в более современной литературе как «комплИментарный», и как «комплЕментарный» в равных пропорциях. Последний вариант мы считаем правильным.

Различные варианты

На этом этапе мы уже можем приступить к более сложным комбинациям. Например, можно взять две пары комплементарных цветов, что называется «двойной комплемент» (double complement). Скажем, жёлтый и пурпурный/лиловый, и синий и оранжевый. Другой схемой является альтернативный комплемент (alternate complement), когда комбинируется триада цветов с цветом, комплементарным одному из цветов триады. Зелёный, красно-пурпурный, красный и оранжевый — пример такой комбинации. Также существует «расщеплённый комплемент» (split complement), когда берётся цвет, его комплементарный цвет и два прилегающих к нему цвета.

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

Рис. Е.: эти схемы вдохнут жизнь в любой веб-сайт

Всё семейство

И так, мы перебрали все возможные комбинации контрастирующих цветов. Теперь обратимся к двум типам схем, где используются родственные цвета — монохроматической (monochromatic) и аналогичной/сходственной (analogous). Монохроматичный набор цветов, как свидетельствует его название, использует один цвет и все его оттенки и вариации. При правильном использовании, эта схема может придать веб-сайту аккуратный, чистый вид. Аналогичная схема цветов с другой стороны использует цвета, которые расположены по соседству друг с другом на цветовом круге. Как можно судить по рисунку F. аналогичная схема весьма похожа на монохроматическую.

Рис. F.: «Аналогичная» схема очень напоминает монохроматическую

Итак, всё вместе

Теперь, когда мы вывалили вам на голову столько комбинаций цветов, считаем своим долгом дать несколько предостережений. Первое и самое главное: цветовые схемы, упомянутые здесь, сами по себе могут и не сработать. Вам по-прежнему придётся кое-что поменять в цветах (насыщенность или яркость), чтобы они «ужились». Приведённые здесь схемы — лишь отправная точка, а не вершина мастерства. Ведь в конечном счёте решающим фактором будет читаемость текста на веб-сайте и его внешний вид (look and feel). Чтобы увидеть, как цвета уживаются друг с другом, дизайнеры советуют воспользоваться любой графической программой, где есть функция «слои», и сравнить различные варианты схем, переключаясь между ними. Например, на рис. G, одни комбинации работают нормально, в то время как другие требуют дополнительной обработки.

Рис. G.: не всякая комбинация годится в дело

Заключение

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

Цветовой круг — Гармония цвета. Пастельные тона (Марта Джилл)

· Инструмент для подбора цветов и генерации цветовых схем ·

Гармония цвета. Пастельные тона

Руководство для создания наилучших цветовых сочетаний

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

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


1	12	23	34	45	56	67	78	89	100	111	122	133	144

2	13	24	35	46	57	68	79	90	101	112	123	134	145

3	14	25	36	47	58	69	80	91	102	113	124	135	146

4	15	26	37	48	59	70	81	92	103	114	125	136	147

5	16	27	38	49	60	71	82	93	104	115	126	137	148

6	17	28	39	50	61	72	83	94	105	116	127	138	149

7	18	29	40	51	62	73	84	95	106	117	128	139	150

8	19	30	41	52	63	74	85	96	107	118	129	140	151

9	20	31	42	53	64	75	86	97	108	119	130	141	152

10	21	32	43	54	65	76	87	98	109	120	131	142

11	22	33	44	55	66	77	88	99	110	121	132	143

Цветовой круг Иттена: гармоничные сочетания цветов

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

1. Если провести через центр круга прямую линию, получится комплементарное сочетание — оно максимально контрастное.

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

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

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

Контрастная триада получается при наложении равнобедренного треугольника на круг

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

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

Это сочетание смотрится более пёстрым, чем контрастная триада

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

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

Вот пример одного из таких сочетаний

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

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

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

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

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

Такая схема даёт много вариантов сочетаний.

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

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

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

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

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

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

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

Я буду много говорить о насыщенности, яркости и тонах. Это цветовые пространства 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°) ⬤⬤⬤. Так что у меня было два варианта:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подбор цвета онлайн: 15 генераторов сочетания цветов

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

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

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

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

В подборке нашего сайта я выделила 2 категории подобных сервисов — русскоязычные и англоязычные.

Русские сервисы сочетания цветов

Среди множества русскоязычных онлайн сервисов можно выделить 5 основных (самых популярных), каждый из которых обладает своими достоинствами и недостатками:

Colorscheme

Цветовой круг онлайн. Это инструмент для подбора и генерации цветовых схем. Вы можете выбрать один и вариантов сочетания цвета. Вы можете посмотреть шаблон дизайна страницы в выбранном сочетании цветов. Интересно также и то, что вы можете «посмотреть» на вашу палитру глазами других людей, имеющих некоторые отклонения в цветовосприятии.
https://colorscheme.ru/

In colour balance

Всевозможные цветовые палитры, выделенные из лучших образцов фото.
https://color.romanuke.com/

Colorup.tikkurila

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

Color Adobe

Сайт этот, конечно же не русский, но с поддержкой русского языка, и он будет понятен русскоговорящим, поэтому я и отнесла его в эту группу. Очень удобный подбор цвета. Изменяйте положение указателя на цветовой круге и выбирайте схему по определенной цветовой системе.
https://color.adobe.com/

Генератор цветовых схем

https://colory.ru/colorgenerator/

Англоязычные сайты по подбору цвета

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

Random Material Generator

Название генератора указывает на случайность выбора цветовой палитры. Нажмите на кнопку «Generate different random combination» для генерации цветовой схемы.
https://codecrafted.net/randommaterial/

Material Mixer

Позволяет смешать и посмотреть сочетания двух цветов.
https://sankk.in/material-mixer/

Colorhunter

Готовые цветовые решения.
https://colorhunter.com/

Palette Generation

https://mcg.mbitson.com/
Генерация оттенков цвета.

Material Palette

Выберите 2 цвета, и вы увидите еще цвета, которые подходят для вашего дизайна.
https://www.materialpalette.com/blue/light-green

Colorotate

Воспользуйся конусом для создания собственной цветовой схемы. Чтобы пользоваться сайтом, разрешите загрузку Adobe Flash плеера в вашем браузере.
https://web.colorotate.org/

Colorblender

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

Colorspire

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

Paletton

Подбор сочетания цветов в зависимости от разных цветовых систем.
https://paletton.com/

Colorexplorer

Двигайте ползунки и выбирайте схему!
https://colorexplorer.com/

Подбор палитр легко и быстро: обзор программ для работы с цветом

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

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

Хотите сделать ремонт в квартире и обновить интерьер? Создаете украшение своими руками? Шьете одежду? Хотите сменить свой имидж? Надо подобрать текстиль в комнату? Задумали витражную роспись? Все это требует красивого и гармоничного цветового решения.

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

— с цветовым кругом;

— подбор цвета ползунком;

— цветовой палитрой.

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

1. ADOBE KULER

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

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

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

2. COLORSCHEME

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

Вот несколько примеров с синим цветом:

моно

контраст

триада

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

3. COLRD

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

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

4. PICTACULOUS

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

Pictaculous очень удобная, простая в использовании программа.

Вы можете сохранить полученную цветовую схему на диске, можете отправить по e-mail.

Удачи всем! творите и наслаждайтесь жизнью во всем ее цвете!

Палитра

— Дизайнер цветовых схем

Влюблен в цвета, с 2002 года.

Приложение Paletton
Colorpedia
О компании Paletton
О компании Paletton

Paletton.com — это дизайнерский инструмент цвета, предназначенный для создания цветовых комбинаций, которые хорошо сочетаются друг с другом. Он использует классическую теорию цвета с древним художественным цветовым кругом RYB для создания цветовых палитр от одного до четырех оттенков, каждая из пяти различных оттенков.Можно выбрать различные стили предварительного просмотра, чтобы проверить и просмотреть цвета в комбинациях, доступно множество примеров, чтобы увидеть палитру, используемую в дизайне веб-сайта, дизайне пользовательского интерфейса или в произвольно нарисованном изображении. Предварительный просмотр ткани Tartan также доступен для тех, кто интересуется текстилем и дизайном интерьера.

Этот инструмент палитры использует различные цветовые модели для объединения смежных цветов и / или дополнительных цветов к основному оттенку. Выбирайте модели от монохромных до трехцветных или четырехцветных наборов цветов, с дополнением или без него (противоположный оттенок), наслаждайтесь даже режимом свободного стиля.Поиграйте с яркостью и насыщенностью палитры, выберите из предустановленных предустановок или создавайте случайные палитры. Уникальный фильтр имитации зрения имитирует палитру, которую видят люди с различной слабостью зрения, дальтонизмом, различными вариантами дальтонизма (протанопия, дейтеранопия, тританопия, протаномалия, дейтераномалия, тританомалия, дисхроматопсия или ахроматопсия), а также несколько гамма-симуляций (симуляция слишком яркого дисплея или слишком темной печати), обесцвечивания, преобразования оттенков серого или веб-цветов (устаревшая палитра из 216 цветов).Палитру можно экспортировать во множество различных форматов (HTML, CSS, LESS, XML, текст, изображение PNG, палитра образцов Photoshop ACO или формат палитры GIMP GPL) для раскрашивания ваших работ. Проверьте цветовой контраст всех цветовых пар, используемых в палитре, и проверьте, соответствует ли цветовой контраст требованиям WCAG. Больше информации о цветах в Colorpedia.

Paletton является преемником предыдущего приложения Color Scheme Designer 3, которым с 2009 года пользовались почти 20 миллионов посетителей (в то время как первая версия была опубликована в 2002 году), как профессиональных дизайнеров, так и любителей, интересующихся дизайном, дизайном мобильных или настольных приложений или веб-дизайном. дизайн интерьера, мода или улучшение дома и переделки.Полная история Paletton в Colorpedia.

Javascript не обнаружен. Для этого приложения требуется Javascript.

Что такое цветовая схема: определения, типы и примеры

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

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

Цветовой круг через picoStudio.

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

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

Монохромная цветовая схема

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

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

https://www.instagram.com/p/Bvox_D2l1cS/

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

Вектор через Дарко 1981.

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

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

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

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

https://www.instagram.com/p/BU8wsjXA_Wo/

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

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

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

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

https: // www.instagram.com/p/Bwq1rFWjm83/

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

Триадная цветовая схема

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

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

https://www.instagram.com/p/BrD2s03lkRl/

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

Нейтральная цветовая схема

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

Нейтральные оттенки взяты из Shutterstock Color Tool.

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

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

Изображение на обложке — Бернд Шмидт.

Хотите узнать больше о мире цвета? Ознакомьтесь с этими статьями:

Что можно и что нельзя делать при выборе цвета для инфографики

Давайте будем честны с собой: не все мы дизайнеры.

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

Но это не значит, что мы не можем подделать его, пока не сделаем это.

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

И один из самых простых способов заработать или сломать свой фальшивый дизайн — это использовать цветовую схему!

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

Давайте приступим!

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

ПОЛУЧИ 30 БЕСПЛАТНЫХ ЦВЕТОВЫХ СХЕМ

Сделать Составить план

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

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

Вот что я делаю:

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

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

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

Как так:

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

Хотите вывести свой инфографический дизайн на новый уровень? Загрузите наше интерактивное руководство о том, что можно и чего нельзя делать в инфографическом дизайне!

Не использовать Использовать светлые тона

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

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

Источник.

Вот еще один пример диаграммы, которая БУКВАЛЬНО описывает цвета. Но дизайнеры, как и настоящие дизайнеры, решили, что черный цвет будет лучшим способом передать свои данные.

Источник.

Цвет

меня не впечатлил.

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

На самом деле, можно было бы использовать 16 777 216 цветов, и все они также доступны в цвете Venngage.

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

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

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

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

Это одна из самых простых, но часто игнорируемых идей, особенно для начинающих.

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

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

Вот еще один пример от L2Inc на графике о Snapchat, использующий их фирменный желтый цвет:

А вот еще один, использующий оттенок красного в моей альма-матер в статье о студенческом футболе:

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

С помощью Venngage’s My Brand Kit вам нужно ввести цвета своего бренда только ОДИН РАЗ.

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

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

Не позволять цвету отвлекать от данных

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

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

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

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

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

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

ЧАСЫ: все, что вам нужно знать о ЦВЕТАХ… менее чем за 3 минуты!

Сделайте Используйте оттенки, тона и оттенки

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

Сначала вам нужен цвет для начала: в этом случае я выбрал голубой с шестнадцатеричным кодом # 93BEDF.

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

Позвольте показать вам…

Обратите внимание, как этот инструмент предоставляет вам 20 уникальных цветов, которые вы можете использовать:

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

Вот пример его использования в пузырьковой диаграмме:

Круговая диаграмма:

И даже гистограмма:

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

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

Сделать Поддерживать согласованность

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

Но последовательность в дизайне важнее уникальности — лучший план действий при создании визуализации.

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

По моим подсчетам, во всей статье используются все три цвета.

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

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

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

Но если вы не хотите беспокоиться о выборе идеальной схемы, BEAM вам поможет.

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

Не Избегайте цветового круга

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

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

Это можно сделать, если у вас уже есть цвет для начала или вам нужно немного вдохновения для начала!

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

Вот как это выглядит в инструменте Adobe Colors:

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

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

И, наконец, существует дополнительное согласование, которое предполагает использование цветов с наибольшим контрастом.

Есть еще несколько способов сопоставления цветов с помощью цветового круга, но эти три являются наиболее эффективными.

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

Это так просто!

Сделайте Подходите под ваши цели / темы

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

Я надеюсь, что большинство людей видели что-то вроде рисунка ниже. Правильно?

Источник.

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

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

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

А что такое визуализации? Упрощение понимания данных!

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

Дизайнер упростил быстрое сравнение и понимание сути.

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

Источник.

Но если вы пишете о Twitter по сравнению со Snapchat, лучше всего подойдут синий и желтый.Похоже, этот создатель графиков не получил записку:

Источник.

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

БОНУС: используйте эти инструменты

1. Coolors

2. Цветовой код Hex

3. Adobe Color

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

5. BrandColors

6.Палетон

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

— Документация Sublime Text 3

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

Цветовые схемы Sublime Text реализованы с использованием файлы .sublime-color-scheme, содержащие JSON. Sublime Text также поддерживает подмножество функций, используя Формат TextMate .tmTheme.

Пример

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

  {
    "name": "Пример цветовой схемы",
    "глобалы":
    {
        "фон": "rgb (34, 34, 34)",
        "передний план": "#EEEEEE",
        "каретка": "белый"
    },
    "правила":
    [
        {
            "name": "Комментарий",
            "scope": "комментарий",
            "передний план": "# 888888"
        },
        {
            "name": "Строка",
            "scope": "строка",
            "передний план": "hsla (50, 100%, 50%, 1)",
        },
        {
            "name": "Число",
            "scope": "константа.числовой ",
            "передний план": "# 7F00FF",
            "font_style": "курсив",
        }
    ]
}

Цвета

Цвета в цветовых схемах можно указывать в одном из семи форматов:

Hex RGB : # , за которым следуют шесть шестнадцатеричных символов, первый два указывают красный канал, второй буксирует зеленый канал и последние два — синий канал.Красный записывается как # FF0000 . Сокращенная форма доступна, когда каждый из трех пар используют одно и то же значение для обоих символов. Красный записывается как # F00 .
Hex RGBA : То же, что и Hex RGBA, но с дополнительной парой шестнадцатеричных символов в конец, чтобы указать альфа-канал. Красный с непрозрачностью 67% записывается как # FF0000AA .Сокращенная форма быть # F00A .
Функциональное обозначение RGB : Функция с именем rgb , которая принимает три целых числа в диапазон от 0 до 255. Первое целое число определяет красный канал, второй — зеленый канал, третий — синий. Красный записывается как rgb (255, 0, 0) .
Функциональное обозначение RGBA : Идентичен формату функции RGB, за исключением названия функция — rgba и добавлен четвертый параметр принимает значение от 0.0 до 1.0 указав альфа-канал. Написан красный с непрозрачностью 50% как rgba (255, 0, 0, 0.5) .
Функциональное обозначение HSL : Функция с именем hsl , которая принимает три значения. Первое — это целое число в диапазоне от 0 до 360, определяющее оттенок. Второй — процентное значение насыщенности. В третье — процентное значение, определяющее яркость.Красный написан как hsl (0, 100%, 100%) .
Функциональное обозначение HSLA : Идентичен формату функции HSL, за исключением названия функция — hsla и добавлен четвертый параметр принимает значение от 0,0 до 1,0 указав альфа-канал. Написан красный с непрозрачностью 50% как hsla (0, 100%, 100%, 0.5) .
Название : Названия цветов CSS. Обратите внимание что, хотя некоторые имеют общие имена с именованными цветами X11, используемыми в .tmФайлы темы, актуальные цвета имеют тенденцию отличаться.

Дополнительно цвета могут быть указаны как переменная, а затем ссылка на нее через синтаксис var (example_var_name) .Ссылки на переменные особенно полезно в сочетании с minihtml color () функция мода и поддерживаемые смесь () , смесь () , альфа () , насыщенность () и яркость () регуляторы.

регулятор blend () : Добавляет цвет в основу. Чтобы смешать равные части серого и основного цвета, указанного через переменная в пространстве RGB: цвет (var (base_green) blend (# 888 50%)) .Если цвета должны быть смешаны в пространстве HSL, используйте следующую форму: цвет (var (base_green) blend (# 888 50% hsl)) . В результирующее альфа-значение всегда является альфа-каналом базовой цвет.
регулятор blenda () : работает так же, как регулятор blend () , но смешивает альфа-канал двух цветов вместо использования альфа-канала из база.Пример смешивания частично прозрачного серый в зеленый: цвет (var (base_green) blenda (# 8888 50% hsl))
регулятор альфа () : изменяет альфа-канал базового цвета до указанного значения, от 0,0 к 1.0 . Установка альфа-канала на 90%: цвет (var (base_green) alpha (0.9)) . стенография название a () также доступно для этого регулятора.
регулятор насыщенности () : изменяет насыщенность канал основного цвета в цветовом пространстве HSL до значения указано, от 0% до 100% . Установка насыщенности на 90%: цвет (var (base_green) saturation (0.9)) . Увеличение насыщенность на 10%: цвет (var (base_green) s (+ 10%)) . стенография название s () также доступно для этого регулятора.
регулятор освещенности () : Изменяет яркость канал основного цвета в цветовом пространстве HSL до значения указано, от 0% до 100% . Установка яркости на 90%: цвет (var (base_green) lightness (0.9)) . Уменьшение легкость на 10%: цвет (var (base_green) l (- 10%)) . стенография название л () также доступно для этого регулятора.

Переменные

Многоразовые определения цвета могут быть созданы в переменных ключ. Имена могут быть любой строкой, содержащей символы от аз до , от до , от 0 до 9 , _ и - . Значения могут быть в любом допустимом цветовом формате.

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

  {
    "name": "Пример цветовой схемы",
    «переменные»:
    {
        «зеленый»: «hsla (153, 80%, 40%, 1)»,
        "черный": "# 111",
        "белый": "rgb (242, 242, 242)"
    },
    "глобалы":
    {
        "фон": "вар (черный)",
        "передний план": "вар (белый)",
        "каретка": "цвет (вар (белый) альфа (0,8))"
    },
    "правила":
    [
        {
            "name": "Комментарий",
            "scope": "комментарий",
            "передний план": "цвет (var (black) blend (#fff 50%))"
        },
        {
            "name": "Строка",
            "scope": "строка",
            "передний план": "вар (зеленый)",
        },
        {
            "name": "Число",
            "scope": "константа.числовой ",
            "передний план": "# 7F00FF",
            "font_style": "курсив",
        }
    ]
}

Глобальные настройки

Следующие глобальные настройки входят в объект с globals ключ.

фон: Цвет фона по умолчанию
передний план: Цвет текста по умолчанию
невидимки: Цвет пробела при визуализации. Если не указано иное, по умолчанию передний план с непрозрачностью 0,35 .
каретка: Цвет каретки
block_caret: Цвет каретки при использовании каретки блока
line_highlight: Цвет фона строки, содержащей курсор. Только б / у когда включен параметр highlight_line .

Акценты

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

CSS

CSS применяется к содержимому minihtml создается с помощью всплывающих окон и фантомов. через API. Поддерживаемые свойства CSS обсуждаются в Справочник по minihtml CSS.

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

popup_css: CSS передается во всплывающие окна.
phantom_css: CSS перешел к фантомам. Если не указано иное, использует popup_css .

Желоб

желоб: Цвет фона желоба
gutter_foreground: Цвет номеров строк в желобе

Diff

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

line_diff_width: Ширина линий разницы от 1 до 8
line_diff_added: Цвет маркеров различий для добавленных линий
line_diff_modified: Цвет маркеров различий для измененных линий
line_diff_deleted: Цвет маркеров различий для удаленных линий

Выбор

выбор: Цвет фона выделенного текста
selection_foreground: Цвет, который заменит цвет текста на основе области видимости выбора
selection_border: Цвет границы выделения
selection_border_width: Ширина границы выделения от 0 до 4 .
inactive_selection: Цвет фона выделения в представлении, в настоящее время не сфокусирован
inactive_selection_foreground: Цвет, который заменит цвет текста на основе области видимости выделения в представлении, которое в данный момент не сфокусировано
selection_corner_style: Стиль углов, используемый в выделенных областях.Варианты включают: круглый (по умолчанию), разрез или квадрат .
selection_corner_radius: Радиус, который нужно использовать, когда selection_corner_style круглый или разрез .

Найти

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

Направляющие

Направляющие управляются глобально с помощью draw_indent_guides настройка.

направляющая: Цвет, используемый для рисования направляющих отступов. Используется только если опция "draw_normal" присутствует в параметр indent_guide_options .
active_guide: Цвет, используемый для рисования направляющих отступов для уровни отступа, содержащие каретку. Только б / у если опция "draw_active" присутствует в параметр indent_guide_options .
stack_guide: Цвет, используемый для рисования направляющих отступов для родительские уровни отступа уровня отступа содержащий каретку. Используется, только если опция "draw_active" присутствует в параметр indent_guide_options .

Кронштейны

Соответствие скобок контролируется глобально match_brackets настройка.

brackets_options

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

подчеркнутый
stippled_underline
волнистый_подчеркнутый
передний план
полужирный
курсив

brackets_foreground

Цвет, используемый при рисовании стиля, указанного brackets_options .

кронштейн_contents_options

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

подчеркнутый
stippled_underline
волнистый_подчеркнутый
передний план

кронштейн_contents_foreground

Цвет, используемый при рисовании стиля, указанного brackets_contents_options .

Тени

тень: Цвет тени, используемый для отображения, когда текстовая область можно прокручивать по горизонтали
shadow_width: Ширина тени в аппаратно-независимых пикселях

Правила применения

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

Соответствие

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

Именование

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

Правила стиля

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

name — (произвольное) имя для правила области
передний план — цвет текста
фон — цвет фона
foreground_adjust — корректировка цвета переднего плана , действует только для фона
selection_foreground — цвет текста при выборе
font_style — ноль или более полужирный , курсив , разделенные пробелами

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

Подсветка хешированного синтаксиса

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

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

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

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

  {
    "scope": "источник - пунктуация - ключевое слово",
    «передний план»: [«hsl (200, 60%, 70%)», «hsl (330, 60%, 70%)»]
}

Примеры

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

  {
    "name": "Строки",
    "scope": "строка",
    "передний план": "# 00FF00"
}

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

  {
    "name": "Числа",
    "scope": "константа.числовой ",
    "передний план": "# FF0000",
    "font_style": "жирный курсив"
}

Настройка

Цветовые схемы на основе .sublime-color-scheme формат определяется только именем файла, а не путем к файлу на основе пакета. Это позволяет пользователям настраивать цветовую схему, переопределив переменные или глобальные переменные и добавление правил.

Чтобы создать индивидуальную настройку цветовой схемы, создайте новый файл с тем же именем, что и у цветовой схемы, но сохраните его в каталоге Packages / User /.

Например, чтобы настроить цветовую схему Monokai по умолчанию, создайте файл с именем Packages / User / Monokai.sublime-color-scheme. Следующие настройки изменят цвет фона на полностью ненасыщенный серый, желтый — более яркий; добавит новое правило изменения строки документации Python, чтобы раскрасить так же, как струны.

  {
    «переменные»:
    {
        «желтый»: «hsl (54, 100%, 50%)»,
    },
    "глобалы":
    {
        "фон": "hsl (70, 0%, 15%)",
    },
    "правила":
    [
        {
            "name": "Строки документации Python",
            "scope": "комментарий.block.documentation.python ",
            "передний план": "вар (желтый)"
        },
    ]
}

Содержимое переменных и глобальных переменных объекты объединяются, при этом ключи копирования пользователя перезаписываются то же имя. Для списка правил правила пользователя добавлено.

Приложение: цвета CSS

aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
cadetblue
chartreuse
chocolate
corgranse 90g темно-зеленый
DarkGrey
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
Darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkslategrey
darkturquoise
darkviolet
deeppink
DeepSkyBlue
dimgray
dimgrey
DodgerBlue
огнеупорный кирпич
floralwhite
Forestgreen
фуксии
Gainsboro

ghostwhite
gold
goldenrod
grey
green
greenyellow
grey
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
лимонно-бледно-голубой
светлый
светло-серый
светло-серый
светлый
светло-серый
светло-серый
светлый
светло-серый
светло-серый
светлый
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightslategrey
lightsteelblue
светло-желтые
известь
LimeGreen
белья
пурпурные
бордовый
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
MidnightBlue
mintcream
mistyrose
мокасины

navajowhite
темно-синий
oldlace
оливковый
olivedrab
оранжевый
OrangeRed
орхидеи
palegoldenrod
palegreen
paleturquoise
palevioletred
PapayaWhip
Peachpuff
перу
розовый
сливы
powderblue
фиолетовый
rebeccapurple
красный
rosybrown
RoyalBlue
saddlebrown
лосося
сэнди-коричневый
сигрин
морская ракушка
сиенна
серебристый
голубой
сланцевый
сланцевый
слатегрей
снег
весенне-зеленый
стил-синий
загар
чирок
чертополох
томат 9015 белый 9015 белый 9015 бирюзовый
желтый
помидор
белый 9015 бирюзовый
желтый

История изменений

Сборка 3190

Добавлен параметр block_caret

Сборка 3189

Добавлены line_diff_added и line_diff_deleted настройки

Сборка 3186

Добавлены line_diff_modified и line_diff_width настройки

Сборка 3179

Добавлены насыщенность () и легкость () регуляторы
Добавлен ключ foreground_adjust для стиля правила

Основные цветовые схемы — Введение в теорию цвета

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

Цветовое колесо

Цветовой круг или цветовой круг является основным инструментом для комбинирования цветов. Первая круговая цветовая диаграмма была разработана сэром Исааком Ньютоном в 1666 году. Цветовой круг разработан таким образом, что практически любые цвета, которые вы выберете, будут хорошо смотреться вместе. За прошедшие годы было сделано множество вариаций базового дизайна, но наиболее распространенной версией является колесо из 12 цветов, основанное на RYB (или художественной) цветовой модели. Традиционно существует ряд цветовых сочетаний, которые считаются особенно приятными.Их называют цветовых гармоний или цветовых аккордов , и они состоят из двух или более цветов с фиксированным соотношением в цветовом круге. ColorImpact разработан для динамического создания цветового круга в соответствии с вашим основным цветом.

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

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

— Документация редактора Sublime Color Scheme

править

Subclrschm — это простой графический интерфейс для редактирования файла цветовой схемы Sublime ( .tmTheme ).Просто укажите на файл tmTheme и приступайте к редактированию.

Командная строка

 Faceless-MacBook-Pro: subclrschm facelessuser $ python3 -m subclrschm --help
использование: subclrschm [-h] [--version] [--multi-instance] [--log [LOG]]
                  [--live_save] [--select | --new]
                  [файл]

Редактор Sublime Color Scheme - Редактировать Sublime Color Scheme

позиционные аргументы:
  файл Файл темы

необязательные аргументы:
  -h, --help показать это справочное сообщение и выйти
  --version показать номер версии программы и выйти
  --multi-instance, -m Разрешить несколько экземпляров
  --log [ЖУРНАЛ], -l [ЖУРНАЛ]
                        Абсолютный путь к каталогу для хранения файла журнала
  --live-save, -L Включить сохранение в реальном времени.--select, -s Запрашивать выбор темы
  --new, -n Открыть запрос на создание новой темы

Опция	Описание
`файл`	Необязательный позиционный аргумент для указания открываемого файла `tmTheme` .
`несколько экземпляров`	По умолчанию subclrschm разрешает только один экземпляр subclrschm, и если другой экземпляр открыт, он отправит аргументы в уже открытый экземпляр.С помощью этого параметра вы можете разрешить несколько экземпляров. Может потребоваться перезапуск текущих экземпляров.
`журнал`	Subclrschm будет хранить журнал с любыми ошибками и т.п. в `~ / .subclrschm` , `~ / .config / subclrschm` или `c: \ Users \ \ .subclrschm` в macOS, Linux и Windows соответственно . Вы можете перенаправить размещение журнала, указав этот параметр в папке. Это в основном используется для интеграции в Sublime Text для сохранения журнала в папке пользователя.
`live-save`	Это немедленно сохраняет любые изменения в файле цветовой схемы. Это в основном используется в интеграции с Sublime Text для предоставления обновлений в реальном времени при редактировании текущей активной цветовой схемы.
`выберите`	Вместо того, чтобы спрашивать пользователя, хотят ли они создать новую цветовую схему или открыть существующую, вы можете заставить его немедленно попросить вас выбрать существующую цветовую схему. Это используется в интеграции с Sublime Text.
`новый`	Вместо того, чтобы спрашивать пользователя, хотят ли они создать новую цветовую схему или открыть существующую, вы можете заставить его создать новую цветовую схему. Это используется в интеграции с Sublime Text.

Открытие / создание новых цветовых схем

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

Монтаж

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

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

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

Глобальные настройки

Вкладка «Глобальные настройки» содержит все общие, глобальные настройки, такие как фон, передний план, цвета отступов, CSS всплывающих окон и т. Д.

Вы можете создать новые записи, нажав кнопку + , или удалить записи, выбрав запись и нажав кнопку - .Вы можете редактировать запись, дважды щелкнув по ней или нажав Enter, если она у вас выбрана.

Вы можете перемещаться по записям с помощью клавиш со стрелками или с помощью мыши.

Подбор цветовой схемы: Как подобрать гармоничную комбинацию цветов

Как подобрать гармоничную комбинацию цветов

Теория Цвета

Подбор цветов с помощью цветового круга

Различные варианты

Всё семейство

Итак, всё вместе

Заключение

Цветовой круг — Гармония цвета. Пастельные тона (Марта Джилл)

Гармония цвета. Пастельные тона

Руководство для создания наилучших цветовых сочетаний

Оглавление:

Цветовой круг Иттена: гармоничные сочетания цветов

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

Подбор цвета онлайн: 15 генераторов сочетания цветов

Русские сервисы сочетания цветов

Colorscheme

In colour balance

Colorup.tikkurila

Color Adobe

Генератор цветовых схем

Англоязычные сайты по подбору цвета

Random Material Generator

Material Mixer

Colorhunter

Palette Generation

Material Palette

Colorotate

Colorblender

Colorspire

Paletton

Colorexplorer

Подбор палитр легко и быстро: обзор программ для работы с цветом

— Дизайнер цветовых схем

Влюблен в цвета, с 2002 года.

Что такое цветовая схема: определения, типы и примеры

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

Монохромная цветовая схема

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

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

Триадная цветовая схема

Нейтральная цветовая схема

Что можно и что нельзя делать при выборе цвета для инфографики

Сделать Составить план

Не использовать Использовать светлые тона

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

Не позволять цвету отвлекать от данных

Сделайте Используйте оттенки, тона и оттенки

Сделать Поддерживать согласованность

Не Избегайте цветового круга

Сделайте Подходите под ваши цели / темы

БОНУС: используйте эти инструменты

1. Coolors

2. Цветовой код Hex

3. Adobe Color

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

5. BrandColors

6.Палетон

— Документация Sublime Text 3

Пример

Цвета

Переменные

Глобальные настройки

Акценты

CSS

Желоб

Diff

Выбор

Найти

Направляющие

Кронштейны

Теги

Тени

Правила применения

Соответствие

Именование

Правила стиля

Подсветка хешированного синтаксиса

Примеры

Настройка