Содержание
- Варианты сочетания цветов в интерьере
- Система RGB
- Какие цвета для сайта стоит использовать?
- Таблица цветов Pantone
- Характеристики
- Как использовать программу для подбора акцентных цветов
- Тип 3 – Стильные и креативные сайты с большим количеством графики
- Каким образом цвет влияет на восприятие вашего сайта и бренда?
- Немного теории
- Предложите решения
- HSB / HSV
- Как выбрать цветовую схему
- Лучшие генераторы цветовой палитры (обзоры)
Варианты сочетания цветов в интерьере
Цвет играет огромную роль в создании интерьера, с его помощью можно создать комфорт и уют, визуально увеличить или уменьшить пространство, поэтому надо ответственно относиться к такому вопросу, как сочетание.
Комплексное сочетание
Этот вариант считается универсальным. Используются классические оттенки, к ним относятся бежевый, серый и белый. Комбинируя эти тона с другими, вы сможете создать классическое решение, которое будет всегда выглядеть современно и красиво. В таком случае вам не надо будет постоянно менять интерьер комнаты при покупке новой мебели, замене покрытия пола или других элементов.
Комплексное сочетание
Триада или сочетание 3 цветов
Использование трех основных цветов, которые всегда гармонично сочетаются между собой и могут использоваться в равных мерах. Сочетание красного, синего и желтого вызывает прилив эмоций и бодрость. Если они используются в чистом виде, то получается яркое и насыщенное решение. Если же использовать полутона, то оформление комнаты получается менее агрессивным и более комфортным.
Триада оттенков
Аналогичное сочетание
Этот вариант предусматривает использование 2-3 типов оттенков, которые в цветовом круге расположены рядом. Вам надо выбрать подходящий, в котором решили оформить комнату и в цветовом круге справа или слева от него выбрать несколько тонов. Данное решение простое и оригинальное, а подобрать два-три аналогичных цвета несложно.
Аналогичное сочетание
Раздельно-комплементарное сочетание
При комплементарном сочетании используются контрастные оттенки, на цветовом круге они расположены напротив друг друга. При раздельно-комплементарном решении, вместо цвета, расположенного напротив, выбирают оттенок, который находится рядом с ним. Это позволяет создавать контрастные решения, но они получаются не такими напряженными, как при комплементарном сочетании.
Раздельно-комплементарное сочетание
Тетрада или сочетание 4 цветов
В этом случае схема состоит из основного цвета и есть еще два, которые его дополняют, а четвертый служит для выделения акцента. Это создает довольно интересный эффект, который вызывает положительные эмоции. В основном такие расцветки предпочитает молодежь или люди, находящиеся в постоянном движении и быстром ритме.
Тетрада в интерьере
Система RGB
Экран (как и всякое другое неизлучающее свет тело) — изначально тёмный. Его исходным цветом является чёрный. Все остальные цвета на нем получаются путём использования комбинации таких трёх цветов (традиционно в цветных кинескопах используются три «пушки»), которые в своей смеси должны образовать белый цвет. Опытным путём была выведена комбинация «красный, зелёный, синий» — RGB — red/green/blue. Чёрный цвет в схеме отсутствует, так как мы его и так имеем — это цвет «чёрного» экрана. Значит отсутствие цвета в схеме RGB соответствует чёрному цвету.
Эта система цветов называется аддитивной (additive), что в грубом переводе означает «складывающая/дополняющая». Иными словами, мы берём чёрный цвет (отсутствие цвета) и добавляем к нему первичные цвета, складывая их друг с другом до белого цвета.
Качество изображения на экране зависит от таких факторов, как: качество монитора (насколько хорошо он даёт «чёрный» цвет, насколько мелки точки, составляющие изображение на экране), качество видеосистемы (насколько хорошо она составляет все цвета из комбинации трёх цветов), иногда от окружающего освещения (в тёмной комнате или на ярком солнце).
Какие цвета для сайта стоит использовать?
Зеленый олицетворяет богатство, здоровье, спокойствие и природу. Этот цвет легче всего воспринимается глазами и, как следствие, расслабляет. Зелёный цвет стоит на втором месте среди самых любимых и для мужчин, и для женщин.
Желтый – символ молодости, оптимизма и жизнерадостности
Часто используется, чтобы привлечь внимание. Также желтый может вызвать напряжение, так что используйте его в небольших количествах
Оранжевый ассоциируется с дружелюбностью, восторгом и творчеством. Стимулирует в людях активность. Например, побуждает купить продукт или подписаться на рассылку. Этот цвет привлекает импульсивных покупателей.
Красный символизирует страсть, волнение, энергию и опасность. Часто используется, чтобы создать в восприятии людей срочную необходимость покупки. Вызывает сильные эмоциональные реакции. В ресторанах используется для поднятия аппетита.
Розовый – женственный, сладкий, невинный и романтичный. Часто используется в предложении частных услуг и товаров для девочек и женщин.
Фиолетовый – символ величия, богатства, успеха и мудрости. Часто присутствует в косметике. Влияет на людей успокаивающе.
Синий – показатель надежности, безопасности, стабильности, умиротворенности и спокойствия. Часто применяется банками и крупным компаниями. Синий цвет наиболее приятен как мужчинам, так и женщинам.
Серый в цветовой схеме олицетворяет нейтральность, простоту, спокойствие и логичность. Он ассоциируется с технологиями, производством, аккуратностью, контролем, компетентностью и даже опытностью.
Чёрный – цвет влияния, роскоши, опытности и элегантности. Часто используется для продвижения товаров класса люкс и ассоциируется с профессионализмом, силой и аккуратностью.
Ваша целевая аудитория – молодые и энергичные покупатели? Или более опытные люди с солидным заработком? Ваш продукт (сервис) нацелен в большей степени на мужчин или на женщин? Подходит ли он только для определенной возрастной группы?
Не каждый цвет подходит для представления вашего бизнеса. Например, если вы продаете коврики для йоги, фиолетовый (богатство и величие) и черный (сила и роскошь) – не самые лучшие варианты. Вам подойдет зеленый (здоровье, умиротворенность), серый (простота, спокойствие), синий (покой, спокойствие), или может быть даже красный (страсть, энергия).
Таблица цветов 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 |
Характеристики
Начнем разбираться с самого главного – с характеристик.
Тип
Существует два вида цветов:
- Ахроматические цвета: не имеют цветного пигмента (белый, серый, черный).
- Хроматические цвета: есть определенный пигмент.
То есть у тона или есть цвет, или его нет.
Температура
Разделяют оттенки на:
- Теплые: присутствуют примеси желтого или оранжевого.
- Холодные: содержат подтон синего.
Различать температуру цвета можно научиться: для этого нужно взять альбомный лист, кисти, гуашь — и начать смешивать цвета. Путем добавления к основному цвету каплю синего или оранжевого (желтого в некоторых случаях) — мы получаем теплый или холодный оттенок. Так мы делаем с разными цветами (розовым, фиолетовым, синим, голубым, зеленым, коричневым, бежевым, красным, желтым) — и опытным путем учимся видеть температуру цвета.
На многих сайтах есть такая версия распределения цветов на теплый и холодный (фото ниже) — это является грубой ошибкой: например, красный цвет может быть не только теплым, но и холодным, то же касается и других цветов, кроме оранжевого.
Насыщенность
По этому параметру цвета делят на:
- светлые
- яркие
- приглушенные
- темные
Превращать яркий цвет в темный, приглушенный или светлый легко. Для затемнения добавляют в чистый цвет каплю черного — и получают сначала приглушенный, потом темный, а для осветления – белого.
Как использовать программу для подбора акцентных цветов
Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:
Вот короткая инструкция, которая покажет вам, как создать цветовую схему одним из двух способов:
На основе преобладающего цвета
Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.
Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:
Вставьте код преобладающего цвета вашего сайта в прямоугольник ПОСЕРЕДИНЕ.
Как только вы зададите цвет, Adobe Color отобразит его на экране вместе с другими комплементарными цветами.
Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:
- Последовательная;
- Монохромная;
- Треугольная;
- Комплементарная;
- Составная;
- Оттенки.
Выберите цветовую схему
Поэкспериментируйте с разными цветовыми схемами, чтобы понять, какая из них подходит именно вам. Все цвета, предложенные программой, хорошо сочетаются друг с другом.
Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.
Важно не перемещать короткий указатель, расположенный посередине, чтобы ваш преобладающий цвет оставался постоянным:
Перемещайте указатели, если хотите выбрать другие комплементарные цвета.
CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:
Скопируйте цветовые коды (HEX) для вашей цветовой схемы для сайта.
На основе понравившейся фотографии
Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.
Вы можете загрузить любую понравившуюся фотографию в Adobe Color и программа автоматически сгенерирует цветовую схему, созданную на ее основе.
Шаг 1. Загрузите фотографию:
Нажмите на значок камеры, чтобы загрузить изображение.
Шаг 2. Выберите одно из пяти цветовых настроений:
- Красочное;
- Яркое;
- Приглушенное;
- Насыщенное;
- Темное.
Поэкспериментируйте с цветовыми настроениями, чтобы понять, какое вам ближе:
Выберите цветовое настроение.
Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета по изображению:
Перемещайте указатели, если хотите выбрать другие комплементарные цвета.
Шаг 4. Предложенная цветовая палитра расположена под изображением. Вот как можно подобрать цветовую схему для вашего веб-дизайна.
Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:
Нажмите на цветное колесико, чтобы увидеть коды цветов:
Скопируйте цветовые коды (HEX) для вашей цветовой схемы.
Тип 3 – Стильные и креативные сайты с большим количеством графики
Если вы собираетесь создать сайт, связанной с творчеством (мода, дизайн, ресторанный бизнес, красота и т.д.), для вас нет никаких ограничений.
Для сайтов такого типа не существует правил использования фонового цвета. Вы можете сделать панель меню черной, чтобы добавить драматизма. Или создать фон, используя все цвета радуги, чтобы взбодрить посетителей ресурса:
Старайтесь всегда придерживаться одного правила: никогда не выбирайте такой фоновый цвет, который сделает затруднительным прочтение текста на нем.
Идеальный фоновый цвет позволяет контенту выделяться и гармонично сочетается с преобладающим и вспомогательными цветами. Правильный фоновый цвет делает нахождение пользователей на сайте приятным.
Если вы сомневаетесь, используйте белый или светло-серый фон. Возможно, они не самые вдохновляющие, но вы будете уверены, что ваш контент четко виден.
Каким образом цвет влияет на восприятие вашего сайта и бренда?
Если я попрошу вас подумать о Кока-Коле, что первым придет вам на ум? Скорее всего, в вашем воображении всплывёт красный логотип Кока-Колы:
Довольно сложно думать об этом напитке, и не ассоциировать его с красным цветом. Красный настолько прочно связан с брендом, что так же важен, как и сам знаменитый напиток.
Красный в цветовой схеме несет в себе два важных послания:
- Ярко-красные этикетки сильно выделяются на фоне остальных на прилавках с газировкой.
- Каждый цвет вызывает определенные эмоции. Когда мы видим красный, у нас на подсознательном уровне возникает чувство возбуждения, любви и страсти. Именно эти чувства Кока-Кола хочет вызвать своими напитками:
Если вы выберете правильное цветовое оформление для своего сайта, вы не только сделаете его визуально привлекательным, но и создадите запоминающийся бренд.
85% покупателей признают, что основной причиной покупки товара явился его цвет.
Узнаваемость бренда увеличивается на 80% при использовании цвета.
Немного теории
Цвета для веб делаются при помощи сочетаний красных, зелёных и синих оттенков, этот способ сочетания цветов называется RGB (Red Green Blue).
Каждый цвет представлен целым числом от 0 до 255, и у каждого цвета есть значение для красного, зеленого и синего. Черный, например, не имеет никакого тона, и в RGB он обозначается как 0, 0, 0. Первая цифра всегда означает значение красного цвета, вторая-зелёного и третья-синего.
Поскольку есть 256 разновидностей каждого оттенка, cуществует и 16 миллионов всевозможных цветовых комбинаций RGB. Большинство компьютеров на сегоднешний день может точно отображать все эти 16 миллионов оттенков цветов. Есть так называемые «безопасные цвета», о необходимости их использовать мы уже писали здесь.
При указании цвета Вы можете употреблять значение RGB или же шестнадцатеричную систему HEX. Цвета HEX обозначаются шестью цифрами, перед которыми стоит знак #. HEX состоит из комбинации чисел и букв; 0- самое маленькое значение, FF (255) — самое высокое. Каждый из этих шести знаков в HEX соответствует числам в кодировке RGB. Черный цвет имеет значение HEX #000000.
147 цветов определяются по названию для HTML и CSS согласно w3schools.com. Есть 17 стандартных цветов — морская волна (aqua), чёрный (black), синий ( blue), фуксия (fuchsia), серый (gray), серый (grey), зелёный (green), лайм (lime), тёмно-бардовый (maroon) , тёмно-синий (navy), оливковый (olive), пурпурный (purple), красный (red),серебряный ( silver), сине-зелёный (teal), белый ( white) и жёлтый (yellow). У каждого цвета есть своё определенный RGB и значение HEX . У тёмно-бардового, например, есть значение RGB 128, 0, 0 а значение HEX #800000; у серебристого — 192, 192, 192 или #C0C0C0.
Предложите решения
Если вы только начинаете работать в дизайне, используйте бесплатные инструменты и сервисы: Adobe Color Wheel, Coolors, Swiss Color. Они помогут составить первоначальную цветовую палитру за несколько минут и выбрать основные цвета для будущего сайта. Чтобы лучше понимать композицию и цветовые сочетания, прочитайте книгу «Искусство цвета» Иоханнеса Иттена. В ней хорошо сформулированы и описаны принципы выбора.
Начинающие дизайнеры нередко ошибаются и презентуют цветовую палитру в отрыве от продукта — это неправильно. Клиент не понимает, что означают эти цветные квадратики, и может забраковать вашу работу. Презентуйте цветовую палитру на черновых макетах и прототипах сайта, чтобы у заказчика было представление, как цвета будут работать на практике.
Не присылайте клиенту цветовую палитру в таком виде.
Самый эффективный способ, представить цветовую палитру — сделать UI-кит. Это документ, в котором представлены все элементы интерфейса, используемые на сайте, указаны их параметры и цвета. На основе UI-кита собираются две-три страницы сайта, подбираются фотографии или иллюстрации в тон цветовой гамме — так макет будет смотреться более полно и гармонично.
Пример UI-кита с Behance. Автор Raul Taciu.
Если вы хотите создавать приятные и лаконичные палитры для сайтов, приходите на курс «Веб-дизайн с 0 до PRO»
Вы научитесь создавать контраст, управлять вниманием пользователей с помощью цвета и правильно презентовать цветовую палитру клиенту.
HSB / HSV
HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.
HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).
Как выбрать цветовую схему
1. Ориентируйтесь на удобство работы для пользователей. Прежде чем добавлять цвет, нанесите дизайн в оттенках серого. Не уверены, что хорошо? Посмотрите на улицу. Природа — отличный пример цветов, которые дополняют друг друга.
2. Задайте настроение сайту. Подумайте о настроении, которое вы хотите создать выбранной схемой.
3. Учтите цветовой контекст и как цвета смотрятся на контрасте. Посмотрите на изображении ниже. Середина каждой фигуры одного размера, формы и цвета. Меняется цвет фона. Но одни круги кажутся мягче, ярче в зависимости от цвета за ними.
4. Посмотрите на цветовой круг. Выберите несколько схем. Не все они подходят для дизайна вашего сайта — вы это увидите сразу. Действуйте методом проб и ошибок. Это поможет найти нужную цветовую схему.
5. Пользуйтесь правилом 60-30-10: основной цвет для 60% дизайна, вторичный цвет для 30% и акцентный цвет для 10%.
Лучшие генераторы цветовой палитры (обзоры)
1. Coolors – лучший генератор цветовой палитры
Coolors создают красивые, гладкие и сверхбыстрые цветовые схемы, которые работают вместе. Вы получаете цветовые коды, которые упрощают поиск цвета. Он позволяет экспортировать или сохранять цветовые палитры как SVG, PNG, SVG, SCSS или COPIC. Вы выбираете начальный цвет с изображения, а остальное – это идеальное сочетание цветов. Это так же просто, как нажатие клавиши пробела, и работа готова. Вы можете создать профиль и сохранить коллекцию цветовых палитр, хорошо организованную с помощью имен и тегов. Срок испытания Coolors составляет три месяца. Есть приложение для Android или iOS. Кроме того, он поставляется с плагином Adobe Photoshop и Adobe Illustrator. Это известно среди всех генераторов цветовой палитры.
2. Палитра – конструктор цветовых схем
Palettonранее назывался «Дизайнер цветовой схемы». Это один из самых известных генераторов цветовых схем для выбора цветовой палитры, не требующий особых усилий. Каждая схема основана на одном цвете, который сочетается с другими цветами, чтобы создать наилучшее визуальное впечатление. У него есть множество вариантов настройки, которые отлично работают при создании цветовых схем. Он может создавать уникальную палитру с нуля или использовать предопределенные параметры. Он предоставляет вам 24 предустановленных эффекта, таких как блестящий, темный неон и яркая пастель. Более того, их можно настроить для создания новой палитры. Когда настройка будет завершена, вы можете экспортировать свою палитру в несколько разных форматов, таких как PNG, SCSS, PDF, SVG, код CSS или скопировать постоянные URL-адреса. Самая привлекательная особенность дизайнера цветовой схемы – это живой образец созданной вами цветовой схемы. Вы можете начать с выбранных типов цветовых схем, таких как свободный стиль, монохроматическая, смежная, триада и тетрада. Если вы новичок, то лучшим вариантом будет базовая теория цветов, а на графике вы можете изучить новые палитры.
3. Adobe Color CC – генератор цветовой схемы
Adobe Color CC ранее назывался Adobe Kuler. Adobe недавно переименовала его в Adobe Color CC. Этот расширенный генератор сочетания цветов может создавать различные цветовые схемы с помощью цветового колеса вращения, каждая из которых состоит из набора из пяти цветов. Это позволяет пользователям сохранять свои палитры и напрямую загружать палитры в качестве образцов в свои программы CC. Если вы не можете выбрать правильную цветовую схему, нажмите «исследовать» и просмотрите темы, предложенные другими дизайнерами. В программе есть сообщество дизайнеров Kuler, которое позволяет делиться вашими собственными палитрами.
4. TemplateToaster
Конструктор сайтов Templatetoaster имеет множество готовых цветовых схем, и они основаны на Bootstrap. Вы можете прокрутить, чтобы увидеть все цветовые схемы. Когда вы нажимаете кнопку «+», появляется диалоговое окно с дополнительными цветовыми схемами. Он имеет первичный, вторичный, успешный, информационный, опасный, предупреждающий цвета для создания новой палитры. Это позволяет вам создавать столько палитр, сколько вы хотите, и сохранять их под уникальным именем. Его палитра цветов включает пипетку, ScRGB, sRGB, шестнадцатеричный формат и прозрачность. Это программное обеспечение может удовлетворить ваши две потребности одним документом.
Удивлен! Да, вы не ослышались!
Он также может помочь вам создать потрясающе выглядящий веб-сайт, а также имеет готовые шаблоны, которые выглядят довольно свежо. Таким образом, вам не потребуется никаких дополнительных плагинов для цветовой схемы.
Поскольку они существуют уже некоторое время, и их миллионы пользователей доказывают, что они лучшие собаки индустрии веб-дизайна.
5. Цветовая сфера Mudcube – Генератор цветовой палитры
Mudcube – это сложный генератор цветовой палитры с большими ползунками для более детального управления вашей цветовой палитрой. Он имеет 10 предустановок гармонии, 9 предустановок видения и 3 предустановки квантования. Если вы не можете выбрать цветовую схему, тогда этот генератор цветовой палитры для вас. В раскрывающемся меню есть несколько тем для выбора. Вы можете загрузить свои палитры в файлах .AI или .ACO. Кроме того, они могут быть загружены напрямую либо были известны как Adobe Kuler. был известен как Adobe Kuler. в Photoshop или Illustrator.