Подбор цвета для сайта: Цвета Pantone — Онлайн каталог Pantone. Таблица Пантонов по CMYK и RGB — ColorScheme.Ru

Цвета Pantone — Онлайн каталог Pantone. Таблица Пантонов по CMYK и RGB — ColorScheme.Ru

ColorScheme

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

Цветовой Круг Онлайн ⇒

Карта СайтаНазвания ЦветовЦвета АвтомобилейИмена цветов в HTMLКонвертер Цветов

Цветовая модель Пантон, система Pantone Matching System — это широко используемая стандартизованная система идентификации и подбора цвета, общепризнанный международный стандарт в издательском деле и офсетном производстве.

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

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

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

  • Номер цвета:
  • Страница 1
  • <
  • >
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
ОбразецЦвет PantoneCMYKHTMLRGB
PANTONE 10000560#FCEA76252234118
PANTONE 10100680#FCE85F25223295
PANTONE 10200950#FEE5002542290
PANTONE 1035510016#D0BC002081880
PANTONE 10471310028#BBA30D18716313
PANTONE 10513188845#99873015313548
PANTONE 10600750#FCE85D25223293
PANTONE 10700920#FDE72425323136
PANTONE 10805980#F9DA002492180
PANTONE 109091000#F8D5002482130
PANTONE 1102221008#DBB21621917822
PANTONE 11182110028#B6992018215332
PANTONE 112102010040#A48C1A16414026
PANTONE 11302830#FAE34E25022778
PANTONE 11404870#F9DE4524922269
PANTONE 11506870#F8DB4624821970
PANTONE 1160141000#F5CB082452038
PANTONE 11762710012#CDA31F20516331
PANTONE 11872810030#B48F1F18014331
PANTONE 119172210047#937F2014712732
PANTONE 12005640#F7DD76247221118
PANTONE 12108700#F6D86F246216111
PANTONE 122011800#F5D25824521088
PANTONE 123019890#F2C54124219765
PANTONE 1240301000#EDB22023717832
PANTONE 12563210024#BB912118714533
PANTONE 126113110036#A7861D16713429
PANTONE 12704620#FAE17B250225123
PANTONE 12807750#F8D96224821798
PANTONE 129011780#F6D15A24620990
PANTONE 1300321000#EDAC1A23717226
PANTONE 13123910010#D0941F20814831
PANTONE 13293810032#AB7F2017112732
PANTONE 133193710059#775F1F1199531
PANTONE 134012600#F5D27A245210122
PANTONE 135021760#F1C15C24119392
PANTONE 136028870#EFB64623918270
PANTONE 1370411000#EAA12423416136
PANTONE 1380521000#E68C2823014040
PANTONE 13974910025#B2782717812039
PANTONE 140194910054#7D5A251259037
PANTONE 141016650#F5CD66245205102
PANTONE 142024780#F2BF4C24219176
PANTONE 143032870#F0B33624017954
PANTONE 1440511000#EA961C23415028
PANTONE 1454531008#D0892120813733
PANTONE 14675010034#A9762016911832
PANTONE 14719389058#78642812010040
PANTONE 148017430#F4D199244209153
PANTONE 149024510#F2C688242198136
PANTONE 150041780#EDAA5023717080
PANTONE 1510601000#E88D2123214133
PANTONE 1520661000#E6852323013335
PANTONE 15356410017#C1772319311935
PANTONE 15486610041#9D61201579732
PANTONE 155012340#F5D7A5245215165
PANTONE 156023490#F1C382241195130
PANTONE 157042740#EBA34423516368
PANTONE 158062950#E47E1A22812626
PANTONE 1591721007#D0651E20810130
PANTONE 16067110031#AB5A201719032
PANTONE 161166710071#66401D1026429
PANTONE 162025350#F0C4A0240196160
PANTONE 163044520#EBA677235166119
PANTONE 164059800#E68A4823013872
PANTONE 1650701000#E3782822712040
PANTONE 1660761000#E06C2A22410842
PANTONE 16757710015#BB5D291879341
PANTONE 168128010060#6F3B201115932
PANTONE 169030260#EEBCA8238188168
PANTONE 170048500#E89C77232156119
PANTONE 171061720#E4834E22813178
PANTONE 172073870#E06E3722411055
PANTONE 173082942#D7572B2158743
PANTONE 17488610036#9C41241566536
PANTONE 17518797856#77402E1196446
PANTONE 176035180#EDB9B4237185180
PANTONE 177054380#E7948A231148138
PANTONE 178070580#E27865226120101
PANTONE 179087850#DD51432218167
PANTONE 1803918612#C1433C1936760
PANTONE 18121938850#80352F1285347
PANTONE 18203180#ECBEC5236190197
PANTONE 183049170#E79CA6231156166
PANTONE 184073320#DF6B7C223107124
PANTONE 185093790#D937402175564
PANTONE 1862100856#C92A392014257
PANTONE 18771008226#AC2B371724355
PANTONE 188161006558#7D29351254153
PANTONE 189039100#EBB3BC235179188
PANTONE 190056180#E58F9E229143158
PANTONE 191079360#DE627622298118
PANTONE 192094640#DB3B502195980
PANTONE 1932996211#C32E4C1954676
PANTONE 19481005537#9D29451574169
PANTONE 19519905055#7E35451265369
PANTONE 19602360#EFCAD0239202208
PANTONE 197046120#E8A1B0232161176
PANTONE 198082370#DC567222086114
PANTONE 1990100720#D829492164173
  • Номер цвета:
  • Страница 1
  • <
  • >
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

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

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

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

Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь .

colorscheme.ru

С этим инструментом я дружу уже много лет. Наиболее удобный инструмент для подбора цветов (на мой взгляд). У него много дополнительных возможностей. Например можно посмотреть пример светлой и темной страницы с выбранными цветами.

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

 

color.adobe.com

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

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

 

paletton.com

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

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

 

Следующие два сайта генерируют палитру из выбранного вами изображения.  It is magic 🙂

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

Color Palette Generator

На этом сайте необходимо указать ссылку на изображение.

 

palettegenerator.com

На этот сайт нужно загрузить картинку со своего компьютера.

 

palettable.io

Очень удобный инструмент для подбора цвета. Основан на принципе «Нравится — Не нравится».

 

flatcolors.net

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

 

materialpalette.com

Еще один модный тренд —  материал дизайн. Данный сайт помогает подобрать сочетания цветов для UI (user interface). Дополнительно на сайте есть большой набор иконок.

 

getuicolors.com

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

Вот такие инструменты есть у меня в закладках.

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

Нужен сайт с правильными цветами? Пишите, сделаем 🙂

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Как выбрать хорошие цветовые схемы веб-сайта (2022)

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

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

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

Вам нравится наша графика?

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

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

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

Когда некоторые компании экспериментировали с цветами кнопок, они заметили резкий скачок или снижение конверсии. Например, Beamax, компания, производящая проекционные экраны, заметила гигантское увеличение на 53,1% кликов по красным ссылкам по сравнению с синими.

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

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

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

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

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

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

  • Красный: Coca-Cola или Nintendo – олицетворяет волнение или счастье
  • Оранжевый : Nickelodeon или Fanta – предполагает дружеское и веселое времяпрепровождение
  • Желтый: Nikon или McDonalds – Подразумевает оптимизм и счастье
  • Зеленый: Whole Foods или Animal Planet — Подразумевает свежесть и природу
  • Синий: Walmart или American Express — Подразумевает надежность и уверенность
  • Фиолетовый: Hallmark или Cadbury — Подразумевает известный бренд с историей качества
  • Коричневый: Nespresso или UPS — подразумевает надежный продукт, которым может пользоваться каждый
  • Черный: Chanel или Adidas — подразумевает роскошь или элегантность
  • Белый: Apple или Nike — подразумевает элегантные, удобные продукты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Беглый взгляд на эту страницу на веб-сайте Penguin Books показывает, что они выбрали более мягкий серый тон для своего текста. Это намного менее агрессивно, чем резкий черно-белый контраст, и создает более мягкую атмосферу.

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

Используйте постоянную насыщенность

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

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

Используйте один и тот же цвет, но меняйте насыщенность

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

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

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

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

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

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

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

Вот шаги, которые вы должны предпринять при выборе цветов для своего веб-сайта:

  1. Выберите основной цвет: выберите цвет, который соответствует энергии вашего продукта или услуги.
  2. Выберите дополнительные цвета: выберите один или два дополнительных цвета, которые дополняют ваш основной цвет, в идеале цвета, которые делают ваш основной цвет «ярким».
  3. Выберите цвет фона: выберите цвет фона вашего веб-сайта — возможно, менее «агрессивный», чем ваш основной цвет.
  4. Выберите цвет шрифта: выберите цвет текста, который будет на вашем веб-сайте — помните, что сплошной черный шрифт встречается редко и не рекомендуется.

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

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

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

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

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

6 советов по выбору потрясающей цветовой схемы для веб-сайта

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

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

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

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

  1. Изучите основы психологии цвета
  2. Ознакомьтесь с теорией цвета
  3. Подумайте о смешивании цветовых комбинаций
  4. Будь проще
  5. Контрастируйте цвета
  6. Интегрируйте свой брендинг

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

1. Познакомьтесь с основами психологии цвета

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

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

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

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

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

2. Ознакомьтесь с теорией цвета

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

Во-первых, вам нужно понять первичных , вторичных и третичных цветов.

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

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

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

Во-вторых, давайте поговорим о теплых и холодных цветах .

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

В-третьих, важно понимать оттенки цвета .

Не каждый цвет, который вы видите, является чистым цветом. Многие из цветов, которые вы видите в Интернете, так или иначе были изменены.

Возможно, вы видите оттенок (цвет с добавлением белого), оттенок (цвет с добавлением черного) или тон (цвет с добавлением серого).

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

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

3. Подумайте о смешивании цветовых комбинаций

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

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

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

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

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

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

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

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

4. Будь проще

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

Простота имеет два больших преимущества.

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

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

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

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

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

Эта цветовая схема едина для всего сайта. Вот как выглядит один из постов в блоге:

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

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

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

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

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

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

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

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

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

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

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

6. Интегрируйте ваш брендинг

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

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

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

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

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

А теперь приступайте к (цветным) интригам!

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

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

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

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

Об авторе

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

This entry was posted in Популярное