Цветовая схема для сайта: Московская Цветовая Палитра — Онлайн каталог «Цветовая Палитра Москвы» — ColorScheme.Ru

22.06.2021 alexxlab

Содержание

Московская Цветовая Палитра — Онлайн каталог «Цветовая Палитра Москвы» — ColorScheme.Ru

ColorScheme

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

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

Каталог цветов «Цветовая палитра Москвы» существует с начала 2000-х годов. Палитра была разработана специалистами из комитета по архитектуре и градостроительству города Москвы на базе международной системы обозначения цвета NCS, и включает в себя более 400 цветов.

Московская палитра призвана обеспечить единую систему окраски зданий и сооружений, поэтому на неё ориентируются не только строители и архитекторы, но и зарубежные и отечественные производители лакокрасочных материалов. Основное назначение «Московской Цветовой Палитры» — обозначение цвета в колористических паспортах объектов Столицы.

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

Каталог цветов «Цветовая Палитра Москвы»

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

Красная цветовая область:

МП-0001-К 0001
МП-0002-К 0002
МП-0003-К 0003
МП-0004-К 0004
МП-0005-К 0005
МП-0006-К 0006
МП-0007-К 0007
МП-0008-К 0008
МП-0009-К 0009
МП-0010-К 0010
МП-0011-К 0011
МП-0012-К 0012
МП-0013-К 0013
МП-0014-К 0014
МП-0015-К 0015
МП-0016-К 0016
МП-0017-К 0017
МП-0018-К 0018
МП-0019-К 0019
МП-0020-К 0020
МП-0021-К 0021
МП-0022-К 0022
МП-0023-К 0023
МП-0024-К 0024
МП-0025-К 0025
МП-0026-К 0026
МП-0027-К 0027
МП-0028-К 0028
МП-0029-К 0029
МП-0030-К 0030
МП-0031-К 0031
МП-0032-К 0032
МП-0033-К 0033
МП-0034-К 0034
МП-0035-К 0035
МП-0036-К 0036
МП-0037-К 0037
МП-0038-К 0038
МП-0039-К 0039
МП-0040-К 0040
МП-0041-К 0041
МП-0042-К 0042
МП-0043-К 0043
МП-0044-К 0044
МП-0045-К 0045
МП-0046-К 0046
МП-0047-К 0047
МП-0048-К 0048
МП-0049-К 0049
МП-0050-К 0050
МП-0051-К 0051
МП-0052-К 0052
МП-0053-К 0053
МП-0054-К 0054
МП-0055-К 0055
МП-0056-К 0056
МП-0057-К 0057
МП-0058-К 0058
МП-0059-К 0059
МП-0060-К 0060
МП-0061-К 0061
МП-0062-К 0062
МП-0063-К 0063
МП-0064-К 0064

Зелёная цветовая область:

МП-0193-З 0001
МП-0194-З 0002
МП-0195-З 0003
МП-0196-З 0004
МП-0197-З 0005
МП-0198-З 0006
МП-0199-З 0007
МП-0201-З 0009
МП-0202-З 0010
МП-0203-З 0011
МП-0204-З 0012
МП-0205-З 0013
МП-0206-З 0014
МП-0207-З 0015
МП-0209-З 0017
МП-0210-З 0018
МП-0211-З 0019
МП-0212-З 0020
МП-0213-З 0021
МП-0214-З 0022
МП-0215-З 0023
МП-0216-З 0024
МП-0217-З 0025
МП-0218-З 0026
МП-0219-З 0027
МП-0220-З 0028
МП-0221-З 0029
МП-0222-З 0030
МП-0223-З 0031
МП-0224-З 0032
МП-0225-З 0033
МП-0226-З 0034
МП-0227-З 0035
МП-0228-З 0036
МП-0229-З 0037
МП-0230-З 0038
МП-0231-З 0039
МП-0232-З 0040
МП-0233-З 0041
МП-0234-З 0042
МП-0235-З 0043
МП-0236-З 0044
МП-0237-З 0045
МП-0238-З 0046
МП-0239-З 0047
МП-0240-З 0048
МП-0241-З 0049
МП-0242-З 0050
МП-0243-З 0051
МП-0244-З 0052
МП-0245-З 0053
МП-0246-З 0054
МП-0247-З 0055
МП-0248-З 0056
МП-0249-З 0057
МП-0250-З 0058
МП-0251-З 0059
МП-0252-З 0060
МП-0253-З 0061
МП-0254-З 0062
МП-0255-З 0063
МП-0256-З 0064
МП-0449-З 0065
МП-0450-З 0066
МП-0451-З 0067
МП-0452-З 0068
МП-0453-З 0069
МП-0454-З 0070
МП-0457-З 0073
МП-0458-З 0074
МП-0459-З 0075
МП-0460-З 0076
МП-0461-З 0077
МП-0462-З 0078
МП-0465-З 0081
МП-0466-З 0082
МП-0467-З 0083
МП-0468-З 0084
МП-0469-З 0085
МП-0470-З 0086
МП-0471-З 0087
МП-0473-З 0089
МП-0474-З 0090
МП-0475-З 0091
МП-0476-З 0092
МП-0477-З 0093
МП-0478-З 0094
МП-0479-З 0095
МП-0483-З 0099

Синяя цветовая область:

МП-0129-Си 0001
МП-0130-Си 0002
МП-0131-Си 0003
МП-0132-Си 0004
МП-0133-Си 0005
МП-0134-Си 0006
МП-0135-Си 0007
МП-0136-Си 0008
МП-0137-Си 0009
МП-0138-Си 0010
МП-0139-Си 0011
МП-0140-Си 0012
МП-0141-Си 0013
МП-0142-Си 0014
МП-0143-Си 0015
МП-0144-Си 0016
МП-0145-Си 0017
МП-0146-Си 0018
МП-0147-Си 0019
МП-0148-Си 0020
МП-0149-Си 0021
МП-0150-Си 0022
МП-0151-Си 0023
МП-0152-Си 0024
МП-0153-Си 0025
МП-0154-Си 0026
МП-0155-Си 0027
МП-0156-Си 0028
МП-0157-Си 0029
МП-0158-Си 0030
МП-0159-Си 0031
МП-0160-Си 0032
МП-0162-Си 0034
МП-0163-Си 0035
МП-0164-Си 0036
МП-0165-Си 0037
МП-0166-Си 0038
МП-0167-Си 0039
МП-0168-Си 0040
МП-0169-Си 0041
МП-0170-Си 0042
МП-0171-Си 0043
МП-0172-Си 0044
МП-0173-Си 0045
МП-0174-Си 0046
МП-0175-Си 0047
МП-0176-Си 0048
МП-0177-Си 0049
МП-0178-Си 0050
МП-0179-Си 0051
МП-0180-Си 0052
МП-0181-Си 0053
МП-0182-Си 0054
МП-0183-Си 0055
МП-0184-Си 0056
МП-0185-Си 0057
МП-0186-Си 0058
МП-0187-Си 0059
МП-0188-Си 0060
МП-0189-Си 0061
МП-0190-Си 0062
МП-0191-Си 0063
МП-0192-Си 0064
МП-0457-Си 0073
МП-0458-Си 0074
МП-0459-Си 0075
МП-0460-Си 0076
МП-0461-Си 0077
МП-0462-Си 0078
МП-0463-Си 0079
МП-0465-Си 0081
МП-0466-Си 0082
МП-0468-Си 0084
МП-0469-Си 0085
МП-0470-Си 0086
МП-0475-Си 0091
МП-0476-Си 0092
МП-0477-Си 0093
МП-0478-Си 0094
МП-0481-Си 0097
МП-0482-Си 0098
МП-0483-Си 0099
МП-0484-Си 0100
МП-0485-Си 0101
МП-0489-Си 0105
МП-0491-Си 0107
МП-0492-Си 0108
МП-0493-Си 0109

Жёлтая цветовая область:

МП-0065-Ж 0001
МП-0066-Ж 0002
МП-0067-Ж 0003
МП-0068-Ж 0004
МП-0069-Ж 0005
МП-0070-Ж 0006
МП-0071-Ж 0007
МП-0072-Ж 0008
МП-0073-Ж 0009
МП-0074-Ж 0010
МП-0075-Ж 0011
МП-0076-Ж 0012
МП-0077-Ж 0013
МП-0078-Ж 0014
МП-0079-Ж 0015
МП-0080-Ж 0016
МП-0081-Ж 0017
МП-0082-Ж 0018
МП-0083-Ж 0019
МП-0084-Ж 0020
МП-0085-Ж 0021
МП-0086-Ж 0022
МП-0087-Ж 0023
МП-0088-Ж 0024
МП-0089-Ж 0025
МП-0096-Ж 0032
МП-0097-Ж 0033
МП-0098-Ж 0034
МП-0099-Ж 0035
МП-0100-Ж 0036
МП-0101-Ж 0037
МП-0102-Ж 0038
МП-0103-Ж 0039
МП-0104-Ж 0040
МП-0105-Ж 0041
МП-0106-Ж 0042
МП-0107-Ж 0043
МП-0108-Ж 0044
МП-0109-Ж 0045
МП-0110-Ж 0046
МП-0111-Ж 0047
МП-0112-Ж 0048
МП-0113-Ж 0049
МП-0114-Ж 0050
МП-0115-Ж 0051
МП-0116-Ж 0052
МП-0117-Ж 0053
МП-0118-Ж 0054
МП-0119-Ж 0055
МП-0120-Ж 0056
МП-0121-Ж 0057
МП-0122-Ж 0058
МП-0123-Ж 0059
МП-0124-Ж 0060
МП-0125-Ж 0061
МП-0126-Ж 0062
МП-0127-Ж 0063
МП-0128-Ж 0064
МП-0385-Ж 0065
МП-0386-Ж 0066
МП-0388-Ж 0068
МП-0391-Ж 0071
МП-0393-Ж 0073
МП-0394-Ж 0074
МП-0395-Ж 0075
МП-0396-Ж 0076
МП-0398-Ж 0078
МП-0399-Ж 0079
МП-0400-Ж 0080
МП-0401-Ж 0081
МП-0402-Ж 0082
МП-0403-Ж 0083
МП-0404-Ж 0084
МП-0405-Ж 0085
МП-0406-Ж 0086
МП-0407-Ж 0087
МП-0408-Ж 0088
МП-0409-Ж 0089
МП-0410-Ж 0090
МП-0411-Ж 0091
МП-0412-Ж 0092
МП-0415-Ж 0095
МП-0416-Ж 0096

Серая цветовая область:

МП-0193-С 0001
МП-0194-С 0002
МП-0195-С 0003
МП-0196-С 0004
МП-0197-С 0005
МП-0198-С 0006
МП-0199-С 0007
МП-0200-С 0008
МП-0201-С 0009
МП-0202-С 0010
МП-0203-С 0011
МП-0204-С 0012
МП-0205-С 0013
МП-0206-С 0014
МП-0207-С 0015
МП-0208-С 0016
МП-0209-С 0017
МП-0210-С 0018
МП-0211-С 0019
МП-0212-С 0020
МП-0213-С 0021
МП-0214-С 0022
МП-0217-С 0025
МП-0218-С 0026
МП-0219-С 0027
МП-0220-С 0028
МП-0221-С 0029
МП-0225-С 0033
МП-0226-С 0034
МП-0227-С 0035
МП-0228-С 0036
МП-0229-С 0037
МП-0230-С 0038
МП-0231-С 0039
МП-0232-С 0040
МП-0238-С 0046
МП-0239-С 0047
МП-0240-С 0048
МП-0257-С 0001
МП-0258-С 0002
МП-0259-С 0003
МП-0260-С 0004
МП-0261-С 0005
МП-0262-С 0006
МП-0263-С 0007
МП-0264-С 0008
МП-0265-С 0009
МП-0266-С 0010
МП-0267-С 0011
МП-0268-С 0012
МП-0269-С 0013
МП-0270-С 0014
МП-0271-С 0015
МП-0272-С 0016
МП-0273-С 0017
МП-0274-С 0018
МП-0275-С 0019
МП-0276-С 0020
МП-0277-С 0021
МП-0278-С 0022
МП-0281-С 0025
МП-0282-С 0026
МП-0283-С 0027
МП-0284-С 0028
МП-0285-С 0029
МП-0287-С 0031
МП-0289-С 0033
МП-0290-С 0034
МП-0291-С 0035
МП-0292-С 0036
МП-0293-С 0037
МП-0294-С 0038
МП-0295-С 0039
МП-0296-С 0040
МП-0297-С 0041
МП-0298-С 0042
МП-0299-С 0043
МП-0300-С 0044
МП-0301-С 0045
МП-0302-С 0046
МП-0303-С 0047
МП-0304-С 0048

Цветовые решения для веб-сайтов в 2019 году

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

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

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

Яркие тона: баланс, сочетаемость и ретро-стиль

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

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

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

Простота и мягкость: серые и зеленые оттенки, простой красный и мягкий желтый

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

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

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

Природные оттенки: прикасаясь к земле и сочетая синий с зеленым

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

Минимум и максимум: очень черное и цвета будущего

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

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

Каков бы ни был ваш выбор, изменив свой старый дизайн, вы поддержите главный тренд 2019 года — поворот к чему-то новому и ранее не использованному. Поэтому дерзайте и пробуйте!

Или

закажите редизайн у нас

Получить предложение!

Подпишись и следи за выходом новых статей в нашем монстрограмме

Остались вопросы?

Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью? Задавайте вопросы и темы статей которые Вас интересуют в комментариях.

Получайте бесплатные уроки и фишки по интернет-маркетингу

Цвета для дизайна сайта — принципы подбора и эффективного применения

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

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

Цветовое кольцо

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

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

Затем, если мы смешаем эти цвета, то получим три второстепенных цвета:

На следующем этапе смешивания основных цветов с вторичными мы можем получить третичные цвета:

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

Температурные группы цветов

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

Теплые цвета

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

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

Холодный цвет

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

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

Основные три значения

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

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

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

Тон

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

Насыщенность

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

Светосила

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

Как создать эффективную цветовую палитру

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

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

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

Основной цвет

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

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

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

Вторичный цвет

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

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

Акцентирующий цвет

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

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

Цвет заднего фона

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

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

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

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

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

Примеры удачных цветовых схем

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

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

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

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

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

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

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

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

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

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

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

Рассуждаем о цвете

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

Colourlovers.com

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

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

Nature

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

Color.adobe.com

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

Google Images

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

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

👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

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

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

Почему цветовые схемы для веб-сайтов так важны?

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

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

Цвета и оттенки, в гармоничном их сочетании друг с другом, улучшают опыт использования сайта.
Различные цвета имеют свои психологические эффекты. Это означает, что вы можете “заставить” своих посетителей чувствовать или думать в нужном направлении.
Использование определенных цветов для кнопок и окон призыва к действию (CTA) может помочь увеличить конверсию. Некоторые исследования доказали, что определенные цветовые контрасты играют важную роль в увеличении конверсии на 10-50%.

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

Как выбрать цветовые схемы для WordPress-сайта?

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

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

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

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

Шаг 1: Выберите основной цвет для вашего сайта

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

Рассмотрим несколько наиболее распространенных цветов и их эмоциональных ощущений.

Белый: изысканность, эффективность, чистота.
Черный: гламур, безопасность, власть.
Синий: доверие, открытость, спокойствие.
Зеленый: баланс, рост, финансы.
Красный: тепло, волнение, молодость.
Фиолетовый: романтика, тайна, качество.

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

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

Шаг 2: Выберите цветовую схему

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

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

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

Шаг 3: Примените выбранные цвета на своем сайте

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

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

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

Наконец, не забывайте о контрастных цветах. Они должны использоваться экономно и с определенной целью – как правило, для выделения важных CTA.

Выводы

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

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

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

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

Мне нравитсяНе нравится

Если Вам понравилась статья — поделитесь с друзьями

Цветовая схема сайта | Разработка сайтов

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

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

Темный Дизайн

Нужно что-то со стилем? Dark web design — это выбор игровых и технологических компаний. В то время как темный интерфейс гораздо труднее реализовать, результаты стоят того, когда используется правильно. Эти тона подходят для рекреационных сайтов, используемых в ночное время, и те, которые направлены, чтобы подчеркнуть визуальный или видео — контент. Кроме того, темный интерфейс гораздо приятнее воспринимается глазами при долгосрочном просмотре контента. В то время как не подходит для чтения коротких статей, так как черный на белом является более разборчивым, он идеально подходит, когда вы работаете с большим количеством текста или изображений в течение нескольких часов.

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

Плюсы:

Удобно при использовании сайта в течение нескольких часов
Стильный и модный
Создает драматическую или таинственную атмосферу
Может быть использован, чтобы подчеркнуть содержимое

Минусы:

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

Светлый Дизайн:

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

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

Плюсы:

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

Минусы:

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

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

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

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

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

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

Теперь, когда вы знаете, чем руководствоваться, чтобы использовать dark или light Web design, самое время обратиться в компанию profi-web.ru за более подробной консультацией у наших специалистов.

Как правильно использовать цвета в UI-дизайне

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

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

Базово о цветах

Сначала разберемся с терминами, которые относятся к теории цвета.

Вот основные:

Тон (hue): какого цвета объект (например, красный или синий).

Хроматичность (chroma): есть ли примеси белого или черного.

Насыщенность (saturation): как сильно цвет выражен.

Яркость (value): насколько цвет темный или светлый.

Тональность (tone): сколько серого добавили к чистому цвету.

Тень (shade): сколько черного добавили к чистому цвету.

Оттенок (tint): сколько белого добавили к чистому цвету.

Теперь к истории.

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

Цветовой круг Ньютона из книги «Оптика» 1704 года. Источник: wikipedia.org

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

Цветовой круг Иттена. Источник: doodleandsketch.com

Как работает цветовой круг

В базовый цветовой круг входит 12 цветов:

основные (первичные) — красный, желтый и синий

дополнительные (вторичные) — фиолетовый, оранжевый и зеленый

комбинированные (третичные) — смешение соседних цветов (например, оранжевый из красного и желтого)

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

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

Комплементарные цвета

В цветовом круге комплементарные цвета лежат друг напротив друга: синий–оранжевый, красный–зеленый, фиолетовый–желтый.

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

В дизайне сайта WeWork использованы комплементарные синий и оранжевый.
Источник: wework.com

Аналоговые цвета

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

В недавнем редизайне Dropbox показал, как сочетать близкие оттенки — на новом сайте вместе стоят фиолетовый, синий и розовый.

На сайте Dropbox использовали цвета, которые сочетают не часто, и это сработало.
Источник: dropbox.com

Триадные цвета

На цветовом круге триадные цвета лежат на равном расстоянии друг от друга — на вершинах равнобедренного треугольника. Такая цветовая схема выглядит сбалансировано и гармонично.

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

Триадная желто-красно-голубая цветовая схема сайта Петера Оравица — зеленый тут тоже подключился.
Источник: peteroravec.com

Психология цвета

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

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

КРАСНЫЙ

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

Лендинг iPhone X (RED) — красный на красном. Источник: apple.com

ЖЕЛТЫЙ

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

Онлайн-магазин продуктов Headery на основе конопляного масла — все в желтых тонах.
Источник: headery.com

ОРАНЖЕВЫЙ

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

Оранжевый онлайн-магазин бренда Aloha — продуктов на основе растительного белка.
Источник: aloha.com

СИНИЙ

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

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

Сине-белый сайт книги When the World Went Digital о главных событиях в веб-дизайне.
Источник: thehistoryofweb.design

ЗЕЛЕНЫЙ

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

Сайт американской студии дизайна Unboundary — в оттенках зеленого.
Источник: unboundary.com

РОЗОВЫЙ

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

Онлайн-магазин женской одежды Femme and Fierce в основных оттенках розового.
Источник: femmeandfierce.nl

ФИОЛЕТОВЫЙ

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

Лавандово-фиолетовый сайт креативного агентства Omelet. Источник: omelet.com

Как составить цветовую палитру

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

Цветовую палитру составляют из первичных, вторичных и акцентных цветов.

Вот как это происходит:

Источник: gfycat.com

ДОМИНИРУЮЩИЕ ЦВЕТА

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

ВТОРИЧНЫЕ ЦВЕТА

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

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

АКЦЕНТНЫЕ ЦВЕТА

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

Чтобы подбирать цвета было проще, вот бесплатные инструменты:

Colors Muzli — чтобы проверить цвета на сочетаемость, создать и отредактировать цветовую палитру. Загружай UI-наборы с кастомными цветовыми мэтчами, чтобы посмотреть, как они будут выглядеть в интерфейсе.
Coolors.co — чтобы создавать цветовые схемы по клику и смотреть тысячи палитр, созданных другими пользователями.
Canva — чтобы подбирать цветовую палитру на основе фотографий. Пригодится, если уже есть изображение, от которого нужно отталкиваться.
Colormind.io — чтобы подобрать цветовую схему и в режиме реального времени наложить ее на мокап лендинга.

Основные цветовые сочетания в веб-дизайне

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

АНАЛОГОВАЯ

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

Сайт Useless London, посвященный теме борьбы с отходами. Источник: useless.london

КОМПЛЕМЕНТАРНАЯ

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

Онлайн-магазин Kin Europhorics — бренда антистрессовых напитков.
Источник: kineuphorics.com

ГРАДИЕНТ

Градиент — плавный переход одного цвета в другой. С помощью градиента объединяют аналоговые цвета, например, синий и зеленый. Еще его используют, когда хотят остаться в рамках одного базового цвета — и «раскатывают» оттенки от более интенсивного к менее насыщенному. Сайт музыкального стриминга Spotify — идеальный пример того, как использовать градиент.

На сайте стриминга Spotify показали, как «перевести» желтый в персиковый.
Источник: spotify.com

АКЦЕНТ НА ФИРМЕННОМ ЦВЕТЕ

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

Онлайн-магазин постельного белья Casper с акцентом на синий. Источник: casper.com

МОНОХРОМНАЯ

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

Онлайн-магазин косметики для губ Axiology Beauty. Источник: axiologybeauty.com

ПАЛИТРА ПРИГЛУШЕННЫХ ЦВЕТОВ

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

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

Кофейные оттенки на сайте магазина кофе StumpTown Coffee. Источник: stumtowncoffee.com

СХЕМА ИЗ ОСНОВНЫХ ЦВЕТОВ

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

Красный, синий и желтый в дизайне сервиса знакомств Bumble. Источник: bumble.com

ВИНТАЖНАЯ ЦВЕТОВАЯ СХЕМА

Взять винтажные сочетания оттенков — хорошее решение, если хочется ретро-эстетики. Например, в схеме сайта для креативного агентства Five/Four дизайнеры использовали «старые» красный и желтовато-коричневый цвета, плюс усилили эффект зернистыми фото с сепией.

Винтажные акценты на сайте Five/Four — в фильтрах и основных цветах.
Источник: five-four.co

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

11 цветовых схем веб-сайта, которые помогут вам найти идеальную палитру

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

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

Содержание статьи

Учет психологии цвета для цветовых схем веб-сайтов

—

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

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

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

Красный : скорость, энергия и страсть. Красный — отличный цвет, когда вы хотите, чтобы ваша аудитория начала действовать. Красный часто используется для цветовых схем веб-сайтов электронной коммерции, а также для ресторанов и приложений для еды на вынос — когда вы голодны и заказываете еду на вынос, вам страстно хочется, чтобы еда была быстрой!
Оранжевый : оптимизм и счастье. Оранжевый цвет повсеместно считается «забавным» цветом, и его использование в веб-дизайне — отличный способ показать, что вы не относитесь к себе слишком серьезно.
Желтый : тепло, манящее чувство, позитив. Цвет солнечного света, желтый ассоциируется со счастьем и радостью. Супер весело и доступно. Это отличный цвет для веб-сайтов в сфере услуг — вы будете рады помочь!
Зеленый : природа и здоровье. Успокаивающий и естественный зеленый цвет — идеальный выбор для цветовой схемы при создании здорового бренда. Зеленый также является отличным выбором для обозначения экологичности и устойчивости.
Синий : самый универсальный и универсальный. Было показано, что синий вызывает чувство доверия, что делает его одним из самых популярных в цветовых схемах веб-сайтов.
Фиолетовый : творчество, мудрость и уверенность. Пурпурный — это уникальный яркий цвет для использования в цветовой схеме веб-сайта, поскольку он требует внимания и выделяется.
Розовый : творчество и энтузиазм. Пинк в данный момент переживает изрядное время, больше, чем когда-либо, его принимают люди всех полов и идентичностей, а это означает, что бренды следуют его примеру и включают его в ряд отраслей

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

Мы только что отправили вам ваш первый урок.

11 красивых цветовых схем веб-сайта, которые вдохновят вас
—

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

1. Цвета для умных экологически чистых продуктов

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

Зеленая конопля, бледно-лимонная, овсяная и темно-синяя:

2. Яркие и здоровые цвета

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

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

Бледно-персиковый, оранжевый, мятный и темно-зеленый:

3. Стильные, тщательно подобранные цветовые схемы

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

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

Сирень, ржавчина, крем и уголь:

4. Веселые, юношеские цветовые палитры

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

Розовый, зеленый, оранжевый и фиолетовый:

5. Яркие цвета для творческих людей

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

Желтый, неоновый синий и черный:

6. Успокаивающие и оптимистичные нейтральные палитры

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

Персик, сливки и уголь:

7. Надежные звуки

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

Бирюзовый, серый, синий, ярко-белый, темно-серый и морской волны:

8. Успокаивающие, но уверенные цветовые схемы

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

Бледно-розовый, коралловый, серый, сиреневый и темно-синий:

9. Современные модные цветовые решения

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

Фиолетовый, лиловый, мятный и оранжевый:

10. Веселые и благотворительные цветовые палитры

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

Синий, желтый, шалфейно-зеленый и белый:

11. Сильные и женственные цветовые решения

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

Пудрово-розовый, фуксия и нефрит:

Сейчас начинается поиск цветовых схем веб-сайта
—

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

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

Ищете единственную в цветовой гамме?

Позвольте нашим дизайнерам подобрать ваши оттенки.

Эта статья была первоначально опубликована в 2017 году и написана Диной ДеБара. Он был дополнен новой информацией и примерами.

Hook Agency | Строительный маркетинг

Как рассказал основатель Hook Agency — точка зрения Тима Брауна:

Я был директором по маркетингу в другом агентстве и работал на полную ставку. Пройдя школу веб-дизайна и изучив SEO у одних из лучших в городе.

Я нанял жену, и у нас был потрясающий первый год. Мы начали стандартизировать процессы, наняли первых пару сотрудников и изменили название на Hook Agency (раньше называлось Tim B Design), но у нас были проблемы с ростом.Ушел наш первый сотрудник, и мы не отфильтровывали клиентов должным образом, поэтому несколько клиентов отнимали слишком много времени, и нам приходилось обеспечивать согласованность.

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

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

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

Сейчас у нас 15 штатных сотрудников через 3 года после того, как мы с женой отлично провели первый год. Наша система примерно в 5 раз эффективнее, чем в первый год, и мы работаем над ней надолго.

У нас 30 счастливых постоянных клиентов (около 2 на каждого сотрудника — 100 запущенных веб-сайтов и 50+ 5-звездочных отзывов в Google.Мы очень заботимся о своей репутации и стремимся к тому, чтобы люди любили свой сайт и потенциальных клиентов.

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

Почему эти 21+ цветовые схемы веб-сайтов так хорошо работают

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

Ключевой элемент хорошей цветовой схемы

3 типа цветов, которые имеют значение для веб-сайта

Компоненты цвета

3 способа сочетания цветов

Модели, в соответствии с которыми сочетаются цвета

Эмоции, которые должны вызывать хорошую цветовую схему

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

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

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

Цветовые схемы определяют четыре аспекта индивидуальности веб-сайта:

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

Несколько примеров того, как цвета помогают веб-сайтам

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

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

Ключевой элемент хорошей цветовой схемы веб-сайта

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

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

Понимание взаимодействия между основными, акцентными и текстовыми цветами

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

Имея это в виду, рассмотрите различие между 3 ключевыми цветами, которые вы должны выбрать:

Базовый цвет — это основной цвет, на котором вы будете строить. Сверху вы добавите другие цвета и комбинируете оттенки и оттенки
Акцентный цвет — используется для выделения и контрастных эффектов.
Цвет текста черный, белый или серый — в зависимости от цвета фона, цвет текста следует отрегулировать для обеспечения хорошей контрастности и удобочитаемости.Что касается удобочитаемости, удобно иметь отношение черного к белому примерно от 60 до 80%.

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

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

Компоненты цвета

Все цвета состоят из следующих элементов:

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

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

Оттенок — это свойство цвета, которое описывает отличие одного цвета от другого.

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

3 способа сочетания цветов

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

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

Итак, каковы правила, лежащие в основе основных цветовых комбинаций?

Правило дополнения

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

Пример:

Правило контраста

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

Правило вибрации

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

См., Например:

против

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

Модели, в соответствии с которыми сочетаются цвета

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

Во-первых, вы должны знать, что эти модели делятся на 2 категории:

Аддитивные цветные модели

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

Субтрактивные цветовые модели

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

Давайте сосредоточимся на цифровой системе цветного телевидения, так как это именно то, что нас беспокоит.

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

Монохромный Модель

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

Аналог модели

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

Изображение взято с Coschedule.com

Дополнительная модель

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

Цветовая модель

Triadic

В моделях

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

Комплиментарно-раздельно Модель

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

Изображение взято с Blog.kissmetrics.com

Тетрадик / двойной комплементарный Модель

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

Квадратная модель

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

Изображение взято с Blog.kissmetrics.com

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

Правило 60-30-10 (60% — доминирующий цвет, 30% — вторичный цвет, 10% — акцентный цвет). Если мы возьмем пример темы «Гипноз», настройщик включает в себя специальный раздел, в котором вы определяете цвета. У вас есть возможность выбрать основной цвет, вторичный цвет, третий (акцентный) цвет, а также настроить и улучшить с помощью дополнительных оттенков.
Дизайн сначала в оттенках серого . Это лучший способ проверить возможные проблемы и быстро обнаружить любые нарушения в макете веб-сайта.Следовательно, вы можете проверить дизайн на соответствие правилу непрерывности и внести изменения, чтобы обеспечить единообразие работы на веб-сайте.

Тема, разработанная Startbootstrap

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

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

Эмоции, которые должны вызывать хорошие цветовые схемы веб-сайта

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

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

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

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

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

Палитра синего цвета

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

Синие цветовые палитры на сайтах:

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

Палитра зеленого цвета

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

Зеленых палитр на сайтах:

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

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

Оранжевые цветовые палитры

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

Палитра фиолетовых цветов

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

Палитра розовых цветов

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

Палитра красного цвета

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

Коричневые цветовые палитры

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

Палитра черного цвета

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

Палитры белого цвета

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

Применяйте полученные знания на практике: создавайте собственные цветовые схемы для веб-сайта

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

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

Существуют инструменты, которые помогут вам красиво комбинировать цвета, раскрывая ваши творческие способности:

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

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

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

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

Вот генератор цвета в действии:

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

Вот инструмент в игре:

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

Вот пример:

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

Ниже приведен снимок экрана Color.Method in action:

Заключение

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

Лучшие цветовые схемы веб-дизайна, которые мы увидим в 2021 году

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

В мире ежедневно генерируется огромное количество данных. Ежедневно в Instagram загружается около 33,9 миллиона фотографий, отправляется 100 миллиардов писем и 2,7 миллиона сообщений в блогах. Сегодняшний потребитель завален контентом, рекламой и шумом.

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

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

1. Успокаивающий бирюзовый

Бенджамин Мур назвал Aegean Teal цветом 2021 года. Зеленовато-синий цвет со слегка блеклым оттенком станет идеальным акцентом для любого типа веб-сайта.Бирюзовый обладает чувством современного веселья. Он хорошо работает во многих отраслях промышленности.

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

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

2. Дополнительный синий и оранжевый

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

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

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

3. Оранжево-желтый ретро

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

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

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

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

4. Темный режим

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

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

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

5. Deep Purple

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

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

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

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

6.Темно-розовый

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

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

Лучший цвет для вашего сайта

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

Лекси — цифровой кочевник и графический дизайнер. Если она не путешествует по разным частям страны, вы можете найти ее на местных блошиных рынках или в походе с ее золотым дудлом. Загляните в ее дизайнерский блог Design Roast и свяжитесь с ней в Twitter @lexieludesigner.

20 популярных цветовых схем веб-сайта на 2021 год

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

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

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

Что такое цветовая схема веб-сайта?

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

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

Значение цветовых схем веб-сайта

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

Настройка настроения

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

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

Акцент на правильных элементах

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

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

Повышение узнаваемости бренда

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

Исследования показывают, что фирменный цвет увеличивает узнаваемость бренда на 80% . Это впечатляющая цифра, давайте посмотрим, как ее можно объяснить. Благодаря нашей сильной цветовой памяти мы в основном запоминаем бренды по их доминирующему цвету. Подумайте, например, о Coca-Cola — ярко-красный цвет сразу всплывает в нашей голове.

Источник: Coca-Cola

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

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

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

Темная элегантность

Источник: Apple

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

Вот пример шаблона веб-сайта в похожем стиле. Минималистичный дизайн поддерживает и усиливает все нужные элементы.

Использовать шаблон

Оттенки фиолетового

Источник: Mozilla

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

Небесно-голубой и желтый

Источник: МОЗ

На веб-сайте Moz сочетаются несколько оттенков синего и слегка ненасыщенный желтый. В результате получилась спокойная, невзрачная палитра, в которой нет ничего кричащего или чрезмерного. Желтые кнопки CTA привлекают внимание за счет контраста, а небесно-голубой цвет логотипа Moz украшает заголовки и важные числа.

Дополнительные детали на белом

Источник: Cloudflare

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

Теплые пастели и нильский синий

Источник: Zendesk

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

Красный Энергетик

Источник: PC Gamer

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

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

Использовать шаблон

Эйри Смелость

Источник: Clarins

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

Минимальный зеленый

Источник: Evernote

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

игривый розовый

Источник: Benefit Cosmetics

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

Неоновое безумие

Источник: Urban Decay

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

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

Использовать шаблон

Черно-белая мечта

Источник: Анна Висинцин

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

Позолоченная роскошь

Источник: Guerlain

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

Зарезервированный и профессиональный

Источник: Lucas Group

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

Фиолетовая яркость

Источник: Moorhouse

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

Пышно-розовые акценты

Источник: Just Creative

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

землистые оттенки

Источник: ThoughtCo

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

Использовать шаблон

Серебряный лунный свет

Источник: Noctu

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

Выцветший бежевый

Источник: Project Pico

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

щепотка цвета

Источник: Sweet Punk

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

Розовый Ретро

Источник: Великолепие в траве

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

Заключение

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

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

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

Создать сейчас

Использование цвета | Система веб-дизайна США (USWDS)

Жетоны дизайна

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

Введение

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

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

Цвет, семейство цветов и сорт

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

Цвет — это любой конкретный образец в наших палитрах токенов, например red-50 , primary-base или indigo-warm-60v .

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

Оценка — это способ выразить, насколько светлый или темный цвет.USWDS использует 100-балльную шкалу для обозначения оценки, где 0 — чистый белый цвет, а 100 — чистый черный цвет. Мы упорядочили эти оценки по цветовым семействам: цвет класса 50 в одном цветовом семействе должен иметь тот же уровень яркости, что и цвет класса 50 в другом цветовом семействе. Это имеет важные последствия для цветового контраста и доступности, которые мы обсудим позже.

Цвет и доступность

Color — мощное средство, но ненадежное — его эффекты непостоянны и непредсказуемы для популяции.Примерно 0,5% взрослых женщин и 8% взрослых мужчин (4,5% от общей численности населения) имеют некоторую нечувствительность к цвету. Нечувствительность к цвету может затруднить различение оттенков (наиболее распространенной формой является дальтонизм на красный / зеленый), а некоторые редкие условия вообще препятствуют восприятию оттенка. Обычные проблемы со зрением, такие как близорукость и близорукость и астигматизм (среди прочего), также влияют на то, насколько хорошо люди воспринимают цвет и контраст.

Доступность — не особый случай.Во втором квартале 2018 года сайты, использующие USWDS, превысили 1,4 миллиарда просмотров страниц. 4,5% из 1,4 миллиарда — это около 60 миллионов просмотров страниц. Когда дело доходит до доступности, широкое и всеобъемлющее мышление — это не просто хорошая идея, это наша миссия и ответственность.

Раздел 508, который соответствует уровню AA WCAG 2.0, устанавливает юридический стандарт необходимого уровня контрастности между текстом и его фоном. Базовый стандарт контрастности AA составляет 4,5: 1 для большей части текста и 3: 1 для крупного текста (19 пикселей + полужирный или 24 пикселей + обычный текст).

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

USWDS помогает командам выбирать доступные цвета с помощью системы цветовой классификации. Давайте посмотрим на семейство цветов серый в классах 5–90 (оценка 0 — белый ):

Сверху: Каждая цветовая семья имеет десять градаций от 5 до 90. Чистый белый эквивалентен сорту 0, а чистый черный эквивалентен сорту 100.

Магическое число

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

Магическое число 40+ приводит к контрасту большого текста WCAG 2.0 AA (пример: серый-90 и индиго-теплый-50v ).
Магическое число 50+ дает контрастность WCAG 2.0 AA или контрастность большого текста AAA (пример: серый-90 и красный-40 ).
Магическое число 70+ приводит к контрасту WCAG 2.0 AAA (пример: серый-10 и красный-80 ).
Цвета класса 50 , указанные в разделе 508 AA, контрастируют как с чистым белым (сорт 0 ), так и с чисто черным (сорт 100 ).

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

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

класс	минимальная яркость	максимальная яркость
`0`	`1.000`	`1.000`
`5`	`0,850`	`0,930`
`10`	`0,750`	`0.820`
`20`	`0,500`	`0,650`
`30`	`0,350`	`0,450`
`40`	`0,250`	`0,300`
`50`	`0,175`	`0.183`
`60`	`0,100`	`0,125`
`70`	`0,050`	`0,070`
`80`	`0,020`	`0,040`
`90`	`0,005`	`0.015`
`100`	`0,000`	`0,000`

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

Сверху: Так как 90-50 = 40 , на фоне серый-90 используйте классы 40 и ниже, чтобы обеспечить контраст раздела 508 AA. Для крупного текста приемлемы оценки 50 и ниже.

Выше: Система цветовой оценки работает для всех цветовых семейств.

Цвет, контраст и читаемость

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

Но когда дело доходит до цвета, обратите внимание на следующие общие рекомендации:

Раздел 508 AA + цветовой контраст помогает при дальтонизме и цветовосприятии.
Избегание чисто черного текста на белом помогает при дислексии, синдроме Ирлена, светочувствительности и аутизме.
Лучшая комбинация — это максимальный цветовой контраст белого / светлого текста на черном / темном фоне, который, кажется, визуально подходит для всех.
Наилучший вариант, когда это возможно, — предоставить пользователям возможность выбирать собственный цвет текста и фона.

Цветные диски USWDS

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

Вверху: Колесо цветных жетонов стандартной системы USWDS

Вверху: Колесо жетонов системы ярких цветов USWDS

Общее руководство по цвету

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

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

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

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

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

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

Список литературы

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

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

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

Именно поэтому сегодня мы в агентстве WishDesk предоставим вам самую необходимую информацию о выборе цветов для вашего сайта электронной коммерции.

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

Согласно «Влияние цвета на маркетинг» Сатиендры Сингха

85% людей подтвердили, что цвет влияет на их выбор
66% людей будут покупать товары только в том случае, если в дизайне товара есть их любимый цвет
26% людей больше реагируют на цветную, чем на черно-белую рекламу
80% людей узнают свои любимые бренды по цвету

Имеют ли значение цветовые схемы?

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

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

Красный

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

Он ассоциируется с опасностью, крайностями, максимальной концентрацией эмоций, страстью и силой.

Красный цвет вызывает такие эмоции, как:

беспокоиться
энергия
пыл
смелость
внимание
агрессия

фиолетовый

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

Фиолетовый вызывает такие эмоции, как:

духовность
глобальность
глубина
тайна
изобретательность

Синий

Синий — это цвет моря, неба и умиротворения.

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

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

уверенность
ответственность
баланс
серьезность

Зеленый

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

гармония
восстановление
надежность
интермеццо
устойчивость
безопасность

Желтый

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

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

счастье
разработка
энергия
удовольствие
свобода

Оранжевый

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

Чаще всего передает такие эмоции, как:

оптимизм
изобретательность
Изобретательность
авантюризм

розовый

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

Эмоции, вызывающие розовый цвет:

легкость
небрежность
нежность
мечтать

Черный

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

орган власти
тайна
ограничение
управление
ответственность

Белый

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

обновление
ограничение
справка
чистота

Серый

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

Серый стимулирует появление таких эмоций как:

благоразумие
равновесие
серьезность
консервативный
меланхолия

Коричневый

Коричневый цвет олицетворяет стабильность, преданность и естественность.Обычно это связано с почвой / землей.

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

стабильность
натуральность
серьезность
тепло

Как сочетать цвета, чтобы ваш сайт оставался идеальным

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

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

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

Это схема, в которой цвета расположены бок о бок. Например, фиолетовый и красный.

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

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

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

Эта модель состоит из цветов в кресте. Например, красный и зеленый, оранжевый и фиолетовый.

Цветовые схемы для сайтов электронной коммерции. Как выбрать подходящий?

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

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

Прежде чем выбирать цветовую схему своего сайта электронной коммерции, рассмотрите 3 основных момента:

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

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

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

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

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

Что, если бы я сказал вам, что вы можете развивать свой бизнес и иметь красивый веб-сайт, выбирая правильные цвета?

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

Что это значит для вашего бизнеса в сфере электронной коммерции?

Что с лучшей цветовой схемой сайта вы можете:

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

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

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

Визуальный контент имеет значение в мире электронной коммерции, как и цвет.

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

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

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

I. Цвет 101: начало работы с цветовыми схемами веб-сайта

1. Проверка конкурса

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

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

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

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

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

Другой пример использования темного цвета в веб-дизайне — Nescafe.

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

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

Давайте перейдем к сайту электронной торговли, который творчески играет с приглушенными тонами. Это Лейф.

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

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

Люди покупают не то, что вы делаете, они покупают то, что вы делаете. — Simon Sinek

2. Цвета в зависимости от отрасли

Каждый цвет передает различное сообщение в зависимости от рынка, на котором вы работаете.

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

Логотип HomeDepot, например, оранжевый. Их цель — заставить клиентов ассоциировать их с хорошей ценой.В их случае это качественный товар по невысокой цене.

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

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

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

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

3. Инструменты цвета

Вот 5 лучших цветовых схем веб-сайта:

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

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

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

4.Где использовать цвет на вашем веб-сайте

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

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

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

5. Изображения

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

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

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

Если вы потратите больше времени на создание и размещение изображений на своем веб-сайте, это может быть особенно полезно в индустрии туризма. В конце концов, вы можете заставить людей представить, будто они уже в отпуске, сидя за своими ноутбуками. Примером может служить Africa Travel Resource:

6. Кнопки

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

Этот тест цвета кнопок A / B от Hubspot может вас заинтересовать.

Результат был довольно ясным. Изменив цвет с зеленого на красный, они увидели увеличение конверсии на 21%. Хотя в некоторых ситуациях он может быть немного агрессивным (в реальной жизни и в дизайне, если его много), в этом случае (с чистым макетом и достаточным интервалом) он привлекает внимание.

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

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

7. Фон

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

Вот как это делает Adidas, например:

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

Как эта швейцарская компания:

8. Заголовки

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

Вот как Walmart делает это эффективно:

II. Демографические данные: анализ вашей аудитории

Следующее, что вам нужно учитывать, — это ваши демографические данные.

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

1. Пол

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

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

Швейная промышленность, ориентированная на женщин, также довольно часто и интересными способами использует розовый цвет. Victoria’s Secret — один из таких примеров.

То, как их оттенки заполняют страницу, — истинное дизайнерское вдохновение.

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

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

2. Возраст

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

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

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

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

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

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

III. Комбинирование цветов

В веб-дизайне (и дизайне в целом) существует концепция, называемая правилом 60-30-10.

Вкратце, он гласит, что 3 — это правильное количество цветов, которое вы должны выбрать при оформлении помещения. Используйте их следующим образом: 60% для доминирующего цвета, 30% для второстепенного и 10 для третьего (который является основным цветом).

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

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

Вот хороший график, показывающий, как работает правило 60‑30‑10.

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

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

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

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

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

IV. Психология цвета

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

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

Если вы считаете, что хороший дизайн веб-сайта стоит дорого, вам следует посмотреть на цену плохого дизайна. — Доктор Ральф Спет

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

Ничего не оставляйте на удачу. Внесите изменения в дизайн своего сайта и интернет-магазина в соответствии с результатами научных исследований.

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

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

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

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

Вот как это выглядит на WrightWoodFurniture:

А вот как Trunkster — бренд, продающий чемоданы, — использовал желтый в качестве основного цвета (подробнее о том, как выбрать основной цвет ниже).

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

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

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

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

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

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

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

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

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

2. Как цвета могут привести к конверсии

Знаете ли вы, что 85% покупателей признают, что цвет является основной причиной, по которой они что-то покупают? Не говоря уже о том, что цвет увеличивает узнаваемость бренда на 80%.

3. С правильными цветами вас легче запомнят.

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

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

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

Итак, какое отношение выбранная вами цветовая схема веб-сайта имеет к увеличению продаж?

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

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