Какие выбрать цвета для сайта: Цвет для сайта: какой выбрать?

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

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

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

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

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

colorscheme.ru

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

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

color.adobe.com

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

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

paletton.com

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

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

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

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

Color Palette Generator

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

palettegenerator.com

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

palettable.io

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

flatcolors.net

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

materialpalette.com

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

getuicolors.com

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

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

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

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

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

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

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

Цветовая теория для «чайников»

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Контраст.

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

Дополнение.

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

Резонанс.

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

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

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

Какие эмоции вызывают цвета?

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Инструменты для выбора цветовой гаммы веб-сайта

Воплотить теорию на практике и выбрать цвет для сайта можно даже онлайн. Сэкономьте время на создании собственной палитры и воспользуйтесь готовыми: Adobe Color CC, Paletton или Flat UI Color Picker. Если вам не понравятся эти инструменты, можете поискать в интернете другие — их там огромное количество.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Подбор цветов и генерация цветовых схем

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

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

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

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

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

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

Триада образована тремя цветами, равномерно распределяя цветовой круг (120°). Цветовые схемы триады имеют много возможностей по сочетанию цветов, регулировке контраста, акцентов и баланса теплых/холодных цветов.

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

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

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

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

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

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

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

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

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

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

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

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

Значение оттенка основного цвета. Кликните для ввода числового значения.

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

Значение RGB основного цвета. Кликните для ввода числового значения.

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

Значения RGB основного цвета.

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

Яркость и Насыщенность. Перетаскивайте ползунок по квадрату для регулировки яркости (вверх = светлее, вниз = темнее) и насыщенности (вправо = насыщенное, влево = разбавленное).

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

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

Коррекция Вариантов. Панель для регулировки яркости и насыщенности по отдельности для каждого цвета.

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

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

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

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

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

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

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

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

Рандомизация. Служит для создания случайной палитры согласно настройкам рандомизации.

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

10 Трендовых Цветовых Схем Для Веб-Сайтов в 2021

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

Исключительно Черный

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

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

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

Морской Оттенок в Сочетании с Мятным

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

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

Черный, белый, серый

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

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

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

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

Серый, Голубой и Синий

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

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

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

Футуристические Цветовые Схемы

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

• насыщенный синий;
• насыщенный пурпурный;
• ярко-розовый.

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

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

Классический синий

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

Один из примеров сайтов, который реализовал такой подход – студия веб-дизайна Oino.

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

Природные Оттенки

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

1. Об этом говорят все больше знаменитостей.
2. Этому требованию соответствуют производители разных товаров.
3. Об этом все больше рассказывают СМИ.

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

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

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

Серый, Мягкий Желтый и Темно-Зеленый

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

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

Как Подобрать Цветовую Схему?

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

1. Выберите преобладающий цвет.
2. Подберите хорошие комбинации.
3. Определитесь с фоновым цветом.

У многих возникает вопрос относительно второго пункта. Если вы действительно не можете сами определиться с цветами, то у вас есть два выхода. Первый – обратиться к квалифицированным веб-дизайнерам, которые создадут для вашего проекта лучшую комбинацию. Второй – использовать веб-инструменты (например, Adobe Color CC).

Заключение

Сегодня очень много трендов меняются во всех сферах. Графический дизайн не стал исключением. Цветовые схемы – наименее стабильная составляющая дизайна. Поэтому за ними необходимо следить больше всего.

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

Психология цвета и веб-дизайн

Синий цвет

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

Фиолетовый цвет

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

Черный цвет

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

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

Белый цвет

Белый — традиционно считается цветом добродетели, чистоты, простоты. Отличный вариант для фона сайтов, выполненных в минималистическом дизайне.

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

Серый цвет

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

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

Бежевый цвет

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

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

Цвет слоновой кости

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

Выбор цветовой гаммы

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

Триада

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

Двойная комплиментарная система

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

Цвета-аналоги

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

18 полезных ресурсов для работы с цветом

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

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

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

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

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

Ресурс HTML Color Codes предоставляет вам весь набор инструментов для работы с цветами в Web: переводы из одного цветового представления в другое, color picker, color chart и даже много туториалов про цвета. Очень круто.

Роскошный онлайн-инструмент для работы с цветом! Палитры, цвета, паттерны, все настраивается, выкладывается, делится и вычисляется из заданной картинки! Удобнее colorlovers в некоторых аспектах, более гибкий, чем kuler! Восторг, господа!)

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

24 сочных градиента от дизайнера Luke Davies.

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

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

Это один из инструментов, который всегда должен быть под рукой у дизайнера, а на Color by Hailpixel определенно стоит обратить внимание. Открывшийся сайт покажет вам пустой экран с единственной ссылкой на черный цвет (#000000). Перемещая курсор по экрану, вы будете видеть, как изменяется цвет фона, а окошко в центре будет показывать соответствующий hex-код этого цвета. Клик мышью создаст полоску текущего цвета с цифровым значением этого цвета.

Используя приложение, вы можете быстро увидеть многоаспектный характер цветов и отношения между цветами. Цвета палитрый представлены в 3d виде. Созданные палитры могут быть импортированы или экспортированы в Adobe Swatch Exchange (ASE). В ColoRotate есть свое сообщество, где можно просмотреть темы, созданные другими пользователями.

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

Этот сервис пригодится особенно веб-дизайнерам. Он позволяет подобрать цветовую модель для будущего сайта.

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

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

Абсолютно бесплатно и, что наиболее важно – онлайн, позволяет создавать и сохранять гармоничные цветовые сочетания, как автоматически, так и вручную. Пользуясь тремя ползунками RGB или HSV вы автоматически получаете гармоничное сочетание из шести цветов и затем можете настраивать их в соответствии со своим вкусом. Цвета автоматически представляются в виде цветового HTML кода и кода RGB, а также могут быть экспортированы в виде цветовых таблиц Photoshop (.ACT) и Illustrator (.EPS). Кроме того, есть функция сравнения цвета со стандартным понтонным. Свои палитры можно хранить прямо на сайте, задавая им удобные вам имена. Также на сайте можно найти массу готовых палитр на разные случаи жизни.

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

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

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

Фото на обложке: ShutterStock

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

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

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

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

Всё должно быть гармонично

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

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

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

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

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

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

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

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

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

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

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

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

Что влияет на выбор цветовой гаммы?

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

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

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

• детей и молодёжь привлекают яркие краски,
• людей среднего возраста — менее насыщенная гамма,
• старшее поколение — мягкие тона.

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

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

Выбираем основной цвет

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

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

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

Создаём палитру

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

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

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

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

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

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

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

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

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

Посмотрите видео Рана Сегалла ниже, где вы найдете 12-минутное введение в использование цветов в веб-дизайне.

‍

‍

Почему выбор правильных цветов важен

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

‍

Разборчивость

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

‍

Пример веб-сайта, на котором используется соответствующая контрастность. Источник: Vault

‍

Визуальная привлекательность

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

‍

Пример сайта с гармоничной цветовой гаммой.Источник: Тарас Мигулко через Dribbble

‍

Узнаваемость бренда

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

‍

У Coca-Cola, Ikea и Starbucks есть узнаваемые фирменные цвета

‍

Использование теории цвета для выбора цветов

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

‍

‍

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

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

‍

‍

Монохроматический

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

‍

Пример сайта с монохромной цветовой схемой. Источник: Аник Деб через Dribbble

‍

Дополнительные

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

‍

Синий и оранжевый — дополнительные цвета. Источник: Алиса Майборода через Dribbble

‍

Аналогично

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

‍

Желтый и оранжевый — аналогичные цвета. Источник: Webinsane через Dribbble

‍

Щелкните здесь , чтобы получить подробное руководство по теории цвета.

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

‍

Использование психологии цвета для выбора цветов

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

‍

Значения цвета

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

• Красный : страсть, сила, любовь, опасность, возбуждение
• Синий : спокойствие, доверие, компетентность, мир, логика, надежность
• Зеленый : здоровье, природа, изобилие, процветание
• Желтый : счастье, оптимизм, творчество, дружелюбие
• Оранжевый : веселье, свобода, тепло, комфорт, игривость
• Фиолетовый : роскошь, загадочность, изысканность, верность, креативность
• Розовый : забота, нежность, искренность, тепло
• Коричневый : природа, безопасность, защита, поддержка
• Черный : элегантность, сила, контроль, изысканность, депрессия
• Белый : чистота, покой, ясность , чистота

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

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

‍

Пример веб-сайта с монохромной красной цветовой схемой. Источник: Катерина Кайда через Dribbble.

‍

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

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

‍

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

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

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

‍

1. Выберите основной цвет

Лучше всего начать создание цветовой палитры с основного цвета. Главный цвет палитры — звезда шоу. Если мы следуем правилу 60/30/10 , основной цвет занимает около 60% цвета на веб-сайте.

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

‍

Основной цвет в этом примере — светло-розовый.Источник: Facebook Дизайн

‍

P.S. Прочтите , этот пост , чтобы узнать больше о правиле 60/30/10 и других советах по стратегическому выбору цветов.

‍

2. Выбор дополнительных цветов

После выбора основного цвета выберите один или несколько дополнительных цветов. Согласно правилу 60/30/10 вторичные цвета занимают около 30% веб-сайта. Чтобы выбрать второстепенные цвета, вам нужно сначала определить, какой тип цветовой схемы лучше всего подходит для веб-сайта: монохроматический, дополнительный или аналогичный.

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

‍

Фиолетовый — вторичный цвет на сайте Powder .

‍

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

‍

3. Выберите акцентный цвет

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

‍

В этом примере акцентный цвет — ярко-желтый.Источник: tubik через Dribbble

‍

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

‍

Изучите искусство и стратегию создания ценных веб-сайтов

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

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

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

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

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

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

Что означают цвета?

–

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

Давайте посмотрим, какое значение имеют цвета и какие эмоции они могут вызывать.

Теплые тона

Красный цвет может пробуждать страсть. Веб-дизайн от Aneley

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

• Красный — активный, эмоциональный, страстный, сила, любовь, интенсивность
• Pink — сладкий, романтичный, игривый, теплый, сострадательный, мягкий
• Апельсин — теплый, восторженный, успешный, решительный, дружелюбный
• Желтый — молодой, живой, энергичный, свежий, оптимистичный

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

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

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

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

Нейтральные цвета

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

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

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

Психология цвета и узнаваемость бренда

—

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

Цвет — это наука. Иллюстрация Ненада Максимовича

Помимо общего значения каждого цвета, упомянутого выше, существуют также определенные тенденции, которым бренды часто следуют, чтобы добиться узнаваемости. Например, рестораны обычно красного и оранжевого цвета, банки и финансовые учреждения — синего цвета, предметы роскоши обычно упаковываются в черный цвет, отели — обычно белые, синие, черные или зеленые.Некоторые знаковые бренды, известные своими цветами, включают CNN для красного, белого и черного цветов, желтый от National Geographic и McDonald’s для сочетания красного и желтого цветов.

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

Теория цвета в веб-дизайне

—

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

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

Хорошая реализация трехцветной цветовой схемы через MercClass

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

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

Выбор основного цвета

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

Этот веб-дизайн заимствует свой основной цвет из логотипа бренда. Веб-дизайн: Iconic Graphics

Разработка оттенков и оттенков

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

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

Оранжевый основной цвет используется в разных оттенках для создания акцентов. Дизайн: UI Maniac

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

Правило 60-30-10

Хороший пример реализации правила 60-30-10.Дизайн JPSDesign

Этот метод прост, но эффективен для смешивания разных цветов. Для создания гармонии цвета обычно следует комбинировать в соотношении 60% —30% —10%. Не обязательно использовать три цвета, но это хорошее число, чтобы быть безопасным и сбалансированным. При использовании этого метода 60% должны быть доминирующим цветом, 30% второстепенным цветом и 10% акцентным цветом. Эта пропорция приятна для человеческого глаза, поскольку позволяет визуальным элементам проявляться постепенно.

Контраст

Высокая контрастность, но приятная для глаз.Дизайн JPSDesign

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

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

Работа с изображениями

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

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

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

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

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

Цвета оживляют веб-дизайн

—

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

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

Хотите создать идеальный веб-сайт?

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

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

Клод Моне сказал знаменитую фразу: «Цвет — моя дневная одержимость, радость и мучения».

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

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

Начать создание цветовой схемы!

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

Colordot

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

Colorcode

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

Coolors

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

Canva

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

Вращение цветового круга

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

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

Adobe Color CC

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

Paletton

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

Вдохновите свой выбор

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

Dribbble

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

Khroma

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

Цветовое пространство

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

Сделайте свои слова удобочитаемыми

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

Material Design

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

Colorsafe

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

Удачи!

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

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

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

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

Как выбрать правильные цвета для веб-дизайна

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

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

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

Почему цвета имеют значение в веб-дизайне

Мы используем преимущественно зеленый и оранжевый цвета на всем нашем веб-сайте.

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

Давайте поговорим о некоторых причинах, по которым ваш выбор цветов так важен:

• Правильная цветовая палитра может помочь улучшить читаемость. Выбранные вами цвета играют важную роль в удобочитаемости.
• Контрастные цвета могут выделить основные элементы. Использование хорошо продуманных цветовых контрастов может помочь выделить определенные элементы. Например, призывы к действию (CTA) обычно имеют жирный цвет, чтобы привлечь ваше внимание.
• Дополнительные цвета радуют глаз. Соответствующая цветовая палитра приятна на вид и не отвлекает от содержания вашего сайта.
• Цвета могут стать запоминающейся частью вашего бренда. Некоторые цвета даже стали знаковыми из-за их ассоциации с определенными брендами, например, красный оттенок Coca-Cola.

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

Как выбрать правильные цвета для вашего следующего проекта веб-дизайна (за 3 шага)

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

Шаг 1. Выберите доминирующий цвет для вашего дизайна

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

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

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

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

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

Шаг 2. Найдите цвета, аналогичные вашему основному оттенку

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

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

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

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

Шаг 3. Ищите контрастные цвета для выделения важных элементов

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

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

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

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

Цветной дизайн Заключение

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

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

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

Изображение предоставлено Pixabay.

Как выбрать цветовую схему веб-сайта [2021]

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

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

Итак, создаете ли вы свой сайт с помощью конструктора, такого как Wix, или создаете его с помощью WordPress и такой темы, как Divi или Astra, цветовая гамма «v yeet» (как сказали бы дети) очень важна (как и взрослые). сказать).

Какого черта вы подходите к выбору цветовой схемы своего сайта?

Ну, все начинается с вот этого поста…

• Что такое цветовая схема?
• Почему важны цветовые схемы веб-сайта?
• Как выбрать цветовую схему вашего веб-сайта
• Примеры цветовой схемы веб-сайта
  • 1.Веселый и игривый
  • 2. Сильный и гладкий
  • 3. Корпоративный и креативный
  • 4. Естественный и очаровательный
  • 5. Яркий и энергичный
  • 6. Мощный и уравновешенный
  • 7. Смелый и счастливый
  • 8. Успокаивающий и землистый
  • 9. Чистый и пузырьковый
  • 10. Яркий и игривый
  • 11. Приглашающий и доверчивый
  • 12. Творческий и профессиональный
  • 13. Профессиональный и приглашающий
  • 14. Энергичный и игривый
  • 15.Мудрый и светлый
  • 16. Знакомый и футуристический
  • 17. Земной и дополнительный
  • 18. Спокойный и собранный
  • 19. Резкий и винтажный
  • 20. Теплый и успокаивающий
  • 21. Простой, напористый, исторический
  • 22 Богатый, изысканный, художественный
  • 23. Профессиональный, мощный, заслуживающий доверия
  • 24. Резкий, фанковый, яркий
  • 25. Веселый, кокетливый и полный жизни
  • 26. Богатый, современный, изысканный
  • 27.Виртуозный, творческий, продвинутый
  • 28. Цифровой, необычный и инновационный
  • 29. Монохромный, преднамеренный
  • 30. Футуристический, мечтательный, изобретательный
  • 31. Смелый, яркий, первозданный
  • 32. Легкий, устойчивый
  • 33 Необычный, сплоченный
  • 34. Расслабленный, гостеприимный, землистый
  • 35. Большой, смелый, красивый
  • 36. Смелый, ретро, ​​резкий
  • 37. Спокойный, землистый, органический
  • 38. Веселый, свежий
  • 39 . Утонченный, упрощенный, обновляющий
  • 40.Игривый, Модный, Органический
  • 41. Игривый, Преобладающий
  • 42. Образный, Минималистичный
  • 43. Элегантный, Классический, Современный
  • 44. Вдумчивый, Причудливый
  • 45. Сильный, Вдохновленный, Радостный
  • 46. Землистый, Органический, заслуживающий доверия
  • 47. Шипучий, яркий и элегантный
  • 48. Комфортный, свежий, изысканный
  • 49. Натуральный, органический, землистый
  • 50. Возвышенный, мечтательный
• Дополнительные ресурсы для создания веб-сайтов

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

Сначала краткое определение от наших друзей из Википедии (ну, они нам нравятся; они, вероятно, не знают, что мы существуем, tbh):

«В теории цвета цветовая схема — это выбор цветов, используемых в дизайне для различных материалов.”

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

Типы цветовых решений

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

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

Аналог

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

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

Как ты это делаешь?

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

Монохромный

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

НО монохромные цветовые схемы технически могут быть основаны на любом одном оттенке (красный / синий / желтый и т. Д.) В сочетании с 2 или более оттенками, тонами и оттенками.

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

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

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

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

Триадический

В цветовых схемах веб-сайта

Triadic используются 3 цвета (которые вы знаете, знатоки грамматики, потому что латинский префикс «tri-» означает «три»), которые равномерно распределены по цветовому кругу.

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

Дополнительные

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

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

Если вы сойдете с ума от них, ваш сайт может быстро стать очень напряженным (например, не используйте зеленый текст на красном фоне; никто не любит Рождество так сильно).

Соединение

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

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

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

Заметили ли вы это, просматривая Insta, выполняя поиск на Amazon или бесконечно нажимая на следующее видео в разделе рекомендаций Youtube, цвета имеют большое влияние на то, как мы себя чувствуем — в Интернете и в реальном мире.

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

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

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

# 1: Цвет помогает повысить узнаваемость бренда (и это важно)

Если бы вы представили себе Starbucks, что бы вы увидели?

Может быть, дело в том, что макиато с тройной карамелью «изредка» пьешь слишком поздно вечером.

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

Источник: Pixabay

Трудно представить Starbucks без «Starbucks Green», и в этом суть!

Этот цвет служит двум целям кофейного гиганта:

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

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

Согласно исследованию мастера интернет-маркетинга Нила Пателя:

• 85% покупателей считают, что цвет является основной причиной, по которой они покупают товары.
• Цвет увеличивает узнаваемость бренда на 80% (и люди с большей вероятностью будут доверять и посещать сайты брендов, которым они доверяют).

Источник: Neil Patel

И согласно исследованию университетов Нортумбрии и Шеффилда (они находятся в старой Великобритании, поэтому они должны быть надежными … всегда доверяйте британскому акценту / исследованиям, как мы всегда говорим!), Первое впечатление от веб-сайта 94% связаны с дизайном.

И, очевидно, цвет — огромная часть веб-дизайна (вот почему мы говорим об этом!).

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

Это основная причина, по которой numero uno так важно иметь потрясающе красивую цветовую схему веб-сайта.

# 2: Цвет влияет на то, как люди думают о вашем сайте

Исследование Университета Виннипега (который находится в Канаде для тех, кто следит за нашим кругосветным путешествием) выявило две важные вещи, связанные с цветовыми схемами веб-сайтов:

1. Люди делают свои первоначальные суждения о веб-сайте / компании / продукте в течение первых 90 секунд после первого взаимодействия.
2. 62-90% первоначального суждения основано на цвете.

Что имеет смысл: цвет — одна из самых простых для понимания частей информации.”

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

Итак, как использовать цвет в своих интересах, чтобы люди с большей вероятностью возвращались на ваш сайт снова и снова?

Используя силу (эхо голоса) «Психологии цвета».

Что означают цвета?

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

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

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

Но как, черт возьми, ты это делаешь?

Что ж, это начинается с знания, какие чувства вызывает каждый цвет у щупалец (на этом мы остановимся, обещаем).

Вот краткое описание:

Черный

Источник: Bornfight

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

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

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

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

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

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

Серый

Источник: Frames

Серый — еще один нейтральный цвет, который придает сайтам, использующим серый цвет, ощущение серьезности, точности, контроля и отсутствия эмоций…

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

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

Белый

Источник: Мириам Петерс

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

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

Коричневый

Источник: Хранители реки

Коричневый, очевидно, естественного цвета (грязь, деревья, камни и т. Д.).

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

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

Синий

Источник: Plink

Синий — это очень гибкий цвет — то, насколько светлый или темный синий вы используете, может сильно изменить его значение.

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

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

Зеленый

Источник: Эслам сказал, что

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

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

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

желтый

Источник: Spread Systems Inc.

Желтый — это цвет солнечного света и счастья, и надеемся, что будущее будет светлым!

Ярко-желтый цвет особенно радует и подходит для сайтов, предназначенных для детей (или родителей).

Светло-желтые оттенки немного спокойнее самых ярких желтых, а темные / золотисто-желтые цвета создают античный, «старинный» вид.

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

Оранжевый

Источник: Emotive Feels

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

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

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

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

Красный

Источник: MOHAB

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

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

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

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

фиолетовый

Источник: Purple Bunny

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

Таким образом, только богатые, королевские люди могли позволить себе вещи фиолетового цвета (а теперь это цвет группы покемонов и телепузиков, лол).

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

Как люди реагируют на цвет в зависимости от пола и возраста?

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

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

Давайте посмотрим на основные моменты:

Любимые и наименее любимые цвета по полу

Источник: Нил Патель

Несколько ключевых выводов из этого:

• Все любят синий, поэтому, если этот цвет передает информацию / чувства, к которым стремится ваш сайт, не бойтесь. Зеленый, красный и черный.
• Все ненавидят оранжевый и коричневый, которые также ассоциируются с дешевизной, поэтому используйте их более экономно (в целом; если вы действительно любите оранжевый, сделайте это; если вы действительно любите коричневый, мы предлагаем вам переосмыслить свою жизнь).
• Женщины любят фиолетовый, а мужчины не так сильно (это 23% любимого цвета женщин, хотя ни один мужчина не сказал, что это их цвет).

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

Источник: Нил Патель

Что показывает нам:

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

А как насчет возраста?

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

Любимые и наименее любимые цвета по возрасту

Источник: Джо Хэллок Источник: Джо Хэллок

Выводы:

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

# 3: Хорошая цветовая палитра делает ваш сайт организованным

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

Это происходит двумя способами:

Создание визуальной иерархии

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

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

Как это работает?

Ну, все возвращается к эмоциям и нашим старым добрым глазам.

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

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

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

Использование эффекта изоляции также было показано в нескольких цветовых исследованиях (это из Университета Беркли и это из журнала Consumer Psychology), что на самом деле является тем, что люди предпочитают в цветовых схемах.

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

Создание чувства согласованности

Хорошая цветовая схема веб-сайта также создает порядок за счет согласованности.

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

Или, если вы используете синий фон сетки за всеми вашими заголовками h3 (как этот пост здесь!), Вы должны использовать тот же цвет фона для всех заголовков h3 на вашем сайте.

Чувство порядка / согласованности также является фактором цветовых гармоний / типов цветовых схем, о которых мы говорили выше.

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

# 4: Выбор цветовой схемы веб-сайта упрощает проектирование

Последний в этом списке, но первый в наших сердцах, это он!

Независимо от того, создаете ли вы один веб-сайт и развиваете его с течением времени, или хотите создать несколько сайтов для себя или других людей (которые платят вам деньги!), Чем меньше времени вы тратите на основные задачи, тем лучше.

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

Особенно, если вы превратите его в причудливый документ, как это сделал Mailchimp:

Источник: Mailchimp

Теперь у них есть масса цветов в палитре, потому что у них очень сложный веб-сайт / приложение.

Однако для большинства сайтов, которые вы создадите, мы рекомендуем придерживаться только 3-5:

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

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

Но как выбрать те 3-5 лучших?

Рад, что вы спросили!

Как выбрать цветовую схему вашего сайта

Хорошая цветовая схема веб-сайта — это та, которая находит идеальный баланс между двумя вещами:

1. Ценности и цель бренда / бизнеса.
2. Что хотят и что хотят ваши посетители.

Достаточно легко сказать, как, черт возьми, это сделано?

Используете ли вы Wix или тему WordPress, такую ​​как Divi, ответ один: 4. Легко. Шаги.

1. Знайте цель и аудиторию своего веб-сайта

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

Но цветовая схема «профессионального» веб-сайта начинается с того, что он представляет собой и для кого он предназначен.

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

Как определить назначение своего сайта?

У нас есть много информации об этом в нашем руководстве «Как создать веб-сайт».

Здесь ваши цели:

• Определите, к какой отрасли относится ваш сайт.
• Определите ценности или «индивидуальность», которые вы хотите передать на своем сайте.

Эта первая часть должна быть относительно простой, если немного подумать:

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

И т. Д.

Для второй части давайте проведем небольшое исследование, чтобы помочь вам выбрать 1-2 «личности», о которых вы хотите общаться через свой сайт.

Профессор психологии Стэнфордского университета Дженнифер Аакер — наш помощник в этом.

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

Источник: Pinterest

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

Хотите продавать часы на сайте электронной коммерции? Выбирайте «изысканность».

Хотите поделиться советами по походам, походам, охоте и т. Д.? «Прочность» это есть!

Может быть, вы делитесь своим хобби, например, игрой на гитаре.«Искренность» может быть вам подходящей (также может быть «ВООБРАЖЕНИЕ»).

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

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

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

Несколько хороших ресурсов по этому поводу:

Чтобы не тратить кучу времени на изучение того, как проводить маркетинговые исследования (и фактически делать это), вы также можете просто задать себе несколько вопросов, чтобы начать работу:

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

Какие цвета обычно лучше всего подходят для вашей отрасли?

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

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

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

Во-первых, инфографика из исследования, проведенного Towergate Insurance по самым популярным цветам брендов в каждой отрасли:

Источник: Towergate Insurance

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

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

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

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

Однако, чтобы помочь вам, у нас есть еще одна аналогичная инфографика от компании по маркетингу программного обеспечения Marketo:

Источник: Marketo

Там много полезной информации, так что потратьте время на ее усвоение!

Наконец, вот еще один полезный отрывок из инфографики Нила Пателя о том, как цвета влияют на определенные типы покупателей:

Источник: Нил Патель

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

Вместо этого, вот что он нам говорит:

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

Теперь вы, вероятно, задаетесь вопросом: «Если я использую те же цвета, что и другие компании / веб-сайты, такие как мой, не будет ли невозможно выделиться?»

Ну, вот тут-то и нужно выбрать определенные цвета (например, зеленый морской пены в семействе «зеленых») и составить уникальную цветовую палитру.

Что приводит нас к…

2. Выберите основной / доминирующий цвет

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

Думайте о «красном» и Coca-Cola, «зеленом» и «Starbucks», «желтом» и «McDonald’s».

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

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

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

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

Если вы не согласны с результатами викторины, извините, мы потратили ваши 2 минуты lol.

Вариант 1. Вдохновение

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

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

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

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

Вариант 2. Используйте фотографию

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

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

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

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

Как использовать основной цвет на вашем сайте

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

Определенно не по всему вашему сайту; это сделает ваш дизайн ошеломляющим.

Как правило, вы хотите использовать свой доминирующий цвет в ключевых местах, на которые хотите привлечь внимание (например, кнопки «Связаться с нами», основная информация и ваш логотип):

Источник: наш демо-сайт Wix

3. Выберите второстепенные / акцентные цвета

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

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

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

Для всех остальных достаточно одного основного цвета плюс 1-2 второстепенных.

Как, черт возьми, вы их вычислили?

Используя упомянутые выше правила гармонии теории цвета!

Нет необходимости вытаскивать собственное цветовое колесо и транспортир (чтобы вычислить правильные углы), Adobe Color снова за нами.

Как выбрать второстепенные цвета с помощью Adobe Color

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

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

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

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

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

То же самое можно сделать с ползунками под каждым цветом.

И вы можете щелкать по цветным полям, чтобы изменить ваш «базовый» или «основной» цвет.

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

Если вам нравится новый цвет, выберите его вместо оригинального!

По мере того, как вы играете, вам будут предоставлены 4 возможных дополнительных цвета (в дополнение к вашему основному / основному).

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

2-й и 4-й цвета обычно используются для более сложных дизайнов.

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

Кстати…

Как использовать второстепенные цвета на вашем сайте

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

Он же «вещи, которые нужно выделять, но не слишком сильно».

Вот как используются акцентные цвета в примере цветовой палитры нашего веб-сайта:

Источник: наш демо-сайт Wix

4. Выберите цвет фона

Цвета фона заполнят те места, где вы не хотите использовать основные / второстепенные цвета, например текст, фон сообщений в блогах и т. Д.

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

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

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

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

Электронная торговля или сайт с большим количеством контента? Палка с нейтралами

Сайты, которые продают много товаров (также известные как Amazon) или в основном посвящены обмену информацией и идеями (например, блоги, подобные this ‘un‘ ere), хотят как можно больше сосредоточить внимание на этих товарах / словах.

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

Источник: Carbon

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

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

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

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

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

Источник: Critical Software

Ищете супер стильный? Вы также можете использовать графику / изображения

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

Только будьте уверены в двух вещах:

1. Ваш текст все еще читается.
2. Чтобы в вашем дизайне не было слишком много интересного из-за всех деталей вашего фона.

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

Но вы также можете использовать гармонию «Оттенки» в цвете Adobe, чтобы найти либо нейтральные цветовые оттенки, либо оттенки вашего основного цвета, чтобы наложить их на ваши изображения и сделать их более приглушенными (вы можете добавлять наложения к самим изображениям в Photoshop или в конструктор вашего сайта / WordPress).

Источник: Maman Corp.

Примеры цветовой схемы веб-сайта

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

Вот где появляется немного вдохновения из великолепных дизайнов!

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

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

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

1. Веселая и игривая

Источник: Flatiron Collective

# b200f8 # ff4247 # ffdb6c # 00545a # 002835

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

2. Прочный и гладкий

Источник: Martell

# 8a211b # b3925f # f0cd95 # 001446 # eaeae2

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

3. Корпоративный и творческий

Источник: NetNation

# e9467d # 113b77 # 2565c7 # 4bb3f0 # e9e9f3

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

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

4. Естественный и очаровательный

Источник: New York Times

# fdc3b7 # f3d982 # a7dac9 # 5178b1 # e7f4fd

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

5. Яркий и энергичный

Источник: Open

#eeeeee # cc5245 # 58a9a5 # f3d33b # 231f20

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

6. Мощный и сбалансированный

Источник: Slack

# 4A174B # 5BB77E # 56C6F0 # E1405A # ECB230

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

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

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

7. Смелый и счастливый

Источник: Счастливый герой

#FFFFFF # 000000 # E93F33 # FEE533 # 4F5CD6

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

8. Успокаивающий и земной

Источник: Титя Рави

#BEBDAA # F6EEE2 # D4D8CE # B29578 # 000000

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

Земляные тона, которые она использует, напоминают натуральные материалы, которые она использует в своих украшениях.

9. Чистота и пузырьки

Источник: УМАН

# E94734 # 334F6E #FFFFFF # F8F8F8 # F9DFDB

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

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

10. Яркая и игривая

Источник: Whoa Mama

# 7a00f8 # ff003e # f39190 # f3e513 # 00bfd2

Whoa, Mama — подходящее название для цветовой палитры, представленной на этом сайте. Яркий и игривый, наполненный тоннами цифрового искусства 90-х, Whoa Mama является ярким примером правильного брендинга.

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

11. Приглашение и доверие

Источник: NU

# 56909a # b3d2d7 # aeaf71 # 717b44 # df8956

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

Эта составная цветовая палитра состоит из темно-синего, летнего небесно-голубого, оливково-зеленого, нежно-зеленого и загорелого оранжевого.

12. Творческий и профессиональный

Источник: #raiseyourwebsite

# 455799 # 5f7add # af6ac6 # f09686 # f7be3e

Raise Your Website — это инструмент для онлайн-тестирования веб-сайтов, на его веб-сайте представлена ​​креативная цветовая палитра, в которой используется уникальная комбинация двух дополняющих друг друга синего, а также пурпурного, персиково-оранжевого и желтого заката.

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

13. Профессиональный и привлекательный

Источник: Access IS

# 155799 # 1d76d1 # 0f7ce0 # 53c3f6 # e9f2fe

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

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

14. Энергичный и игривый

Источник: Spotify

# e85db6 # ea5467 # f2af37 # cdf564 # 6fd862

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

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

15. Мудрый и просветляющий

Источник: Общество Ронинов

# ead6b7 # cba978 # 9ea3a9 # 14222d # e34234

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

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

16. Привычный и футуристический

Источник: Psych X86

# 050c3f # 6474b9 # 4a2c96 # 9b75c5 # 70edf0

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

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

17. Земляной и дополнительный

Источник: Care

# 333333 # a5502f # e36f30 # f2bf20 # 4b7803

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

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

18. Спокойствие и собранность

Источник: Slumber

# deba93 # 081521 # 001f33 # 23628b # 53b5c1

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

19. Острый и винтажный

Источник: Mountain Man # e3d279 # 9faf8b # efb48d # c96346 # 414042

Инди-поп-группа Mountain Man не теряет времени даром, показывая миру, кто они такие.

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

20. Тепло и утешительно

Источник: Cowboy

#fffafd # fcf3f7 # f8dbe3 # e94363 # 131414

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

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

21. Простой, напористый, исторический

Источник: 100 лет

# b63232 # fbf3e4 # 397e77 # cf633d # f7c156

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

22. Богатый, изысканный, художественный

Источник: Abele Interiors

# f9f5ef # c19a5b # 1f1f1f

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

23. Профессиональный, мощный, надежный

Источник: Awink

# 48aee3 # 3181b2 # 212221 #ffffff

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

24. Острый, фанковый, живой

Источник: Beans Agency

# fdeaa4 # f9ca46 # f8eff1 # f9dcd9 # d78576 # dee8fa # 1c2042 # badbe5

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

25. Веселые, кокетливые и полные жизни

Источник: Damn Good Beauty

#cfdaeb # b9a3c8 # f9daf0 # f7e79c # c2c2c0

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

26. Богатый, современный, изысканный

Источник: Earls

# 619481 # 85714d # 0f344a # 3f4751

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

27. Виртуозный, Креативный, Продвинутый

Источник: Etiya

# 242441 # dd782f # f4f4f4 # 816359 # a25a2b

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

28. Цифровой, необычный и инновационный

Источник: Fiddle

# a872ee # f6b841 # 080b13 # ee9572 # d0d8e8 # eb6678

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

29. Монохроматический, Преднамеренный

Источник: Get Golden

# fff7e2 # fedd87 # f9bf54

Бренд — это цветовая схема, а цветовая схема — это бренд.Это может звучать так, как если бы безвкусное маркетинговое агентство предложило бизнесу разработать свою цветовую схему, но в данном случае это правда (и это работает!). Эта компания использует три оттенка золотисто-оранжевого, чтобы создать монохромный фирменный стиль, который кричит: «ЭТО НАШ БРЕНД»!

30. Футуристический, мечтательный, изобретательный

Источник: Nesh

# c9d0fd # 804ef6 # f3b3a0 # 140d41

Nesh — это AI-помощник для поиска и аналитики, разработанный, чтобы находить ответы на ваши бизнес-вопросы в 10 раз быстрее за счет мощи обработки естественного языка.Инструмент Nesh, несомненно, был необычной идеей, и созданная ими цветовая схема говорит об их впечатляющих творческих способностях. Глубокие и мечтательные пурпурные, такие как фиалка и синяя лента, идеально сочетаются с мягким барвинком и розовым оттенком манди, чтобы создать космический и революционный веб-сайт, который кричит: «Я — будущее»!

31. Смелый, яркий, первозданный

Источник: iSi Global

# e54360 # f6b733 # 0d2e40 # 4da9af

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

32. Легкий, экологичный

Источник: Itemerie

# fff196 # e7f9f0 #eaffad #ffcdff # 171447 # f4f5f8

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

33. Необычное, связное

.

Источник: Katch Me

# 4bb2e9 # 052355 # e2d1cb # a793aa # ​​6adf91

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

34. Расслабленный, гостеприимный, землистый

Источник: Лик

# 354147 # a4493e # 444a57 # d6a76b # 606c62

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

35. Большой, жирный, красивый

Источник: Markus

# c8ff00 # e0e0e0 # 5301ff # 000000

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

36. Смелый, Ретро, ​​Резкий

Источник: Mindkiss

# 3060f6 #

a # e8622a # f7c444 # 131516 # 000000

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

37. Мирный, Землистый, Органический

Источник: Музей мира и тишины

# 1f2c16 # 757e6d # fDfBf4

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

38. Веселый, свежий

Источник: Mutek

# 4d8b2c # c2d553 # 2d1051 # 282828

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

39. Утонченный, упрощенный, освежающий

Источник: Muteza

# fdf5f0 # f2a271 # f6cace # 1b262c

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

40. Игривый, модный, органический

Источник: Nutritional Freedom

# e9d4c5 # 336b59 # d69e92 # deb99c # fdfaf6

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

41. Игривый, преобладающий

Источник: Pets by Spotify

# a0c3d2 # e94236 # 61c174 # 000000

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

42. Образное, минималистичное

Источник: Programmai

# 7e5dfc # 64d5d6 # 4f5cfc # 3faafb

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

43. Элегантный, классический, современный

Источник: Shoma Bazaar

# fad565 # ed7768 # 292b37 # ab7c68

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

44. Задумчивый, Причудливый

Источник: Studio Simpatica

# 1b2337 # ee724b # f5da7d # 9Caaf2

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

45. Сильный, вдохновенный, радостный

Источник: Детское общество

# 000000 # ffeb32 # f1be31 # ef8533 # e5e5e5

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

46. Землистый, Органический, Надежный

Источник: The Living Lad of the National Cancer Institute

# d9b395 # eee5df # f4b25c # 3a7e6c # 000000

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

47. Шипучий, эффектный и элегантный

Источник: Чудесная миссис Майзел

# 132d3b # ec7e9a # e24897 # e56731 # eee8e4 # ebc22f

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

48. Комфортный, свежий, изысканный

Источник: Veneziano Coffee

# 425664 # f6f4f2 # c7af92

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

49. Натуральный, Органический, Землистый

Источник: Wokas

# 000000 # 3b3b3b # 6ad7a6 # 6ed563 # f6c187 # db512f

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

50. Величественный, мечтательный

Источник: Wonderland # ecd4c2 # ad35ee # 2d130c # ce8f31 # 151315

Wonderland — агентство User Experience, которое использует на своем веб-сайте довольно нестандартную цветовую схему, хотя в итоге она работала очень хорошо. Как и следовало ожидать от агентства по дизайну пользовательского опыта, веб-сайт Wonderland наполнен темно-коричневыми и серыми контрастными цветами, такими как Electric Violet и Brandy Punch Orange, которые могут звучать не так, как будто они хорошо сочетаются друг с другом, но это действительно так! Пять основных цветов, используемых на веб-сайте Wonderland, идеально сочетаются с профессиональной, но игривой атмосферой бренда агентства.

Дополнительные ресурсы для создания веб-сайтов

И это, ребята, у нас есть для вас сегодня.

Полный текст, полный текст, весь набор цветовых схем веб-сайта.

Хотите узнать обо всем этом дизайне веб-сайтов?

У нас есть друзья!

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

30 цветовых палитр для веб-сайтов — выберите цвета для своего веб-сайта

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

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

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

Как выбрать цвета для веб-сайта

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

При разработке веб-сайта придерживайтесь четырех или менее цветов. Изображение через Visual Generation.

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

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

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

Цветовые палитры для сайтов о здоровье и красоте

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

1. Аромат лаванды

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

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

2. Безмятежное небо

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

Не бойтесь черпать вдохновение в природе. Изображение предоставлено Тананья Питхи.

3. Йога на открытом воздухе

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

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

4. Очаровательный аптекарь

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

Медовые тона придают веб-дизайну изысканность и гламур. Изображение предоставлено Ефетовой Анной.

5. Спа-центр

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

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

Цветовые палитры для предприятий по продаже продуктов питания и напитков

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

6. Яркая чаша

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

Пробуждает аппетит свежей зеленью и ярким цветом. Изображение предоставлено Тимолиной.

7. Звездный синий

Blueberries — настоящая звезда шоу. Глубокие синие и пурпурные тона этого универсального фрукта являются отличным источником вдохновения для магазинов напитков и кулинарных блогов.Палитра холодных тонов гармонична и радует глаз.

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

8. Контрастный цитрусовый

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

Яркий оранжевый и успокаивающий синий — классическая привлекательная комбинация.Изображение предоставлено Kiian Oksana.

9. Насыщенный красный

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

Более мягкие красные тона обладают всей глубиной настоящего красного без резкости. Изображение предоставлено Daxaio Productions.

10. Фермерский рынок

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

Цвета урожая вызывают ассоциации с пышными садами и фруктовыми садами. Изображение через marcin jucha и chelovector.

Цветовые палитры для сайтов блогов и портфолио

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

11. Работа с сеткой

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

Выбирайте цвета, которые дополняют вашу работу.Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через miniwide, GoodStudio, GoodStudio, Moremar, Ardea-studio, Lavrushka, GoodStudio и GoodStudio.

12. Красочная эстетика

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

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

13. Красивая в розовом

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

Мягкие розово-розовые тона добавляют всплеск женственности. Изображения через Юлию Завалишину, Серенко Наталью и босоточку.

14. Коралловая зелень

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

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

15. Простая красота

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

Простота тоже работает. Мокап через нелелену. Значок заголовка через Mio Buono. Иллюстрации через Mio Buono, Mio Buono, Mio Buono, Mio Buono, Mio Buono и createvil.

Цветовые палитры для экологических объектов

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

16. Зеленая красота

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

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

17. Рыба-клоун

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

Вызовите морскую жизнь с помощью насыщенного красно-оранжевого и темно-синего цветов. Изображение предоставлено J’nel.

18. Воздействие на океан

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

Черпайте вдохновение в самом море. Изображения через Mr.anaked и WindAwake.

19. Блестящие лилии

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

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

20. Амазонский тукан

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

Спокойные яркие тропические тона с мягкими нейтральными оттенками. Изображение через MarcusVDT.

Цветовые палитры для сайтов фитнеса и тренировок

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

21. Силовые тренировки

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

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

22. Тренажерный зал Excel

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

Глубокий красный цвет — мощный фоновый образ. Изображения через sportpoint и Alex_Colt.

23. Ряд мощности

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

Глубокие розовый и желтый цвета согревают успокаивающий синий цвет. Изображение предоставлено Dmitrydesign.

24. Бесстрашный фитнес

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

Глубокий золотисто-желтый цвет выделяется на фоне теплых красных тонов. Изображения через Джейкоба Лунда и Зубдаша.

25. Поход в горы

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

Тренируйтесь и вдохновляйтесь на свежем воздухе. Изображение через everst.

Цветовые палитры для сайтов одежды и одежды

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

26. Яркая одежда

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

Пастельные тона добавляют энергии и жизни в шоппинг. Изображение предоставлено Africa Studio.

27. Cool Collective

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

Neutrals — отличный фон для сайтов розничной торговли. Изображение предоставлено Якобом Лундом.

28. Коралловый наряд

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

Добавьте немного чирка или бирюзы, чтобы охладить тропические кораллы. Изображение предоставлено Indigo Photo Club.

29. Приглушенный стиль

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

Черпайте вдохновение в своих продуктах. Изображение предоставлено Екатериной Зубал.

30. Дорожные сигналы

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

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

Изображение обложки через SkyPics Studio.

Ищете другие способы повысить свое присутствие в Интернете? Ознакомьтесь с этими статьями ниже:

26 вдохновляющих цветовых схем веб-сайтов в 2021 году (палитры для дальтоников)

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

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

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

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

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

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

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

Выбор цвета по отрасли

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

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

Цвета бренда по отраслям (Источник изображения: towergateinsurance.co.uk)

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

Это наводящий вопрос, который должен помочь вам определить основной цвет для вашей палитры.

Синие конвейеры:

Синий — цвет надежности

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

Это не апеллирует к спонтанности или эмоциям. Вместо этого он инициирует спокойный и логичный процесс принятия решений.

Наиболее часто встречается в следующих отраслях:

• Банковское дело
• Авиакомпания
• Связь
• Потребительское финансирование
• Электроэнергетика
• Тяжелая техника
• Товары для дома
• Отели
• Фармацевтические препараты

Красные конвейеры:

Красный цвет передает внимание и страсть

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

Наиболее часто встречается в следующих отраслях:

• Рестораны
• Напитки
• Розничная торговля продуктами питания
• Недвижимость
• Одежда

Зеленые конвейеры:

Зеленый передает ощущение жизненной силы

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

Наиболее часто встречается в следующих отраслях:

• Продукты питания и напитки
• Универмаги
• Недвижимость
• Химические вещества

Черный: уверенность, изысканность

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

Наиболее часто встречается в следующих отраслях:

• Одежда
• Принадлежности
• Провайдеры услуг Интернета и мобильной связи
• Универмаги
• Отели

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

Сколько цветовых схем следует использовать на одном веб-сайте?

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

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

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

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

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

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

62–90% первоначального впечатления потребителей основывается только на выборе цвета … а это означает, что поиск правильной цветовой схемы для вашего сайта — это не просто эстетическое, а деловое решение. 🎨✨Нажмите, чтобы написать твит

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

Colorzilla

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

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

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

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

Какую цветовую схему веб-сайта мы используем в Kinsta?

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

Медиа-комплект Kinsta

Мы используем темно-фиолетовый (# 5333ed) в качестве основного цвета, бирюзовый (# 2cd4d9), чтобы сопоставить и создать эффектные, но сбалансированные градиенты, и приглушенный серый цвет для текста (# 6E7076).

Но что делают другие компании?

Давай узнаем!

26 лучших примеров цветовых схем для веб-сайтов

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

Цветовые схемы веб-сайта Great Ecommerce

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

1. Средство для ухода за кожей: яркое и игривое

Bliss

Когда дело касается бренда,

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

2. Бренд одежды: Clear and Concise

Le Bonnet

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

3. Магазин одежды: Simplicity

Редакция

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

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

4. Посуда: надежность и профессионализм

Моя посуда

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

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

5. Жевательная резинка: натуральная и импульсная

Neuro

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

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

6. Наручные часы: изысканность и роскошь

Премьер-посол

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

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

7. Брюки: креативные и доступные

Алдай

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

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

8. Фруктовые закуски: элегантные и подчеркнутые цвета

Мэдис

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

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

Подпишитесь на информационный бюллетень

Хотите узнать, как мы увеличили наш трафик более чем на 1000%?

Присоединяйтесь к 20 000+ других, которые получают нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишитесь сейчас

9.Джинсовая ткань индивидуального кроя: It’s Alive

Без вращения

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

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

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

10. Творческая простота

Мадлен Далла

Мадлен Далла — фотограф из Нью-Йорка с большим чутьем в дизайне веб-сайтов (и впечатляющим портфолио).

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

11. Оттенки серого с всплеском

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

12. Единение с природой

iFly 50

iFly 50 — это онлайн-журнал, выпущенный KLM в честь своего 50-летия.

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

13. Чистота и профессионализм

Бенедиктас Гилис

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

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

14. Прагматичные цвета

BucketListly

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

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

15. Элегантная простота

Ларс Франзен

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

16. Футуристическая накладка

Точечное легкое

Персональный сайт

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

17. Свет и тьма

Любовь к Исландии

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

Цветовые схемы посадочных страниц

Ниже мы выделили различные целевые страницы с уникальными или эффективными цветовыми схемами.

18.Резкие контрасты

Зенли

Zenly использует резко контрастирующие цвета, чтобы подчеркнуть фактическую функциональность приложения Live Map (кстати, именно так вы встраиваете Google Maps на сайты WordPress). Космический фон выделяет глобальный дизайн приложения и придает ему футуристический оттенок.

19. Цвет для выделения

Slack

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

Обязательно ознакомьтесь с нашим подробным сравнением Microsoft Teams и Slack.

20. Яркие цвета вызывают эмоции

Spotify

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

21. Цветовые контрасты создают порядок в хаосе

Автономность

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

22. Футуристический ансамбль цветов

Багснаг

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

23. Живые цвета

Connect Homes

Целевая страница

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

24. Консервативные цвета, игривый дизайн

Plink

Целевая страница

Plink основана на относительно консервативном оттенке темно-синего, но уравновешивает его игривой и веселой анимацией и дизайном в целом.

25. Природная жизненная сила

Travelshift

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

26. Яркие краски надежды

Мазок в мире

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

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

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

Colormind

Colormind

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

Coolors.co

Coolors.co

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

Палетон

Палетон

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

ColorSpace

ColorSpace

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

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

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

Различные виды дальтонизма

Не все видят «стандартную» цветовую гамму. Существует три основных типа дальтонизма: дейтеранопия, протанопия и тританопия.

Красно-зеленая дальтонизм (дейтеранопия и протанопия) — наиболее распространенная форма дальтонизма. Это поражает примерно 1 из 12 лиц североевропейского происхождения. Учитывая такое большое количество людей, затронутых этим, это стоит учитывать при разработке и / выборе темы WordPress.

Сине-желтая цветовая слепота встречается гораздо реже и в равной степени поражает мужчин и женщин.

Как выбрать для своего веб-сайта палитру для дальтоников

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

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

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

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

Сводка

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

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

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

А теперь пора выбрать шрифты, не так ли?

Экономьте время, деньги и повышайте производительность сайта с помощью:

• Мгновенная помощь от экспертов по хостингу WordPress, 24/7.
• Интеграция Cloudflare Enterprise.
• Глобальный охват аудитории с 28 центрами обработки данных по всему миру.
• Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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