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

Колориты

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

Существует четыре типа колорита: насыщенный, разбелённый, зачерненный и ломаный.


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

Разбелённый колорит использует цвета, смешанные с белым цветом, так называемые оттенки (см. «Базовые понятия в колористике»). Такой колорит более нежный, приглушенный, спокойный и используется в там, где нет накала страстей и никакой внутренней борьбы.

Зачернённый колорит использует цвета, смешанные с черным, то есть тени (см. «Базовые понятия в колористике»). Этот колорит используют в дорогих статусных проектах, чтобы подчеркнуть их исключительность.

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

Теория Цвета

  • О цвете с самого начала

  • Музей цветовых моделей

  • Словарь теории цвета

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

Музей цветовых моделей

Данный пример демонстрирует историю развития моделей представления цвета начиная с 16-ого столетия! Подборка сделана Ф.Геритсеном (F. Gerritsen). Она свидетельствует о том, как глубоко развивались представления и теории, связанные с феноменом цвета.

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

Среди прочих моделей, на которые стоит обратить внимание, — сферы Мюнселя (Munsell Spheres) и диаграммы CIE, которые каждая по своему, являются теми стандартами, по которым сейчас измеряются цвета. Надеемся, вы получите удовольствие, глядя на то, как другие пытались понять, что такое цвет

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

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

Цветовая модель Della Porta (1593) Цветовая модель Aguilonius (1613) Цветовая модель Kircher (1646)
Цветовая модель Newton (1660) Цветовая модель Waller (1686) Цветовая модель Lambert (1772)
Цветовая модель Goethe (1793) Цветовая модель Runge (1810) Цветовая модель Herschel (1817)
Цветовая модель Chevreul (1839) Цветовая модель Schreiber (1840) Цветовая модель Maxwell (1857)
Цветовая модель Wundt (1874) Цветовая модель Von Bezold (1876) Цветовая модель Rood (1879)
Цветовая модель Hofler (1883) Цветовая модель Titchener (1887) Цветовая модель Wundt (1893)
Цветовая модель Ebbinghaus (1902) Цветовая модель Munsell (1905) Цветовая модель Rood (1910)
Цветовая модель Munsell (1915) Цветовая модель Ostwald (1917) Цветовая модель Klee (1924)
Цветовая модель Boring (1929) Цветовая модель Pope (1929) Цветовая модель CIE (1931)
Цветовая модель Rösch-MacAdam (1935/1953) Цветовая модель Johansson (1939) Цветовая модель Hickethier (1940)
Цветовая модель CIE (1953) Цветовая модель Hesselgren (1955) Цветовая модель Luther-Nyberg (1955)
Цветовая модель Hard (1968) Цветовая модель Kuppers (1972) Цветовая модель Gerritsen (1975)

Почему так много цветовых схем?

На самом деле их не так уж и много. В целом их все можно поделить на два типа: схемы представления цвета от излучаемого, и от отражённого света. Все объекты видимы для нас потому, что они сами являются источником света, либо светят отражённым светом. Чтобы более ясно понять это, взгляните на небо. Перед вами предстанут два вида объектов: те, которые светят (солнце, звезды, кометы, метеориты) и те, которые светят отражённым светом (планеты, спутники, космонавты и станция «Мир»).

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

Человеческий глаз не способен отличить цвет «определённого цвета», от цвета, полученного путём смешивания других цветов. Издавна люди подметили эту особенность, и вместо того чтобы создавать миллионы красок различных оттенков, традиционно используется лишь небольшое ограниченное их число (от сотни до трёх), а все остальные краски получаются путём смешивания исходных. Эти исходные цвета называются «первичными» — primary colors.

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

В связи с этим определяются цветовые схемы (color schemes) — набор первичных цветов, используемых для получения всех остальных цветов.

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

Оттенок (tint), тональность (tone), и тень (shade)

Эти термины часто используются неправильно, но они описывают довольно простое понятие в цвете. Главное помнить, насколько цвет отличается от своего начального тона (hue). Если к цвету добавляется белый, эта более светлая разновидность цвета называется «оттенок» (tint). Если цвет делается темнее путём добавления чёрного, полученный цвет называется «тень» (shade). Если же добавляется серый цвет, каждая градация дает вам различную тональность (tone).


Оттенки (добавляем белый к чистому цвету).

Тени (добавляем чёрный к чистому цвету).

Тональности (добавляем серый к чистому цвету).

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

Цветовой круг RGB (красный, зеленый, синий) представляет собой 3 источника света, используемые для производства цветов на экране телевизора или компьютера.

Основные цвета: красный, зеленый и синий.

Вторичные цвета создаются путем смешивания основных цветов:

Красный и зеленый = желтыйЗеленый и синий = голубойСиний и красный = пурпурный

12 основных цветов RGB:

RED#FF0000(255,0,0) #FF8000(255,128,0) YELLOW#FFFF00(255,255,0) #80FF00(128,255,0) GREEN#00FF00(0,255,0) #00FF80(0,255,80)
CYAN#00FFFF(0,255,255) #0080FF(0,128,255) BLUE#0000FF(0,0,255) #8000FF(128,00,255) MAGENTA#FF00FF(255,0,255) #FF0080(255,0,128)

Зеленый цвет RGB отличается от цвета HTML с именем Green.

Зеленый цвет RGB отличается от цвета HTML с именем Green.

Колесо цвета синтез системе RYB

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

3 основных цвета красный, желтый и синий.

Вторичные цвета создаются путем смешивания основных цветов.

3 вторичных цвета оранжевый, зеленый и фиолетовый.

Красный и желтый = оранжевыйЖелтый и синий = зеленыйСиний и красный = фиолетовый.

Третичные цвета изготавливаются путем смешивания двух вторичных цветов.

6 третичных цветов красно-оранжевый, желтый-оранжевый, желтый-зеленый, сине-зеленый, сине-фиолетовый, красно-фиолетовый

12 основных цветов синтез системе RYB:

RED#FE2712 R-O#FC600A ORANGE#FB9902 Y-O#FCCC1A YELLOW#FEFE33 Y-G#B2D732
GREEN#66B032 B-G#347C98 BLUE#0247FE B-P#4424D6 PURPLE#8601AF R-P#C21460

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

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

Вы узнаете больше о цветовых схемах в главе Цветовые схемы.

❮ Назад Дальше ❯

Светлота (Luminance/Lightness)

Несмотря на то, что вместо этого слова часто употребляют слово «яркость» (brightness), мы предпочитаем использовать слово «светлота» (или «светимость»). Понятие «светлота цвета» связано с многими теми же переменными, что и яркость в смысле «value». Но в данном случае используется другая математическая формула. Если говорить кратко, вспомните цветовой круг. В нем цвета расположены по кругу с одинаковой светлотой. Добавление белого увеличивает светлоту, добавление чёрного — уменьшает.

Это измерение цвета относится к яркости (value), но отличается по своему математическому определению. Светлота цвета измеряет интенсивность потока света на единицу площади его источника. Рассчитывается она путём вычисления среднего в группе ахроматичных цветов.

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

The Best Color Scheme tools out there today for 2020:

The criteria: 

  • Needs to be easy to export color schemes
  • Is free to use
  • Actually comes up with awesome color schemes.
  1. Coolers.co – comes up with some decent color schemes – just press generate a few times to get it’s engine up and running!

2. Paletton – “Add Complementary” and drag around the selector on the color graph to find colors easily. Try some of it’s other settings to become familiar with this super useful and powerful tool.

3. Colormind.io – Colormind is said to use ‘deep learning’ to assimilate color schemes from popular movies and art – to help come up with better color schemes. If nothing else, it’s a fun spin on color schemes for 2020! Thank you for reading – bookmark this post. We’ll be adding more color schemes for 2020 soon, as we start to analyze the high-fashion designer trends for 2020. We’ll also be writing an in-depth article about those trends in the next couple of weeks, so keep an eye out.

Таблица цветов Pantone

В таблице представлен Pantone Color Bridge Coated Process. Данный каталог цветов содержит лишь ближайшие CMYK и RGB аналоги к смесевым цветам. Далеко не каждый цвет из палитры Pantone возможно передать триадными красками, — цветовой диапазон смесевых цветов Pantone гораздо шире, чем у триадных красок CMYK.

Образец Цвет Pantone C M Y K HTML R G B
PANTONE 100 56 #FCEA76 252 234 118
PANTONE 101 68 #FCE85F 252 232 95
PANTONE 102 95 #FEE500 254 229
PANTONE 103 5 5 100 16 #D0BC00 208 188
PANTONE 104 7 13 100 28 #BBA30D 187 163 13
PANTONE 105 13 18 88 45 #998730 153 135 48
PANTONE 106 75 #FCE85D 252 232 93
PANTONE 107 92 #FDE724 253 231 36
PANTONE 108 5 98 #F9DA00 249 218
PANTONE 109 9 100 #F8D500 248 213
PANTONE 110 2 22 100 8 #DBB216 219 178 22
PANTONE 111 8 21 100 28 #B69920 182 153 32
PANTONE 112 10 20 100 40 #A48C1A 164 140 26
PANTONE 113 2 83 #FAE34E 250 227 78
PANTONE 114 4 87 #F9DE45 249 222 69
PANTONE 115 6 87 #F8DB46 248 219 70
PANTONE 116 14 100 #F5CB08 245 203 8
PANTONE 117 6 27 100 12 #CDA31F 205 163 31
PANTONE 118 7 28 100 30 #B48F1F 180 143 31
PANTONE 119 17 22 100 47 #937F20 147 127 32
PANTONE 120 5 64 #F7DD76 247 221 118
PANTONE 121 8 70 #F6D86F 246 216 111
PANTONE 122 11 80 #F5D258 245 210 88
PANTONE 123 19 89 #F2C541 242 197 65
PANTONE 124 30 100 #EDB220 237 178 32
PANTONE 125 6 32 100 24 #BB9121 187 145 33
PANTONE 126 11 31 100 36 #A7861D 167 134 29
PANTONE 127 4 62 #FAE17B 250 225 123
PANTONE 128 7 75 #F8D962 248 217 98
PANTONE 129 11 78 #F6D15A 246 209 90
PANTONE 130 32 100 #EDAC1A 237 172 26
PANTONE 131 2 39 100 10 #D0941F 208 148 31
PANTONE 132 9 38 100 32 #AB7F20 171 127 32
PANTONE 133 19 37 100 59 #775F1F 119 95 31
PANTONE 134 12 60 #F5D27A 245 210 122
PANTONE 135 21 76 #F1C15C 241 193 92
PANTONE 136 28 87 #EFB646 239 182 70
PANTONE 137 41 100 #EAA124 234 161 36
PANTONE 138 52 100 #E68C28 230 140 40
PANTONE 139 7 49 100 25 #B27827 178 120 39
PANTONE 140 19 49 100 54 #7D5A25 125 90 37
PANTONE 141 16 65 #F5CD66 245 205 102
PANTONE 142 24 78 #F2BF4C 242 191 76
PANTONE 143 32 87 #F0B336 240 179 54
PANTONE 144 51 100 #EA961C 234 150 28
PANTONE 145 4 53 100 8 #D08921 208 137 33
PANTONE 146 7 50 100 34 #A97620 169 118 32
PANTONE 147 19 38 90 58 #786428 120 100 40
PANTONE 148 17 43 #F4D199 244 209 153
PANTONE 149 24 51 #F2C688 242 198 136
PANTONE 150 41 78 #EDAA50 237 170 80
PANTONE 151 60 100 #E88D21 232 141 33
PANTONE 152 66 100 #E68523 230 133 35
PANTONE 153 5 64 100 17 #C17723 193 119 35
PANTONE 154 8 66 100 41 #9D6120 157 97 32
PANTONE 155 12 34 #F5D7A5 245 215 165
PANTONE 156 23 49 #F1C382 241 195 130
PANTONE 157 42 74 #EBA344 235 163 68
PANTONE 158 62 95 #E47E1A 228 126 26
PANTONE 159 1 72 100 7 #D0651E 208 101 30
PANTONE 160 6 71 100 31 #AB5A20 171 90 32
PANTONE 161 16 67 100 71 #66401D 102 64 29
PANTONE 162 25 35 #F0C4A0 240 196 160
PANTONE 163 44 52 #EBA677 235 166 119
PANTONE 164 59 80 #E68A48 230 138 72
PANTONE 165 70 100 #E37828 227 120 40
PANTONE 166 76 100 #E06C2A 224 108 42
PANTONE 167 5 77 100 15 #BB5D29 187 93 41
PANTONE 168 12 80 100 60 #6F3B20 111 59 32
PANTONE 169 30 26 #EEBCA8 238 188 168
PANTONE 170 48 50 #E89C77 232 156 119
PANTONE 171 61 72 #E4834E 228 131 78
PANTONE 172 73 87 #E06E37 224 110 55
PANTONE 173 82 94 2 #D7572B 215 87 43
PANTONE 174 8 86 100 36 #9C4124 156 65 36
PANTONE 175 18 79 78 56 #77402E 119 64 46
PANTONE 176 35 18 #EDB9B4 237 185 180
PANTONE 177 54 38 #E7948A 231 148 138
PANTONE 178 70 58 #E27865 226 120 101
PANTONE 179 87 85 #DD5143 221 81 67
PANTONE 180 3 91 86 12 #C1433C 193 67 60
PANTONE 181 21 93 88 50 #80352F 128 53 47
PANTONE 182 31 8 #ECBEC5 236 190 197
PANTONE 183 49 17 #E79CA6 231 156 166
PANTONE 184 73 32 #DF6B7C 223 107 124
PANTONE 185 93 79 #D93740 217 55 64
PANTONE 186 2 100 85 6 #C92A39 201 42 57
PANTONE 187 7 100 82 26 #AC2B37 172 43 55
PANTONE 188 16 100 65 58 #7D2935 125 41 53
PANTONE 189 39 10 #EBB3BC 235 179 188
PANTONE 190 56 18 #E58F9E 229 143 158
PANTONE 191 79 36 #DE6276 222 98 118
PANTONE 192 94 64 #DB3B50 219 59 80
PANTONE 193 2 99 62 11 #C32E4C 195 46 76
PANTONE 194 8 100 55 37 #9D2945 157 41 69
PANTONE 195 19 90 50 55 #7E3545 126 53 69
PANTONE 196 23 6 #EFCAD0 239 202 208
PANTONE 197 46 12 #E8A1B0 232 161 176
PANTONE 198 82 37 #DC5672 220 86 114
PANTONE 199 100 72 #D82949 216 41 73

Выбор цвета

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

На данных иллюстрациях представлены панели выбора цвета программ Paint, Photoshop, и Fireworks:

MS Paint: стандартная панель цветов Windows.

Adobe Photoshop CC: уже лучше, но представление цветового пространства по-прежнему плоское.


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

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

Хроматичность (Chromaticity, Chorma)

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

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

Высокая хроматичность — очень сияющие, живые цвета.

Низкая хроматичность — ахроматичные, бесцветные цвета.

Хроматичность одинакова — средний уровень. Та же живость цветов несмотря на различный тон; чистота меньше, чем у образцов выше.

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

Хроматичность, которую часто называют «сочностью», является количеством цвета (hue) в цвете. Цвет без цвета (hue) является ахроматичным или монохроматичным, и видим как серый. Для большинства цветов, по мере увеличения яркости увеличивается и хроматичность, за исключением очень светлых цветов.

CMY (K) цвет колеса

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

Основные цвета: голубой, пурпурный и желтый.

Вторичные цвета создаются путем смешивания основных цветов:

Голубой и пурпурный = синийПурпурный и желтый = красныйЖелтый и голубой = зеленый.

12 основных цветов CYM:

CYAN#00FFFF(0,255,255) #0080FF(0,128,255) BLUE#0000FF(0,0,255) #8000FF(128,00,255) MAGENTA#FF00FF(255,0,255) #FF0080(255,0,128)
RED#FF0000(255,0,0) #FF8000(255,128,0) YELLOW#FFFF00(255,255,0) #80FF00(128,255,0) GREEN#00FF00(0,255,0) #00FF80(0,255,80)

Заключение

«Цвет — это та точка, где наш мозг соприкасается со вселенной» (Поль Сезанн)

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

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


С этим читают