Сайта в цветов дизайне сочетание: Сервисы подбора цвета для веб-дизайна
Сервисы подбора цвета для веб-дизайна
Цвета для веб-дизайна играют огромную роль. Чтобы грамотно подобрать цветовую схему для сайта, существуют специальные сервисы. Уверена, что у каждого веб-дизайнера в закладках есть хотя бы один такой.
Иногда вот сидишь и думаешь, какой оттенок голубого выбрать основным для сайта, чуть светлее или чуть ярче, а может потемнее взять… А к нему еще надо дополнительные подобрать. Можно конечно делать это и на глаз, но лучше воспользоваться одним из специальных сервисов.
Я не буду рассказывать про теорию цвета (это слишком объемная информация), а просто опубликую здесь сервисы, которые есть у меня в закладках и которыми я пользуюсь .
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
Трендовые цвета в веб-дизайне
При создании сайта нужно особое внимание уделить выбору цветовой гаммы. Подбор доменного имени, хостинга, проработка архитектуры, соблюдение трендов UX/UI-дизайна — конечно, важные моменты при создании сайта, но встречают по обложке, и первое визуальное впечатление закладывает фундамент мнения о компании. Грамотный выбор цветов оказывает определенное влияние на пользователя и формирует его восприятие на бренд. Правильно подобранная веб-дизайнером комбинация цветов и оттенков поможет пользователю лучше понять цели проекта и повысить читаемость веб-сайта.
Подбор цветов для сайта, прежде всего, должен быть в соответствии с брендовой политикой и выражать главную идею компании. Но в то же время, делая этот выбор, стоит принять во внимание цветовые тренды — это позволит создать современный образ. В этой статье вы сможете узнать об основных колористических тенденциях в мире веб-дизайна.
Теплые цвета в веб-дизайне в 2021 году
В 2021 году в моду возвращаются насыщенные яркие цвета, которые были очень популярны в 80-90 годах. Ретростиль сейчас преобладает везде — в модной одежде, аксессуарах и даже в дизайнерских оформлениях сайтов. Подобное сочетание цветов для сайта вызывает ностальгию и теплые воспоминания, а это, в свою очередь, формирует позитивную эмоциональную связь с компанией.
В этом году трендовыми будут насыщенный ментоловый, глубокий синий, коралловый, все оттенки зеленого и серого, цвет морской волны и ярко-розовый.
Такая палитра подойдет для создания энергичного дизайна. После 2020 года люди очень устали, и поэтому им придутся по душе оптимистичные и насыщенные цвета, при взгляде на которые поднимается настроение.
При использовании этих цветов нередко используется градиент. Такие плавные переходы из одного цвета в другой делают картинку более глубокой, и создается эффект плавных переливов. В таких тонах оформлено популярное приложение Instagram.
Жидкое золото
В тренде сейчас темный оттенок желтого в сочетании с голубой лазурью. Отличное сочетание навевает мысли об отдыхе, и на подсознании посетитель сайта с таким оформлением внутренне расслабляется.
Еще одна модная тенденция — градиент желтого. Переход от песочного оттенка к более темному желтому и светло-коричневому. Дополняется этот градиент пастельными тонами, глубоким синим и насыщенным зеленым цветами. Такая цветовая гамма для сайта воздействует на пользователя расслабляюще.
Все оттенки розового
В тренде сегодня и розовый цвет, который давно перестал считаться девичьим. Для оформления своих сайтов все чаще розовые тона стали использовать строительные фирмы и интернет-магазины по продаже одежды.
Популярность этого цвета обусловлена тем, что при взгляде на розовый у человека возникают ассоциации с детством и спокойствием. Кроме этого, розовый цвет не «режет глаз» и способен снять напряжение. Поэтому при использовании в веб-дизайне этого оттенка можно вызвать у посетителей доверие к бренду на подсознательном уровне.
Веб-дизайнеры используют чаще всего при оформлении сайтов розовое с черным или розово-желтое, в зависимости от цели проекта. Яркий пример это сайт Unleashed. Желтые буквы на розовом фоне — это отличное цветовое сочетание, и при рассмотрении не вызывает раздражения.
Красно-оранжевые тона
Для привлечения повышенного внимания аудитории к своему сайту, дизайнеры нередко используют оранжево-красный и красный с желтым. Кроме этого, красный цвет отлично гармонирует с черно-белыми тонами. При посещении такого сайта у посетителя концентрируется внимание, и лучше воспринимается информация.
Оттенки, которые напоминают о цветущих весной садах в этом сезоне считаются модным трендом для сайтов. Например, сочетание оранжевого и розового цветов. Данная палитра – это сочетание комфорта и расслабленности, оптимизма и решимости. Сайт, оформленный в этом модном тренде, привлечет к себе повышенное внимание аудитории, и вызовет у посетителей интерес и хорошие эмоции.
Фаворитом в этом сезоне считается огненный. Он вызывает бурю эмоций и действует магнетически на посетителей сайта, который оформлен в таком цветовом диапазоне.
Насыщенные яркие тона будут отлично сочетаться с анимационным шаблоном и привлекут к сайту с таким дизайном вызовут неподдельный интерес у посетителей.
Цвета, как напоминание о единстве человека с природой
Последний год практически все были на карантине из-за коронавируса, и видели природу из окна или по телевизору. Многие сидели дома и мечтали о путешествиях. Но так как это невозможно, альтернативой может стать интернет, где можно найти сайты с элементами живой природы. Веб-дизайнеры взяли на вооружение эту тенденцию, и начали оформлять сайты в «природных» тонах. Это такие сочетания как зеленый, голубой, бежевый и другие пастельные тона.
Подобные тона, используемые веб-дизайнерами для сайта, вызывают у пользователей мысли о природе и благополучие, и вызывают чувство доверия к бренду.
Таким приемом маркетинга пользуются фирмы, выпускающие натуральную косметику, сайты вегетарианских продуктов, а также различные благотворительные организации.
Бледно-зеленый ассоциируется в новом сезоне не только с темой экологии, но и технологической темой. Дизайнеры используют эту спокойную гамму для создания спокойного настроения у аудитории.
Холодные цвета в веб-дизайне
Серый как основа
Дизайнеры раньше использовали серый исключительно как дополнительный. В этом сезоне все кардинально изменилось. Серый в сочетании с желтым и зеленым — это необычное дизайнерское решение. А все, что выглядит необычно, привлекает к себе внимание.
Сочетание синего, черного, зеленого и серого, где доминирующим цветом является именно серые тона при оформлении веб-сайта, вызывают сначала у посетителей недоумение, а потом интерес.
Сайт, оформленный в таком стиле веб-дизайна, будет выглядеть оригинально.
Радикально черный
Использование черного – это отличный маркетинговый ход. Казалось бы, мрачный цвет, но при правильном дизайнерском оформлении, сайт становится классически элегантным и привлекает к себе повышенное внимание пользователей.
При создании дизайнеры, кроме черного, могут использовать как дополнительно серый и белый. Очень важно подобрать правильно остальные элементы: анимацию, изображения и шрифт. А чтобы сделать градиенты с переходами от черного к более светлым тонам, необходимы определенные навыки.
Примером такого сочетания цветов в современном веб-дизайне считается сайт Apple. Его оформление полностью соответствует политике бренда и с первого взгляда видно, что товары предназначены для покупателей премиум-класса.
Классический синий
Глубокий насыщенный синий, его еще называют имперским, используется как основной фон для многих сайтов. Обычно для такого фона веб-дизайнеры используют белый шрифт. По мнению психологов, синий воздействует на человека успокаивающе, и вызывает у него хорошее настроение. Кроме того, он ассоциируется с экспертностью.
Цвет морской волны и мята
Голубой очень давно используется как основной для корпоративных сайтов. В 2021 году все изменилось, теперь используются для дизайна градиенты и более мягкие оттенки голубого, такие как бирюзовый. Если вам хочется добавить чуть больше энергичности своему сайту – смело прибегайте к контрастным решениям. Вы можете выбрать оранжевые оттенки, находящиеся на противоположной стороне спектра или же использовать классические белые и черный.
Все оттенки голубого оказывают на посетителей сайта успокаивающее действие, при этом происходит концентрация их внимания. Активно используется такое цветовое сочетание при создании сайтов по продаже услуг или товаров.
Актуальное сочетание цветов в веб-дизайне в 2021 году
Футуристические сочетания цветов
Сочетание розового, синего и пурпурного, фиолетового сегодня в тренде у веб-дизайнеров.
Шаблон сайта от Ucraft
Оформленный в такой цветовой гамме сайт выглядит современным, запоминающимся и сразу привлечет к себе внимание пользователей.
Трио: голубой, серый и синий
Нестандартное сочетание синего, серого и голубого в чистом виде без всяких градиентов, еще один дизайнерский тренд 2021 года.
Создание такой гаммы не требует особых навыков и умения от дизайнера. Зайдя на такой сайт, пользователь видит необычное цветовое решение, и это привлекает его внимание.
Классика: черный, белый и серый
Оформленный в черно-белой гамме с добавлением серого оттенка сайт, на первый взгляд, выглядит слишком просто. Классический дизайн без всяких излишеств привлечет к себе посетителей именно незатейливым дизайнерским решением. Таким маркетинговым приемом пользуются крупные корпорации, это их визитная карточка.
Шаблон сайта от Ucraft
Цветовые тренды для разных стран
Shutterstock было проведено исследование, с целью изучения популярности тех или иных цветов для сайтов в различных странах. После анализа результатов определилась такая тенденция: жители Германии и Франции предпочитают оттенки фиолетового; для японцев в фаворе белый, а россиянам нравится оформление в бледно-зеленых тонах.
Предпочтение того или иного оттенка зависит от страны проживания пользователя сайта и его менталитета. Цвета выбираются людьми на подсознательном уровне. Поэтому, создавая сайт для России, лучше добавить зеленых тонов в оформление.
Полезные сайты подбора цвета для веб-дизайнеров
Чтобы дизайнеру облегчить работу по подбору палитры для сайта, созданы специальные сайты и сервисы:
Adobe Color — сервис для формирования палитр.Сделайте собственную цветовую схему, предварительно загрузив изображение. Кроме этого, на сервисе расположены работы других дизайнеров и представлен рейтинг лучших цветовых гамм.
Color Mixer — инструмент для работы над палитрами. Регулируя параметры оси, формируйте оптимальное цветовое сочетание.
Gradient Hunt — бесплатная платформа для формирования собственной коллекции градиентов или собирания удачных решений из представленных.
После создания градиентов можно их сохранить себе. Color Leap — сервис поиска из 180 цветовых схем, используемых человечеством на протяжении последних 4000 лет. На сайте легко проследить, как менялись популярные оттенки в каждом веке и столетии.
Color Designer — помогает в формировании гармоничной гаммы для сайта. Для этого нужно выбрать цвет, а сервис все сделает автоматически. Вы можете опираться на заранее выбранные цвета или же на месте работать на составление собственного варианта.
CoolHue 2.0 — представляет в общее пользование 60 разнообразных градиентов, их можно экспортировать как изображение или скачать кодом.
Pigment — сервис, который поможет генерировать яркие оттенки. Система отталкивается от определенного пигмента и освещения.
Palettable — на этом сервисе можно подобрать цвета по принципу хорошо/плохо. Редактирование происходит вручную, поэтому можно подобрать тон так, чтобы он гармонировал с другими тонами.
Culrs — на этом ресурсе профессионалами собраны готовые цветовые схемы. Здесь можно найти подходящую палитру для дизайна своего сайта.
Mesh Gradients — бесплатный сервис, где собрана коллекция фоновых градиентов. Их можно скачать в различных разрешениях.
Как подобрать цвета для сайта?
Прежде чем применить на своей сайте один из трендов цветовой гаммы 2021 года, необходимо понимать, почему это так важно:
Грамотно подобранный цвет сайта, на 80% делает бренд более узнаваемым.
На 90% первое впечатление, которое появляется у юзера от сайта зависит от выбранной палитры.
Фирменные цвета стоит неукоснительно использовать на всех страницах сайта, такое дизайнерское решение дает пользователю ощущение целостности проекта.
При помощи изменения оттенков можно расставить акценты и сформировать путь клиента, который ведет, например, к кнопке с призывом к действию.
Выбор определенной цветовой палитры упрощает дизайнеру работу при расширении сайта.
Перед выбором палитры для сайта нужно изучить бренд, в чем его отличие от конкурентов, какую целевую аудиторию он привлекает и определить основные особенности компании.
После того как основной цвет сайта определен, дизайнером продумывается несколько цветовых комбинаций.
Основное правило: оттенки должны находиться в гармонии, а также должны работать на вашу цель: то есть при их использовании должны хорошо быть видны иконки, изображения и текст.
В палитре веб-сайта дизайнер может использовать несколько тонов. Однако во всем должна быть мера: лучше всего выбрать 1 основной и 2-3 дополнительных цвета.
Качественно оформленный дизайнером сайт, поможет привлечь в компанию больше потенциальных покупателей. Ведь если все грамотно сделано, то посетитель не только посмотрит сайт, но, возможно, приобретет предлагаемый товар или услугу.
30 лучших цветовых схем веб-сайтов для поиска идеального поддона
Развитие веб-сайта Производство
07 февраля 2023 г.
Арис Б.
14 мин Чтение
При создании веб-сайта обратите внимание на визуальные элементы сайта, особенно на цветовую схему. Выбор правильных цветов важен, поскольку 21% посетителей покинут веб-сайт с диковинными цветами.
Так как существует множество цветовых схем веб-сайтов, выбор правильной может быть сложной задачей. В этой статье будут представлены 30 вдохновляющих цветовых схем веб-сайтов, включая их названия и шестнадцатеричные коды.
Но прежде чем перейти к списку, мы объясним, почему выбор правильной цветовой схемы важен для вашего сайта.
Загрузить контрольный список запуска веб-сайта
Почему важна цветовая схема веб-сайта?
Хотя цвета часто используются только в эстетических целях, выбор правильной палитры принесет дополнительные преимущества вашему сайту. Вот три причины, почему цветовая схема веб-сайта необходима:
Повышение конверсии
Согласно исследованию, настройка цветовой схемы веб-сайта может повысить конверсию до 9 раз.0011 24% . Конверсия происходит, когда посетитель выполняет желаемое действие на вашем сайте, например, покупает продукт или заполняет форму подписки.
Выбор правильной цветовой схемы веб-сайта может повлиять на решения ваших посетителей.
Если важные элементы, такие как призывы к действию (CTA), выделяются, посетители с большей вероятностью будут с ними взаимодействовать.
CTA — это часть веб-сайта, которая побуждает посетителей выполнить действие, ведущее к конверсии. Это может быть текст, изображение или кнопка.
Исследование показало, что красный цвет лучше подходит для CTA-кнопки, чем зеленый. Красный контрастирует с цветовой схемой веб-сайта больше, чем зеленый, что позволяет посетителям легче различать CTA.
Кроме того, согласно психологии цвета, красный цвет вызывает энергичные, стремительные и страстные эмоции. Таким образом, красные кнопки призыва к действию создают ощущение срочности и побуждают к взаимодействию.
Создание фирменного стиля
Цветовая схема вашего веб-сайта должна отражать индивидуальность вашего бренда. Например, яркие цветовые решения подходят бренду с энергичным, веселым и молодежным характером.
Использование уникальной цветовой палитры поможет вашему бренду выделиться среди конкурентов. Если цветовая схема вашего сайта похожа на другие, это может запутать клиентов.
Поскольку люди часто ассоциируют бренд с определенным цветом, поддержание согласованности цветовой схемы вашего веб-сайта помогает повысить узнаваемость бренда.
Для бизнеса цветовые схемы веб-сайта также помогают установить отношения с клиентами, вызывая правильные эмоции. Эмоциональная связь с клиентами повышает лояльность к бренду, принося пользу вашему бизнесу.
Совет эксперта
При разработке веб-сайта вы должны рассматривать проект или бренд как единое целое. Дизайнер должен сначала оценить целевую аудиторию и понять, где визуально находится бренд. И чтобы не допустить ошибок в будущем, следует учитывать, как выбор цвета повлияет на развитие бренда в будущем.
Урте П.
Арт-директор Hostinger
Удержание посетителей
Для веб-дизайнера знание правильных цветовых схем веб-сайта может улучшить взаимодействие с пользователем, удерживая аудиторию веб-сайта дольше.
В сочетании с хорошо продуманным пользовательским интерфейсом цвета помогают посетителям перемещаться по вашему сайту. Например, различные цвета позволяют пользователям быстро находить элементы навигации. Они также позволяют визуально разделять содержимое веб-сайта в зависимости от его важности.
Поскольку посетители обычно игнорируют большую часть контента веб-сайта, визуальная иерархия сначала привлекает внимание пользователей к более важному контенту.
Напротив, случайный выбор цветовой палитры веб-сайта может повлиять на удобство использования. Например, черный текст на темном фоне ухудшает читабельность.
30 лучших цветовых схем веб-сайтов
Чтобы вдохновить вас, мы перечислим 30 лучших цветовых схем веб-сайтов. Мы также будем использовать инструмент выбора цвета, чтобы получить названия цветов и шестнадцатеричные коды.
Обладая следующей информацией, вы сможете смешивать и сочетать цвета и создавать собственную цветовую схему веб-сайта.
1. Бело-черный
Чтобы подчеркнуть важное содержимое, рассмотрите возможность использования черно-белой цветовой схемы. Эта двухцветная комбинация делает ваш сайт современным и минималистичным.
Примером веб-сайта с монохромной цветовой гаммой является онлайн-портфолио Саваса Озая.
Художник придерживается простой цветовой палитры своего веб-сайта, используя белый фон и черный цвет в качестве акцента для текста. Доминирующее белое пространство позволяет посетителям сразу же сосредоточиться на произведении искусства. В противном случае их внимание переключится на красочный фон.
Минималистский веб-дизайн показывает, что визуальный художник хочет, чтобы сайт отражал его художественный стиль и выделял его работы.
Используемые цвета: Белый (#FFFFF), черный (#1D1D1)
2. Темно-зеленый, цвет слоновой кости и желтый
Используйте цветовую схему веб-сайта, которая поможет передать голос вашего бренда. Например, землистые тона подходят для веб-сайтов с экологическими сообщениями.
Веб-сайт Mandai — отличный пример использования землистых цветов для продвижения бренда как экологически сознательного предприятия.
Цветовая схема веб-сайта экопарка дикой природы состоит из темно-зеленого, цвета слоновой кости и желтого. Эти цвета часто ассоциируются с землей, отсюда и естественный оттенок.
Эта цветовая палитра приятна для глаз, что делает веб-сайт расслабляющим и органичным.
Используемые цвета: Зеленый (#009B4D), мандариновый желтый (#FFCC00), слоновая кость (#FAF5E9)
3. Ярко-зеленый и ярко-розовый
Яркие цвета сделают ваш сайт энергичным и веселым. Они стимулируют мозг и вызывают сильные эмоции.
3-сторонний куб с розовыми и ярко-зелеными оттенками создает живой сайт, который соответствует интересным и страстным ценностям компании.
Чтобы создать контраст с яркими цветами, компания-разработчик приложений использует белый и черный цвета в качестве акцентов. Он также включает в себя различные яркие оттенки розового и зеленого, что придает веб-сайту больше глубины.
Эта яркая цветовая палитра эффективно привлекает внимание посетителей. Такое сочетание цветов также необычно для технологической компании, что выделяет веб-сайт 3 Sided Cube среди других.
Используемые цвета: малахитовый зеленый (#31EC56), разматаз (#EF036C), гелиотроп (#EE72F8)
4. Темно-серый и желто-зеленый
Яркие цвета подчеркивают важную информацию, особенно в приглушенной цветовой гамме веб-сайта. Примером веб-сайта, использующего эту комбинацию ярких и приглушенных цветов, является GolfSpace.
На сайте GolfSpace используется монотонная цветовая палитра — в основном темные оттенки серого. Он использует желто-зеленый или зеленый цвет, чтобы выделить основные элементы, такие как кнопки, цены и предложения. На сером фоне сайта желто-зеленый легко бросается в глаза.
Использование желто-зеленого цвета позволяет посетителям лучше видеть CTA, что приводит к повышению конверсии. Кроме того, цвет вызывает энергичные эмоции, что делает его подходящим для веб-сайта, посвященного спорту.
Совет эксперта
Самый простой способ выбрать цвет CTA — посмотреть на противоположную сторону доминирующей цветовой палитры и выбрать один из них. Кроме того, контраст между фоном и кнопкой CTA играет решающую роль. Поэтому каждый дизайнер должен соблюдать рекомендации WCAG 2.0 и APCA, поскольку каждая палитра может давать разные результаты в зависимости от ее использования.
Урте П.
Арт-директор Hostinger
Используемые цвета: Желто-зеленый (#BAFF39), тусклый серый (#6E6E6E), белый (#FFFFFF)
5. Оттенки синего и белый
Синий передает стабильность и надежность, что делает его популярным для веб-сайтов технологических компаний, включая Drone.io. Цветовая схема веб-сайта этой компании по автоматизации тестирования программного обеспечения использует синий и белый цвета.
В качестве фона используется очень светло-голубой цвет с белым градиентом. Что касается текстовых и CTA-кнопок, на сайте используются королевский синий и ярко-синий цвета соответственно.
Несмотря на использование похожих цветов, эти разные оттенки синего позволяют легко отличить основные элементы от голубого фона.
Используемые цвета: Светло-голубой (#E9F1FA), ярко-синий (#00ABE4), белый (#FFFFFF)
6. Белый и зеленый лайм
Зеленый идеально подходит для веб-сайта компании, которая заботится об окружающей среде, такой как Lime . Цветовая гамма сайта компании состоит только из зеленого и белого цветов.
Использование всего двух цветов делает веб-сайт минималистичным и аккуратным. Кроме того, использование зеленого цвета на нейтральном фоне обеспечивает видимость всей важной информации.
Для лайма использование зеленого лайма обеспечивает единообразие брендинга. Стартап с электромобилем также использует изображение с зелеными и землистыми тонами, которое отражает цветовую палитру веб-сайта. Фоновое изображение — отличный способ сделать ваш сайт более привлекательным.
Используемые цвета: Лаймовый (#00DD00), белый (#FFFFFF)
7.
Бежевый и темно-серыйРассмотрите возможность использования нейтральных цветов, таких как бежевый, для минималистического и успокаивающего веб-сайта. Бежевый хорошо сочетается со многими цветами. В зависимости от сочетания он может выглядеть как теплым, так и холодным.
Бежевый также нейтрален и неприятен для глаз, что делает его идеальным для фона веб-сайта. Использование его с контрастным акцентным цветом сделает элементы переднего плана легко различимыми.
Сайт электронной коммерции Wells является отличным источником вдохновения для бежевой цветовой схемы веб-сайта. Он сочетает бежевый с темно-серым, создавая приглушенную палитру, которая хорошо сочетается с простым веб-дизайном.
Используемые цвета: Бежевый (#DDD0C8), темно-серый (#323232)
8. Черный и неоново-синий
Синий подходит для футуристического и высокотехнологичного веб-сайта, учитывая его связь с современными технологиями.
Цветовая палитра веб-сайта Neuro Symbolic Lab состоит из неонового синего и преимущественно черного фона. Эта цветовая комбинация выделяет синий, подчеркивая футуристическую тематику сайта.
Простая цветовая комбинация упрощает веб-дизайн. Использование большего количества цветов усложнило бы сайт и отвлекло бы посетителей.
На веб-сайте также используется белый текст, который дополняет темное окружение и улучшает читабельность и удобство для пользователей.
Используемые цвета: Неоново-синий (#2272FF), черный (#1D1D1)
9. Оттенки оранжевого и синего
Для уникальной цветовой схемы веб-сайта рассмотрите оранжево-синюю цветовую палитру A Short Journey.
Этот веб-сайт использует различные оттенки оранжевого цвета для фона. Этот основной цвет придает веб-сайту большую глубину, соответствующую трехмерному веб-дизайну.
Оранжевый оттенок обычно ассоциируется со счастьем и энтузиазмом. Это идеально подходит для этого веб-сайта, который побуждает посетителей отправиться в отпуск.
Объекты переднего плана в основном используют синий и белый цвета. Этот контрастный цвет позволяет посетителям сосредоточиться на интерактивных элементах сайта.
Используемые цвета: Оранжевый (#F9B872, #FAE7A5), голубой (#B6E1E7)
10. Бледно-розовый и темно-синий
Некоторые веб-сайты предлагают товары, услуги или контент для определенного пола. Эти веб-сайты могут использовать определенную цветовую схему в качестве подсказки.
Цветовые схемы веб-сайтов, ориентированных на женщин, обычно содержат розовый цвет, поскольку он ассоциируется с женственностью.
Пример розового веб-сайта — Oui от Jean Dousset. Этот веб-сайт электронной коммерции продает ювелирные изделия с бриллиантами, предназначенные для женщин, поэтому в цветовой палитре преобладает розовый.
На сайте используются разные оттенки розового для разделения разделов. Чтобы добавить больше динамики, в качестве дополнительного цвета используется темно-синий.
Используемые цвета: Cavern Pink (#E1B0AC), светло-розовый (#F2D4D6), темно-синий (#213F99 )
11.
Пастельные фиолетовые и нейтральные акцентыфон простой. Например, на веб-сайте Empathy Experiment используется светло-фиолетовый градиентный фон. Градиентные цвета делают фон вашего сайта привлекательным, но простым.
Ненасыщенный фон контрастирует с яркими цветами 3D-анимированных объектов, выделяя последние.
Для текста и кнопок используются нейтральные цвета: белый и черный. Контрастные цвета помогают посетителям различать важную информацию и сохранять концентрацию.
Используемые цвета: Пастельно-фиолетовый (#C5ADC5), светло-стальной синий (#B2B5E0)
12. Темно-синий и синий электрик
Синий обычно считается цветом доверия, что делает его популярным выбором для бизнес-сайтов. цветовые схемы. Веб-сайт Finlor является отличным источником вдохновения для синей цветовой гаммы.
Цветовая палитра веб-сайта Finlor преимущественно синяя. Темно-синий цвет доминирует над фоном веб-сайта, а цвета электрик и белый дополняют друг друга.
Различные оттенки синего позволяют логистической компании выглядеть заслуживающей доверия. Более светлые вторичные цвета улучшают видимость текстов и элементов CTA, что повышает удобство работы пользователей.
Используемые цвета: Глубокий темно-синий (#01257D), синий электрик (#00FFFF)
13. Цветовой градиент, белый и темно-синий
Если вы хотите добавить цвета на свой веб-сайт, рассмотрите возможность использования цветового градиента. С градиентами вы можете экспериментировать с цветовыми схемами, не делая ваш сайт властным.
Веб-сайт, который хорошо использует цветовой градиент, — это Stripe. Половина фона его домашней страницы представляет собой динамический цветовой градиент, а другая половина просто белая.
Он использует белый цвет для элементов на цветном фоне, включая меню навигации и иллюстрации. Что касается текста, то он использует белый и очень темно-синий цвета для обеспечения удобочитаемости.
Сочетание градиентов и нейтральных цветов делает сайт ярким, но чистым.
Используемые цвета: Бело-сиреневый (#F8F8F9), темно-синий (#111439), цветовой градиент
14. Бежевый, оранжевый и белый акцент
Привет, кожа знает, как сделать свой бренд запоминающимся, используя правильный цвет комбинация.
Цветовая гамма веб-сайта компании в основном состоит из оттенков бежевого, с добавлением оранжевого и белого в качестве дополнительных цветов. Эти теплые цвета напоминают человеческую кожу и идеально подходят для сайта электронной коммерции по уходу за кожей.
Привет, скин использует оранжевый цвет только для важных элементов. Сочетание привлекающего внимание цвета, такого как оранжевый, с нейтральными цветами делает призыв к действию более привлекательным.
Для повышения удобочитаемости используется белый цвет текста, чтобы контрастировать как с бежевым, так и с оранжевым.
Используемые цвета: Бежевый (#CD9C8A), оранжевый (#FF5100), белый (#FFFFFF)
15. Белый и серо-голубой
Синий вызывает ощущение безмятежности, идеально подходит для сайта Blue Lagoon. На этом веб-сайте представлен расслабляющий отель компании.
В цветовой гамме веб-сайта курорта используются нежные серо-голубые и белые оттенки, напоминающие воду и пар горячего источника.
Серо-голубой лучше всего подходит для спокойной цветовой палитры по сравнению с другими синими тонами, поскольку он менее яркий. Сочетание белого фона с серо-голубым приводит к минималистичному сайту с заниженным видом.
Что касается текста и кнопок, Blue Lagoon использует серый и темно-бирюзовый цвета. Несмотря на использование приглушенных цветов, CTA по-прежнему выделяются благодаря белому пространству.
Используемые цвета: Серо-голубой (#96C2DB, #E5EDF1), белый (#FFFFF)
16. Ярко-красный и белый
Некоторые цветовые схемы веб-сайтов хорошо подходят для подчеркивания макета веб-сайта, например двухцветные. цвета для двухколоночного веб-дизайна.
Как показывает веб-сайт Best Horror Scenes, ярко-красный и белый цвета могут подчеркнуть структуру двухколоночного веб-сайта. Использование контрастных цветов рядом друг с другом может помочь визуально разделить содержимое веб-сайта. Кроме того, сочетание красного с нейтральным цветом, таким как белый, делает первый более ярким.
Что делает Best Horror Scenes уникальным, так это его необычная красно-белая цветовая палитра. Эта цветовая комбинация отличается от других цветовых схем черно-красных сайтов ужасов.
Используемые цвета: Белый дымчатый (#F0F0F0), ярко-красный (#E7473C)
17. Классический синий, бирюзовый и золотой
Как показывает Slumber, темная цветовая палитра отлично подходит для спокойного веб-сайта.
Slumber использует более темный классический синий цвет для имитации ночного неба. Этот темно-синий цвет вызывает ощущение уюта и спокойствия, что соответствует слогану «приложение, которое усыпляет».
Приложение аудиобиблиотеки избегает ярких цветов, чтобы сохранить безмятежное настроение веб-сайта. Вместо этого он выбирает темно-бирюзовый и золотой цвета для акцентов.
Хотя бирюза и золото не яркие, эти цвета остаются видимыми поверх темно-синего фона. Таким образом, посетители могут легко читать текст и перемещаться по сайту.
Используемые цвета: Темно-синий (#0A1828), бирюзовый (#178582), золотой (#BFA181)
18. Желтый и синий
Желтый — цвет оптимизма, творчества и интеллекта — подходящий вариант для бизнес-сайта.
Тем не менее, веб-дизайнеры могут отказаться от использования ярко-желтого в качестве основного цвета. Ярко-желтый может быстро привлечь внимание посетителей и затмить другие цвета.
Если вы планируете использовать желтый цвет, рассмотрите возможность использования цветовой схемы веб-сайта Banky в качестве вдохновения. Компания банковских услуг использует желтый в качестве фона и синий в качестве дополнительного цвета.
Синий противоположен желтому на цветовом круге, что позволяет первому выделяться при совместном использовании. Использование синего в качестве цвета акцента увеличивает видимость CTA на фоне яркого окружения.
Используемые цвета: Желтый (#FFCE32), Берлинская лазурь (#1D63FF)
19. Темно-синий и золотой
Цветовая схема веб-сайта Sotheby’s — отличный вариант для веб-сайта, который стремится выглядеть профессионально и уравновешенно. На веб-сайте в основном используется темно-синий оттенок с белыми и золотыми акцентами.
Королевский синий — элегантный цвет благодаря своей истории с британской монархией. Между тем, золото символизирует престиж, богатство и успех — идеально подходит для веб-сайта этой компании, занимающейся элитной недвижимостью.
Сочетание темно-синего и золотого цветов создает стильный и аккуратный веб-сайт. Эта цветовая схема веб-сайта также помогает компании завоевать репутацию среди посетителей.
Используемые цвета: Синий (#002349), золотой (#957C3D)
20. Синий, бежевый и кораллово-красный
Сочетание трех цветов может оказаться сложной задачей, так как некоторые цвета могут конфликтовать. Но когда все сделано правильно, результат может быть на удивление приятным.
Dollar Shave Club — это веб-сайт, на котором хорошо сочетаются трехцветные комбинации. Цветовые схемы веб-сайта компании по уходу за собой сосредоточены вокруг кораллово-красного и бежевого цветов. Хотя кораллово-красный и бежевый обычно сочетаются с нейтральными цветами, Dollar Shave Club вместо этого выбирает синий.
Компания по уходу за собой использует темно-синий цвет в качестве основного цвета веб-сайта, чтобы контрастировать с бежевым и кораллово-красным, делая важные элементы более заметными.
Синий также идеально подходит для этого веб-сайта, на котором в основном продаются средства по уходу за мужчинами. Мужчины могут предпочесть синий, так как этот цвет обычно ассоциируется с мужественностью.
Используемые цвета: Темно-синий (#001233), светло-коралловый красный (#FF595A), бежевый (#CAC0B3)
21. Красный и желтый
Яркая цветовая гамма подходит для игривого веб-сайта. Как показано на главной странице Make Us Care, сочетание красного и желтого цветов создает веселый и смелый веб-сайт.
Желтый символизирует счастье, а красный вызывает сильные эмоции, в том числе страсть и силу. Хотя и красный, и желтый — сильные цвета, они хорошо сочетаются друг с другом.
Сочетание уникального шрифта с белым цветом делает текст легко читаемым на ярком фоне.
Используемые цвета: Кораллово-красный (#FE3A4A), золотой мак (#FEC501)
22. Белый и фиолетовый
Добавление одного цвета — отличный способ сделать веб-сайт с преобладанием белого цвета более привлекательным.
Цветовая схема веб-сайта Liberty London использует фиолетовый цвет в качестве акцента для монохромной палитры. Как королевский цвет, фиолетовый подходит к общей теме роскошного сайта электронной коммерции.
Использование только фиолетового цвета для основных элементов делает сайт минималистичным. Доминирование остальной части веб-сайта с помощью нейтральных цветов, таких как белый и черный, позволяет фиолетовому оставаться заметным.
Эта цветовая схема веб-сайта увеличивает воздействие главной страницы на посетителей, повышая конверсию.
Используемые цвета: Тирийский фиолетовый (#4F0341), белый (#FFFFFF)
23. Бежевый и красный
Из-за цветовых трендов некоторые оттенки прочно ассоциируются с определенной эпохой. Если вам нравится тема 90-х, рассмотрите цветовую палитру веб-сайта Pertinens для вдохновения.
Сайт использует бежевый в качестве основного цвета и красный в качестве акцента. Использование красного цвета на почти пустом веб-сайте позволяет яркому цвету легко привлекать внимание посетителей.
Бежевый вызывает сильное чувство ретро, так как многие электронные устройства старой школы окрашены в этот цвет. Кроме того, ярко-красный был популярным цветом в 9-м веке.0 с.
Чтобы сделать сайт более интересным, компания Pertinens добавила офисную иллюстрацию 90-х годов. Это умный способ украсить веб-сайт, сохраняя при этом единообразие темы и цветовой схемы.
Используемые цвета: Светло-бежевый (#FDF8F0), малиновый (#F0122D)
24. Оттенки синего, белый и красно-фиолетовый
Использование ярких цветов может сделать ваш сайт властным. Чтобы добиться визуального баланса, сочетайте яркий акцентный цвет с ненасыщенной цветовой палитрой.
Например, на веб-сайте сорсинговой компании Imprint Genius в качестве акцентных цветов используются ярко-синий и красно-фиолетовый. Он использует бледно-голубой цвет в качестве фона, чтобы обеспечить резкий контраст. Контрастные цвета добавляют глубины изометрическому веб-дизайну.
Использование ярких тонов на бледно-голубом фоне также помогает выделить иллюстрацию. Несмотря на свою утонченность, красно-фиолетовый выделяется благодаря прежде всего холодной цветовой палитре.
Эта цветовая палитра делает домашнюю страницу легкой, но привлекательной.
Используемые цвета: Бледно-голубой (#EFFAFD), ярко-синий (#4A8BDF), баклажанный (#A0006D)
25.
Бирюзовый и белыйЕсли вы не можете выбрать между синим и зеленым, выберите бирюзовый . Бирюзовый обладает свойствами двух цветов, что делает его идеальным для экологически чистой технологической компании, такой как Prinoth.
Цветовая схема веб-сайта чистого движения Prinoth состоит из бирюзового и белого цветов. Бирюзовый производит утонченное и знающее впечатление, соответствующее этому веб-сайту, который предлагает инновации с нулевым уровнем выбросов.
Несмотря на то, что объекты на переднем и заднем плане имеют бирюзовый цвет, разные оттенки делают их различимыми. Глубокий бирюзовый фон позволяет выделять элементы переднего плана более светлых тонов. Использование светло-бирюзового и белого цветов делает CTA и текст более заметными.
В целом, эта минимальная цветовая схема идеально подходит для аккуратного и современного веб-сайта.
Используемые цвета: Кардинно-зеленый (#0C1A1A), темно-бирюзовый (#6ACFC7)
26. Светлый и красновато-оранжевый
Как CIRCUS inc. демонстрирует, иногда вам может понадобиться только один цвет для вашего сайта. Маркетинговая компания использует красноватый и светло-оранжевый цвета для своего китайского веб-сайта.
Разница в оттенках позволяет оранжевым оттенкам выглядеть различно, несмотря на то, что они одного цвета. Эта комбинация также напоминает китайский флаг, сохраняя единообразие темы сайта.
Сочетание двух ярких цветов делает сайт живым и смелым. Что касается акцентных цветов, компания просто выбирает черный и белый цвета, чтобы контрастировать с ярким фоном. Эти нейтральные цвета не отвлекают и помогают сохранить теплый тон сайта.
Используемые цвета: Orange (#FFAB00), Harley Davidson Orange (#DD2E18)
27. Белый, фиолетовый и оранжевый
Плоский дизайн сайта в последнее время стал популярным среди компаний. Этот тип дизайна подходит для профессионального, но неформального веб-сайта. Однако выбор плоских цветовых схем веб-сайта может быть затруднен из-за ограничений дизайна.
Плоские веб-сайты обычно минималистичны, с яркими цветами на нейтральном фоне. Обычно они исключают любые оттенки или оттенки.
Если вам нравится эстетика плоского веб-дизайна, загляните на сайт Милы. Цветовая схема веб-сайта французской компании по недвижимости состоит только из трех цветов — белого, фиолетового и оранжевого.
Фиолетовый и оранжевый цвета сочетаются с этим плоским веб-сайтом, придавая ему больше яркости. Использование фиолетового цвета для призывов к действию на обычно простом веб-сайте эффективно привлекает внимание посетителей.
Используемые цвета: Белый (#FFFFFF), оранжевый закат (#FF5841), красно-фиолетовый (#C53678)
28. Желтый, коричневый и фиолетовый
Если вы ищете уникальные цветовые схемы для веб-сайта, рассмотрите Цветовая палитра сайта-портфолио Келси Дейк. Иллюстратор осмеливается сочетать разные яркие цвета, делая сайт веселым и живым.
Цветовая гамма сайта состоит из коричневого и желтого цветов. Коричневый — это расслабляющий цвет, что делает его отличным вариантом для контраста с более агрессивными цветами, такими как желтый.
Для разнообразия художник также разместил на своей домашней странице две фиолетовые иллюстрации. Фиолетовый лучше всего сочетается с желтым, потому что эти цвета находятся на противоположных сторонах цветового круга.
Используемые цвета: Sunglow желтый (#FFD43A), пекарский шоколад (#582C12), средний фиолетовый орхидеи (#D668E3)
29. Deep Purple, Orange, Red и Pink
сайт слишком кричащий. Тем не менее, веб-сайт Inside the Head остается заниженным с четырьмя основными цветами — темно-фиолетовым, оранжевым, красным и розовым.
Интересно, что основные цвета этого веб-сайта различаются в зависимости от страницы. Что касается целевой страницы, то она использует все цвета почти равномерно.
Inside the Head имеет простую компоновку и дизайн, что позволяет использовать сложные цветовые схемы веб-сайта. Использование большого количества ярких цветов может усложнить сайт, отвлекая внимание посетителей от содержимого сайта.
Использование белого цвета для текста и кнопок навигации также сохраняет удобство использования сайта. Для веб-сайта, который полагается на навигацию пользователя, жизненно важно представлять информацию.
Используемые цвета: Темно-красный (#8E0D3C), черная смородина #1D1842), оранжевый (#EF3B33), розово-розовый (#FDA1A2)
30. Коричневый и бежевый для цветовой схемы своего веб-сайта. И коричневый, и бежевый — естественные цвета, создающие ощущение органичности и расслабления.
Бежевый – нейтральный цвет, но коричневый в сочетании дает прежнюю теплоту. Результатом такого сочетания является уютная и домашняя цветовая палитра.
Эта цветовая схема также повышает ценность домашней страницы. Посетители веб-сайта могут узнать тон бренда компании через цвета веб-сайта.
Кроме того, для облегчения навигации на веб-сайте используются темно-серые тексты и значки.
Используемые цвета: Narvik (#EAE7DD), коричневый Sorrell (#99775C)
Заключение
Цветовые схемы веб-сайта имеют важное значение в дизайне веб-сайта. Правильные цветовые сочетания делают ваш сайт эстетически привлекательным и предлагают другие преимущества.
В этой статье мы обсудили, почему выбор правильных цветов жизненно важен для вашего сайта. Мы также предоставили 30 цветовых схем веб-сайта для вашего вдохновения.
Помните, что ваш веб-сайт также должен работать хорошо, чтобы обеспечить наилучшее взаимодействие с пользователем. Используйте надежный хостинг, чтобы ваш сайт всегда был быстрым и доступным.
Узнайте больше о дизайне веб-сайтов
10 Лучший дизайн веб-сайта для вдохновения
Лучшие практики веб-дизайна для привлечения большего числа посетителей веб-сайта
Как сделать веб-сайт удобным для мобильных устройств
Тестирование удобства использования веб-сайта
Часто задаваемые вопросы о цветовых схемах веб-сайта
В этом разделе приведены ответы на распространенные вопросы о цветовых схемах веб-сайтов. Если у вас все еще есть вопросы, не стесняйтесь оставлять комментарии ниже.
Сколько цветовых схем должно быть на веб-сайте?
В идеале веб-сайт должен иметь только одну цветовую схему, включающую до четырех цветов. Использование слишком большого количества цветов может сделать ваш сайт сложным.
Мы рекомендуем использовать три цвета, чтобы соблюсти правило дизайна 60-30-10. Используйте 60 % основного цвета, 30 % второстепенного цвета и 10 % акцентного цвета, чтобы ваш веб-сайт выглядел сбалансированным.
Как найти точные цветовые схемы на веб-сайте?
Чтобы извлечь цвет из снимка экрана, используйте Dopley. Этот веб-сайт предоставляет подробную информацию о цвете, включая его значение, комбинации и различные оттенки. Чтобы извлечь цвет с помощью URL-адреса веб-сайта, используйте Alwane.io. Однако, в отличие от предыдущего сайта, этот веб-инструмент предоставляет меньше информации о цвете.
Арис — страстный ИТ-специалист и энтузиаст WordPress. Он любит делиться своими знаниями и вдохновлять людей начать свое онлайн-путешествие. Когда он не работает и не ведет блог, Арис любит смотреть обзоры гаджетов и рисовать случайные каракули.
Еще от Ариса Б.
50 лучших цветовых схем веб-сайтов 2023 года
Вам когда-нибудь казалось, что определенные цветовые схемы веб-сайтов просто привлекают все внимание? Как и в любом другом аспекте веб-дизайна, есть цветовые схемы, которые более популярны, чем другие. Яркие цвета, строгие палитры и даже некоторые несоответствующие схемы — элементы цвета, которые находятся в тренде.
Вот некоторые из лучших цветовых схем веб-сайтов (в произвольном порядке). Для каждого из них мы также делимся цветовыми кодами, составляющими ключевые элементы дизайна, так что с этими цветовыми схемами тоже легко поиграть!
Одной из самых больших тенденций в цветовых схемах, которую вы можете заметить, является использование темных доминирующих цветов и фона, а также оттенков золота и ярко-красных или розовых оттенков для акцентов. Эта темная/светлая комбинация представляет собой эволюцию черного и красного во многих минималистичных дизайнах, созданных несколько лет назад, с более современным оттенком.
Вот несколько замечательных примеров правильного выбора цвета, которые вдохновят вас на следующий проект.
Более 2 миллионов цифровых ресурсов с неограниченным количеством загрузок
Получите неограниченную загрузку более 2 миллионов дизайнерских ресурсов, тем, шаблонов, фотографий, графики и многого другого. Envato Elements начинается с 16 долларов в месяц и является лучшей творческой подпиской, которую мы когда-либо видели.
Графические шаблоны
Логотипы, печать и макеты
Шрифты
Без засечек, рукописный шрифт и многое другое
Графика
Значки, векторы и многое другое
Исследуйте ресурсы дизайна
1. Маркетинговые партнеры TikTok
#000000#74f0ed#ea445a
Вы когда-нибудь смотрели на бренд или веб-сайт и думали: «Эти цвета не совпадают?» …но это нормально? Это именно то, что вы получаете с этой модной цветовой схемой от TikTok. Это модно отчасти из-за самого бренда и доминирующего использования платформы. Но мы также начинаем видеть, что многие другие веб-сайты и компании используют аналогичные цветовые схемы.
2. Смелость от природы
#172d13#d76f30#6bb77b
С темно-зеленым фоном, это вариант темного режима. Пара акцентных цветов, светло-зеленый и оранжевый, являются хорошим балансом, который делает эту цветовую комбинацию легкой, легкой для чтения и понимания. Рекомендуется использовать более яркие цвета, когда вы выбираете темный фон, чтобы упростить чтение и задать правильный тон для проекта.
3. Амур
#5ac3b0#de5935#f7cd46
Amour имеет еще одно интересное трио цветов, которые, возможно, не ожидаются вместе, но работают исключительно хорошо. Не сходство между красным и зеленым с TikTok, а золотисто-желтый и белый фон, который действительно меняет все ощущение того, как эти цвета вступают в игру. Если вы перейдете на этот сайт, вы увидите, что эта группа цветов смещается и изменяется в анимации, чтобы соответствовать банкам, но дизайн никогда не теряет своей основной цветовой палитры.
4. Подлинная сводка
#fdf5df#5ebec4#f92c85
Пастельные цветовые палитры возвращаются с мягкими, но привлекательными оттенками, которые создают баланс и гармонию. Здесь бежевый и синий восхитительны с несколькими более яркими акцентными цветами, которые помогают перемещать взгляд по дизайну. Просто имейте в виду, что вы можете столкнуться с проблемами контраста с более мягкими палитрами, поэтому убедитесь, что цвета фона и переднего плана достаточно разнообразны.
5. Фестиваль трансформации
#abf62d#d6a3fb
Яркие, почти кричащие неоны могут иметь большое влияние, как показывает эта цветовая схема. В то время как зеленый лайм считается некоторыми нейтральным цветом, он совсем не сочетается с ярко-фиолетовым и смелым типографикой. Все в этом цвете и эстетике кричит: «Посмотрите на меня!»
6. Банкифай
#fecd45#2568fb
Золотые оттенки с ярко-синими оттенками — востребованная цветовая схема из-за ощущения яркого света, который легко читается и понимается. (Эта цветовая схема также может быть инвертирована для получения другой, но не менее интересной палитры.) Приятно здесь то, что синий помогает внушить чувство доверия с помощью привлекательного тона желтого.
7. Сигурд Леверенц
#a0aecd#000000#ffffff
Дизайн Sigurd Lewerentz утонченный и интересный. Он объединяет основные черные и белые элементы с серо-голубым, который служит как цветом фона, так и наложением для элементов, которые не активируются на экране. Эта современная цветовая схема сочетает в себе пару последних цветовых тенденций — черно-белую палитру и приглушенную или пастельную тему.
8. ГольфСпейс
#6e6e6e#bcfd4c
Еще одна красивая цветовая схема с черными и белыми (и серыми) элементами сочетает их с салатовым акцентом для акцента и современного прикосновения. Глубокий серый фон с ярко-зеленым — это не то, что вы можете сразу соединить, но как только вы увидите его в действии, эти цвета станут блестящей парой. (Это новый вариант желтого и серого вариантов, которые были цветами года по версии Pantone в 2021 году. )
9. Студия Симпатико
#1a2238#9daaf2#ff6a3d#f4db7d
Studio Simpatico выводит темно-синий и красный на новый уровень с дополнительными акцентными цветами для более широкой палитры, которая бросается в глаза. У каждого цвета есть назначение — ключевое для палитр с большим количеством опций — и одинаковая насыщенность цвета делает их совмещенными. Каждый из акцентных цветов имеет похожее ощущение в диапазоне средних тонов, не будучи слишком тусклым или ярким.
10. Я взвешиваю сообщество
#9cf6fb#e1fcfd#394f8a#4a5fc1#e5b9a8#ead6cd
Яркая и яркая — пожалуй, так можно описать цветовую схему этого веб-сайта от I Weigh Community. Трехцветная схема распадается на шесть отличных вариантов с использованием оттенков каждого оттенка. Результат просто ошеломляющий, не перегружая вас цветом. Это техника, которую можно использовать для большего количества дизайнов для современного вида с большим количеством цветов.
11. Персу
#490b3d#bd1e51#f1b814
Persoo использует цветовую комбинацию, которую вы, вероятно, не стали бы пробовать, не увидев сначала. Отчетливое цветовое трио имеет несколько женственную атмосферу и в то же время кажется легким. Выбор цвета является разрушительным для веб-сайта, потому что финансовые инструменты и инструменты электронной коммерции часто придерживаются безопасной цветовой палитры, основанной на синих тонах.
12. Уродливые напитки
#00abe1#161f6d
Моно-синие схемы никогда не выйдут из моды. Это сочетание темного и светло-синего от Ugly Drinks показывает, что синий тоже может быть забавным. Простой цветной фон доставляет удовольствие и делает остальную часть дизайна легкой для чтения и понимания. Это также отличный внешний вид, который отличается от распространения белых или фотофонов и заголовков героев среди многих дизайнов веб-сайтов.
13. Основание Taproot
#00a9d8#0d9edf#259b9a
Taproot Foundation использует одну из лучших и самых ярких цветовых схем веб-сайтов. Сочетание желтого, синего и ярко-зеленого вместе объясняет различные аспекты группы, помогающей некоммерческим организациям. Это не цветовая схема веб-сайта, которую вы часто видите, но яркий цвет с белым фоном — это в основном модный вариант.
14. Омега-дрожжи
#f7f7f7#7da2a9
На первый взглядOmega Yeast не выглядит так, будто у него есть цветовая палитра, кроме черного и белого, но дизайн этого веб-сайта делает то, что является большой идеей в цветовых трендах. Цветовая схема основана на основном изображении — в данном случае на видео — а не на фоне или красочных элементах пользовательского интерфейса. Эта цветовая тенденция становится все более распространенной, потому что дизайнеры используют полноэкранные изображения, чтобы рассказать историю бренда.
15. Фермерская еда
#ffffff#a7bc5b#8da242
Farm Food использует простую, естественную палитру с белым минималистичным фоном и яркой оливковой зеленью, чтобы привлечь внимание. Кроме того, палитра имеет монотонный оттенок со светло- и темно-оливковыми элементами. (Проще всего увидеть это изменение цвета в состоянии наведения на кнопку. ) Возможно, это не та цветовая пара, к которой вы пришли первой, но она бросается в глаза.
16. Джебсен Карьера
#3fd2c7#99ddff#00458b
Jebsen Careers использует приглушенные оттенки синего и зеленого для создания удивительных цветовых наложений и элементов дизайна с более насыщенными цветами. Комбинация отлично работает на белом фоне и показывает, что вы можете сделать, работая с вариациями одного и того же цвета. Темно-синий цвет, используемый для текстовых элементов и логотипа, еще больше усиливает общее использование цвета.
17. IC Creative
#fb8122#1d2228#e1e2e2
IC Creative использует наложение темного цвета — черного, который на самом деле не черный — с ярким акцентом и большим количеством белого для создания привлекательной сцены. Цветовые наложения почти всех оттенков — основная тенденция в цвете веб-сайтов, а насыщенный черный вариант, такой как здесь, — хороший способ дать другому контенту много места на экране. Просто обратите внимание на крупный заголовок и яркие акценты и призывы к действию.
18. Отель Мангров
#d48166#373a36##e6e2dd
В то время как яркие цветовые палитры практически доминировали в дизайне веб-сайтов в течение нескольких лет, в некоторых проектах наблюдается переход к более приглушенным палитрам. Мясистый тон Mangrove Hotel теплый и хорошо дополняет содержание. (Этот же цвет также появлялся в некоторых маркетинговых сообщениях Twitter.)
19. Сон
#051622#1ba098#deb992
Slumber отлично использует цвет года Pantone — классический синий — изображения в приложении и темные тона фона и логотипа. Сочетание с золотым и зеленым очень модно и элегантно и соответствует теме ночи и сна.
20. Атланта Пивоварение
#e40c2b#1d1d2c#f7f4e9#3cbcc3#eba63f#438945
Atlanta Brewing также использует доминирующий красный цвет с множеством других цветовых акцентов. Обратите внимание, что палитра является не только частью дизайна веб-сайта, но и распространяется на упаковку продукта. У них довольно широкая палитра с основными цветами в качестве основы и насыщенным черно-белым фоном.
21. Кафе Солнечная улица
#5c6e58#8aa899#f2d349
Кафе «Солнечная улица» отличается яркой цветовой палитрой, идеально сочетающейся с образами и языком дизайна. Зеленые и желтые вместе — необычное сочетание, но оно выглядит дружелюбно и идеально подходит для дизайна этого места для завтрака и обеда. Цветовая тема также красиво подчеркивает образы еды.
22. Знак отличия
#000000#181818#2cccc3#facd3d#5626c4#e60576
Distinction использует ту же самую полностью черную основу для своей цветовой палитры с радугой акцентных цветов. Если вам нужна широкая цветовая палитра, это способ эффективно использовать тренд.
23. Питтори ди Синема
#fdd935#000000
Минимализм может быть и полноцветным, о чем свидетельствует Pittori di Cinema. Ярко-желтая схема с черным — распространенный вариант высокоцветного минимализма. Чем ярче цветовая палитра для этого стиля, тем более модным он кажется.
24. Мы (Сердце) UX
#e1f2f7#ef0d50#eb3a70#e5bace
We (Heart) UX использует простую цветовую палитру с бледно-голубым фоном — прекрасный выбор — и оттенки розовато-красного для основного художественного элемента. Сочетание этих цветов с причудливым гео-стилем выглядит модно, современно и просто забавно.
25. Гордый и потрепанный
#1f3044#fb9039#646c79
Proud & Torn использует ту же концепцию цвета драгоценных камней с чуть более приглушенной цветовой комбинацией. Более тонкая цветовая палитра помогает создать визуальный интерес к веб-сайту, на котором много бесцветных изображений.
26. Баобла
№ 56642а № 849531 № 92а332
Baobla имеет забавный градиент в монотонной цветовой гамме. Этот стиль цветовой палитры идеально подходит для новых брендов или продуктов, или если вы хотите произвести сильное впечатление с помощью яркого оттенка.
27. Центр экстренной помощи женщинам и девочкам
#faf0dc#0b4141#ff6864
Центр неотложной помощи для женщин и девочек выбрал цветовую палитру, которая не слишком женственна, что помогает придать больше силы своему посланию с помощью ярких цветов. Выбор цвета отличается высокой контрастностью и удобством для глаз и с точки зрения удобочитаемости. Выбор яркого акцента моден и добавляет акцент этому элементу.
28. Жан-Батист Калоя Портфолио
#150734#0f2557#28559a#3778c2#4b9fe1#63bce5#7ed5ea
Jean-Baptiste Kaloya превращает, вероятно, самый популярный цвет в веб-дизайне в собственную монотонную палитру с различной степенью синевы. Также обратите внимание на мягкие градиенты светло-голубого цвета.
29. Игорь
#000000#fefefe#fdee30
Игорь демонстрирует, пожалуй, самую популярную цветовую палитру веб-сайтов 2019 года — черный, белый и желтый. Эта цветовая палитра, хотя и представлена в различных оттенках, широко популярна. Это сочетание, пожалуй, одно из самых привлекательных.
30. Ковбойский велосипед
#000000#fa255e#c39ea0#f8e5e5
В наборе Cowboy Bike использована черная и яркая цветовая палитра, которая сразу же привлекает внимание. В то время как большинство сайтов используют черный цвет только для текста, этот дизайн фактически включает его в яркую монотонную палитру.
31. Габриэль Долан
#e8eae3 #373833 #fa2742
На веб-сайтеГабриэль Долан используется тенденция серо-бело-яркой цветовой палитры. С явным отсутствием цвета для большей части дизайна яркий цвет, кажется, спрыгивает с экрана. Он создает правильную фокусную область и уровень контраста, поэтому это популярный вариант цветовой схемы.
32. Пиксельная кладовая
#9e15bf#4ac6d2
Pixel Pantry использует особую цветовую пару, чтобы продемонстрировать эту тенденцию — фиолетовый и бирюзовый. Сочетание этих двух цветов для создания палитры почти нереально. Вы найдете варианты этой схемы почти везде, куда бы вы ни повернулись.
33. Одиннадцать растений
#5daa68#3f6844#faf1cf
Eleven Plants использует нейтральную цветовую схему, гармоничную и удобную для восприятия. Зеленый хорошо сочетается с содержанием, а цветовые сочетания просты и очаровательны.
34. Кварц
#ee7879#2a3166#f4abaa#cae7df
Qvartz использует один из самых неожиданных трендовых цветов года, имитируя многие другие проекты. С розовым текстом, розовыми цветными блоками и сочетанием ярких и мягких цветов эта палитра несколько женственна, но не слишком.
35. Sheerlink от RTX
#4a2c40#e9bd43#7d3780
Sheelink By RTX использует современный градиент и смелую расцветку, чтобы привлечь внимание к своему продукту. Цвета глубокие и угрюмые, а бордово-фиолетовый имеет отчетливое ощущение царственности и тайны.
36. Пуэрто-Мате
#5ce0d8#01345b#ffcf43
В коллекцииPuerto Mate используются трендовые цвета, яркие, но не броские. Поскольку центральная панель темно-синяя, внешние яркие цвета немного меньше бросаются в глаза. (Только представьте, что эти оттенки переворачиваются в разных местах дизайна.)
37. Портфолио Лоика Шампанья
#141824 #ffb600#0049ff
В портфолио Loic Sciampagna используется одно из лучших сочетаний синего и желтого цветов, которые только можно найти. Контрастные оттенки просты, элегантны и привлекают простым оттенком светлого, более яркого синего.
38. Канаталь
#182978 #6688cc #acbfe6
Canatal удачно использует в этом дизайне фирменные тройные синие цвета. Это пример того, как использовать монотонную цветовую палитру, не будучи скучным.
39. Цифровой FFWD
#f1e821#487afa#23c0ad
FFWD Digital использует яркие цвета стильно и классически. На бумаге использование этого трио цветов на темном и светлом фоне может показаться неудобным, но здесь оно плавное и красивое.
40. Tappezzeria Novecento
#191919#fab162
Tappezzeria Novecento использует цветовую схему, от которой многие уклоняются, и она работает. Яркое сочетание оранжевого и черного — простое и привлекательное. Цвета контрастируют ровно настолько, чтобы все легко читалось. Также приятно, что фирменные цвета присутствуют и на изображениях.
41. Тев
#252669#4ecb4a
Tev совсем не скучный с лаймовым фоном и двухцветным наложением. Это смело, а зеленый цвет заставляет задуматься о деньгах — именно для этого и создан сайт.
42. Ниша и культ
#4e3883#ffddcc
Niche & Cult использует мягкие оттенки для косметического бренда с более женственным ощущением. Нежно-розовый цвет напоминает оттенки кожи и чистый холст для макияжа, а ярко-фиолетовый соответствует настроению сайта.
43. Системный документ
#001730#4ad7d1#fe4a49
Sysdoc создает новую версию базовой палитры красного, синего и зеленого цветов с более яркими и менее насыщенными вариантами красного и зеленого. Палитра сильная и мягкая и подходит практически к любому другому набору элементов.
44. Обжарочные аппараты для кофе Veneziano
#f6f4f2#425664#c6ad8f
Veneziano Coffee Roasters восходит к более приглушенной палитре с серо-голубым и золотым сочетанием, которое выглядит утонченно и стильно. Цвета хорошо сочетаются с изображениями веб-сайта и создают нужное ощущение.
45. Лучшая энергия
#11abc1#df3062#f5b935#4bac3f
Better Energy использует яркие цвета, связанные с природой, взятые из соответствующих изображений, чтобы создать забавную палитру, чтобы рассказать историю о чем-то, о чем может быть не очень интересно говорить.
46. Взрыв Галактики
#0f0c24#a350a3#c1436d
Мы не смогли пройти обзор модных цветовых трендов, не взглянув на палитру 80-х. Кажется, что все из 1980-х годов в тренде, включая цвета, используемые для Blast Galaxy, обычно наблюдаемую комбинацию синего, фиолетового и розового с неоновым свечением.
47. Портфолио Кайла Декера
#f5f5f5#8db48e#4d724d
Портфолио Кайла Декера — это еще один веб-сайт с цветовой схемой, которая сияет, потому что она такая простая. Он использует комбинацию нейтральных цветов и только один истинный цвет, чтобы сфокусировать взгляд пользователя.
48. Подмигиваю
#212221#1181b2#ddedf4#44449b
Awink Websolutions также использует монотонную цветовую схему с различными оттенками синего. (Синий — популярный вариант, когда речь идет о монотонных вариантах.) Этот вариант немного отличается благодаря более глубоким и темным акцентам. Кроме того, темные и светлые области экрана почти играют оптическую иллюзию, заставляя вас думать, что здесь больше цветов, чем есть на самом деле.
49. Микропивоварня Арчибальда
#d81c23#4fa8c2#d97441#d29849
Archibald Microbrewery использует радугу цветов, но палитра удивительно красива. Благодаря цветам с одинаковой насыщенностью и визуальному следованию теме, все получается довольно органично.
50. Индеги
#45af2a#3fddc1#d56c06
Indegy использует ярко-зеленый цвет на фоне большого количества фотографий и ярких цветов. Простой цвет, сочетающийся в основном с серым и белым, придает дизайну современный оттенок и помогает пользователям ориентироваться в содержимом. (Есть также бирюзовые и оранжевые акценты для тонких всплесков яркости в других местах.)
51. Рюкзак
#ad4328#b65741
Knapsack использует ярко-красную цветовую схему с градиентами, чтобы добавить интереса к цвету, который может быть сложным в использовании. Это работает, потому что не так много энергичных визуальных эффектов, конкурирующих с яркой палитрой.
52. Демисол
#16519f#f07e74#f8dd2e#4fcbe9
В Demisol используется слишком много цветов и слишком много крупных элементов, и в любом случае это потрясающе.