Подбор цветовой схемы для сайта: Карта Сайта ColorScheme.Ru

Интересный факт

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

Общепринятые эмоциональные ассоциации

• Красный. Возбуждающий тон, ассоциируется с властью, энергией, молодостью, страстью. Больше всех привлекает внимание, при помощи него можно о чем-то предупредить. Если на веб-странице слишком много красного — человек попытается как можно быстрее «убежать» с нее. Когда данный колор необходим, его можно использовать умеренно или применять более нежные оттенки.
• Розовый. Романтика, женственность, нежность. При неправильном использовании намекает на неформальные отношения, поэтому неприменим для корпоративных порталов или спортивных веб-ресурсов.
• Оранжевый. Энергия, дружелюбие, интерес, бодрость. Эмоции и ассоциации: открытость, активность, уникальность. Создает ощущение движения, творчества.
• Желтый. Солнце, радость, счастье. Ярко-желтый прибавляет энергию, нежный — комфорт, темный — погружает в старину, добавляет авторитета.
• Зеленый. Здоровье, стабильность, рост, природа. Являясь мостом между теплыми и холодными красками (он получается из смешения синего и желтого), обладает расслабляющим влиянием синего, сохраняя энергичность желтого. Темные оттенки говорят о финансах и богатстве.
• Синий. Спокойствие, открытость, надежность, непоколебимость. Влияние на психику очень зависит от его нюанса. Светлые тона более дружелюбны, а темные вызывают печаль. Нейтральный синий отлично подходит для корпоративных проектов.
• Голубой. Мирное небо, терпимость, надежность, профессионализм.
• Фиолетовый. Тайна, романтика, роскошь, мистика и т.п. Это тона королевского величия, предметов роскоши, окутанных тайной. Светлые тона более романтичны, а темные — таинственны.
• Черный. Нервозность, опасность, власть. Колор считается нейтральным, но он может вызвать совершенно противоположные ассоциации в зависимости от того, с какими цветами гармонирует. Если черного много — он ассоциируется со злом, особенно в сочетании с красным. Если черного в меру, то он говорит об изысканности и элегантности (особенно в сочетании с белым).
• Белый. Простота, чистота, доброта, воздух. Самый популярный колор для фона веб-проекта. Как правило, текст легко читается с белого листа, и на веб-странице остается много воздуха и легкости. Он выгодно оттеняет другие краски.
• Серый. Самая нейтральная краска, которая не вызывает отрицательных эмоций. Говорит о меланхолии, спокойствии. Темно-серый может вызвать грусть, но любые его тона при правильных сочетаниях становятся мощными инструментами в руках опытного дизайнера.
• Коричневый. Уверенность, спокойствие, комфорт, долговечность.
• Бежевый. Фоновый тон, традиционный, подчеркивает сопровождающие его краски. Он изменяется в зависимости от окружающих его тонов.
• Слоновая кость, кремовый. Элегантность, комфорт, минимализм. Приравнивается к белому в восприятиях, но тон его намного теплее.

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

Правила сочетания цветов для сайта — ориентируемся на интуицию

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

• Белый или черный: любые сочетания. Наилучшие пары, которые «дружат»: белый + черный, а также синий или красный. В случае с черным пару составит белый, яркий оранж, нежно-розовый, яркий или темный желтый, а также красный.
• Серый: нюансы красного, а также фиолетового и синего.
• Беж: коричневый, бирюза, синий, красный, изумрудный.
• Коричневый: голубой, беж, роза, изумруд.
• Розовый: коричневый, мятный, бирюза.
• Красный: темно- или нейтрально-зеленый, светло-желтый, приглушенно-синий, строгий серый.
• Зеленый: оранж, желто-коричневый, кремовый.
• Оранжевый и желтый: синие и фиолетовые краски.
• Темно-синий: коричневый, серый, светло-желтый, голубой, оранж,
• Голубой: строгий серый, красный, коричневый, роза, оранж, желтый, рубин, зеленый.
• Фиолетовый: серый, золотисто-коричневый, светло-желтый, неброские оттенки голубого и зеленого.

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

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

Принцип первый — триада

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

Принцип второй — двойная система

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

Принцип третий — аналогия

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

Принцип четвертый — раздельное

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

Принцип пятый — прямоугольник

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

Шестой принцип — квадрат

Самое динамичное сочетание, яркое, энергичное.

Как подобрать цвета для сайта при помощи программ

Существует несколько онлайн-сервисов, которые помогают дизайнерам в работе: Adobe Color, Paletton, Flat UI Color Picker, Color Palette Generator, Color Scheme и другие. Каждый онлайн-сервис работает на основе спектрального круга. Пользоваться инструментарием можно бесплатно. Веб-дизайнер легко и максимально быстро подберет сочетающиеся друг с другом оттенки.

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

1. Светлый фон — это больше пространства и воздуха, а черный и темный фон подчеркивают элегантность.
2. Если вы используете темный фон — не применяйте основной шрифт желтого, голубого, синего, красного оттенков. Текст будет нечитабельным.
3. Для серьезного веб-проекта следует использовать однотонную подложку.
4. Для информационных веб-ресурсов с большим количеством информации более приемлемы светлые оттенки (белый, беж, слоновая кость).
5. На светлой основе хорошо читается текст серых или черных оттенков.
6. Фон и шрифт на нем должны быть контрастными.
7. При выборе основного цвета и ему сопутствующих руководствуйтесь тематикой веб-ресурса (зеленый — медицина, природа, финансы; розовый — женская; коричневый и желтый — пищевая промышленность и т.д.). Например, нелепо будет смотреться детский журнал на черном фоне или веб-проект про автомобили Лексус — на розовом.

Еще несколько правил по выбору цветовых палитр для сайта

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

Примеры хороших и плохих сайтов

Основные ошибки: слишком много красного, основной товар не ассоциируется с цветовым решением.

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

Этот вариант без комментариев.

Хорошее, приятное сочетание цветов. Зеленый цвет стандартно ассоциируется с финансами.

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

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

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

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

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

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

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

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

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

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

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

Чтобы решить, какой будет ваш основной цвет, вы можете пройти тест «Какого цвета должен быть ваш брендинг?» подобрать цвет для вашей идеи. Проводите исследования конкурентного рынка, используйте для вдохновения такие сайты, как Behance или Dribbble. Во время исследования вы можете найти оттенок, который понравится, выбрать этот цвет с помощью любого инструмента для выбора цвета, такого как Eye Dropper, и создать список избранных, который предоставит вам широкий спектр вариантов.

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

Количество цветов в схеме: рекомендуется три

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

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

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

Дополнительный цвет (а) и акцентный цвет

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

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

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

Нейтральные цвета: белый, черный, серый

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

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

Места, где вы используете определенный цвет

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

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

Упомянутые инструменты для работы с цветом

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

Colorsinspo

Culrs

Как выбрать Цветовая схема для вашего сайта

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

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

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

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

Выбор цвета для вашего сайта?

Когда вы размещаетесь на DreamHost, вы получаете бесплатный доступ к нашему инструменту WP Website Builder и более чем 200+ отраслевым стартовым сайтам!

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

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

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

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

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

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

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

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

Точно так же желтый цвет в золотых арках McDonald’s, который встречается в 120 странах и территориях по всему миру, ассоциируется со счастьем практически во всем мире. Однако, в зависимости от того, где расположены более 36 000 ресторанов, McDonald’s создает свою цветовую схему, чтобы удовлетворить культурные предпочтения своих посетителей.

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

Связанные: 14 отличных шаблонов веб-сайтов, которые вы можете использовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучшие целевые страницы не заняты. Они просты, понятны и основаны на хороших дизайнерских принципах. Примените свои новые знания теории цвета, учитывая следующие факторы и советы по дизайну целевой страницы:

• Ваш заголовок выделяется? Помните о цветах фона и никогда не позволяйте вашей цветовой схеме поглотить ваше сообщение.

• Читается ли ваш основной текст? Не бойтесь простого черного на белом! Это не только самая легкая для чтения цветовая комбинация, но и создает чистый, минималистичный вид практически в любом контексте.

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

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

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

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

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

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

Информация в вашем почтовом ящике

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

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

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

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

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

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

20 отличных инструментов для выбора цветовой схемы веб-сайта — Top Digital Agency

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

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

Интернет-инструменты

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

Кулер

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

Дизайнер цветовых схем

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

Любители цвета

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

Color Spire

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

Мгновенные цветовые схемы

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

Color Explorer

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

Поворот цвета

Color Rotate очень похож на 3D-версию Kuler. Интерфейс не совсем интуитивно понятен, но с ним приятно играть!

Color Grab

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

Настольные приложения и виджеты

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

Color Schemer (Mac или ПК)

Color Schemer — это полнофункциональное приложение для создания цветовой палитры. Получите все функции некоторых из самых популярных веб-приложений и многое другое с удобством всегда присутствующего настольного приложения.Безусловно, лучшее настольное решение, которое я нашел.
Цена: 49,99 долларов США

Swatch (Mac)

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

ColourMod (Mac или ПК)

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

Приложения для iPhone

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

Color Expert

«Color Expert — это интерактивное цветовое колесо и библиотека образцов, которая помогает художникам и дизайнерам определять, переводить, фиксировать и демонстрировать цвет».
Цена: 9,99 долларов США

Цвета CliqCliq

«Цвета — это простая в использовании палитра цветов для обнаружения, преобразования и управления цветами и палитрами.”
Цена: 2,99 доллара США

Мой Pantone

Если вы когда-либо были дизайнером полиграфии, вы, вероятно, любите цветные книги, полные образцов Pantone, которые превращаются в радугу из легко просматриваемых цветов. MyPantone предлагает эту функцию в удобстве приложения для iPhone.
Цена: 9,99 долларов США

Цветной поток

«Прекрасный цветовой инструмент для iPhone, Color Stream, позволяет создавать и сохранять цветовые палитры, которые либо создаются с нуля, либо сгенерированы из фотографии, либо даже автоматически сгенерированы с помощью нашего встроенного средства цветовой схемы (который поддерживает аналогичные, монохромные, триада и многое другое!).”
Цена: 2,99 доллара США

Лупа

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

Think Ink: Color Unleashed

«Think Ink — бесплатное приложение для iPhone, которое позволяет вам исследовать цветовые комбинации из системы цветов Дьюи, создавать собственные цветовые палитры и заказывать образцы бумаги в Neenah Paper».
Цена: Бесплатно

Яркая палитра цветов

«Vibrant — это полнофункциональное средство выбора / выбора цвета, которое предоставляет все инструменты, необходимые дизайнеру для определения цветов и цветовых тем и управления ими на ходу.Сделайте снимок цели с помощью встроенной камеры, сожмите и перетащите перекрестие, чтобы выбрать цвет, вращайте цветовое колесо и перемещайте ползунки, чтобы настроить цвет, и коснитесь звездочки, чтобы сохранить новый цвет в палитре ».
Цена: $ 0.99

Заключение

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

50 цветовых схем веб-сайта и способы их использования

Последнее обновление этой публикации: 9 сентября 2021 г.

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

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

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

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

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

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

01. Смелость и смелость

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

02. Шикарный, роскошный и страстный

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

03. Ночные шторы

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

04. Вишнево-красный

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

05. Мечтательные оттенки заката

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

06. Вспышка цвета

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

07. Изящный и аккуратный

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

08. Естественный и вдохновляющий

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

09. Электрическая палитра

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

10. Очаровательный розовый и насыщенные оттенки

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

11. Поп-цвета в стиле ретро

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

12. Футуристические градиенты

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

13. Яркая и бесстрашная

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

14. Землистый и минималистичный

Цветовая палитра Ceramics studio Noni São Paulo идеально отражает их бренд и продукцию.Теплые оттенки коричневого и другие землистые оттенки интернет-магазина сочетаются с красиво оформленными кружками студии. Светло-синий фон дополняет естественные оттенки в сочетании с эффектами параллаксной прокрутки, чтобы сайт выглядел профессионально и качественно.

15. Динамический желтый с черным

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

16. Золотые оттенки

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

17. Пурпурный с оттенками серого

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

18. Кобальтовый синий

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

19. Бесплатные пастельные тона

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

20. Освежающий и естественный

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

21. Теплый с холодными оттенками

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

22. Осенние оттенки

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

23. Глубокий и мистический

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

24. Прохладный и освежающий

От своего логотипа до меню навигации и окна чата Wix продуктовый интернет-магазин Verde Market выбрал прохладную палитру с различными оттенками зеленого и синего. Эффект от цветовой схемы этого веб-сайта является высокопрофессиональным, и его можно легко объединить с несколькими дополнительными оттенками (например, оранжевым цветом Верде), чтобы сделать сайт более динамичным.

25.Веселый и профессиональный

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

26. Классический двухцветный комбо

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

27. Восхитительные детали

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

28. Свет и умиротворение

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

29. Креативная и оптимистичная

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

30. Удивительно поразительный

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

31. Летние ретро-оттенки

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

32. Эффектный черный фон

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

33. Резкий контраст

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

34. Монохромный и металлический

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

35. Акцентные цвета молодости

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

36. Современный и игривый

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

37. Море синего

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

38. Заманчивое разнообразие

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

39. Пастельные тона

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

40. Мрачный и романтичный

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

41. Аппетитные оттенки

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

42. Эклектичный и сбалансированный

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

43. Яркий и веселый

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

44. Палитра в морском стиле

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

45. Женственная и жизнерадостная

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

46. Нейтрально и элегантно

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

47. Основные цвета с игривым поворотом

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

48. Уникальные комбинации

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

49. Органичность и утонченность

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

50. Цветовой оттенок

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

Автор: Jenna Romano

Писатель и эксперт по веб-дизайну

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

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

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

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

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

1. Бренды и идентичность

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

Например, для McDonald’s вы можете мгновенно идентифицировать McDonald’s по их золотому логотипу «M» со сплошным красным цветом в качестве заливки фона.

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

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

В некоторых случаях эти цвета используются даже доминирующе, как, например, в McDonald’s Australia.

McDonald’s Australia

Вот еще несколько примеров:

Кока-Кола Индонезия

Старбакс

2.Для конкретной страны

Страна более или менее похожа на компанию; у них также есть идентификатор, их флаг. Так что также полезно извлечь цветовую схему из самого флага. Хороший пример тому — страница бывшего президента США BarackObama.com.

На веб-сайте (до того, как он был изменен) используемые цвета четко соответствуют флагу США: красный, белый и синий.

Культура, люди и окружающая среда

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

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

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

Африка

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

3. Содержание и контекст

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

• О чем контент?
• А кто, скорее всего, прочитает контент?

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

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

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

Цвета детские и женственные (розовый), но комбинация может быть еще сильнее, если добавить Зеленый, Оранжевый и Пурпурный в дополнение к .

И вот несколько примеров в этом случае.

Balita Theme

Metariza

Заключение

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

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

Как выбрать цветовую схему веб-сайта [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 цвета (которые вы знаете, знатоки грамматики, потому что латинский префикс «три-» означает «три»), которые равномерно распределены по цветовому кругу.

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

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

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

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

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

Соединение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Черный

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

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

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

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

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

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

серый

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

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

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

Белый

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

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

Коричневый

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

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

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

Синий

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

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

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

Зеленый

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

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

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

Желтый

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

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

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

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

оранжевый

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

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

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

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

Красный

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

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

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

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

фиолетовый

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и т. Д.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кстати…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

# b200f8 # ff4247 # ffdb6c # 00545a # 002835

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

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

# 8a211b # b3925f # f0cd95 # 001446 # eaeae2

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

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

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

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

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

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

# fdc3b7 # f3d982 # a7dac9 # 5178b1 # e7f4fd

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

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

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

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

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

# 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. Яркая и игривая

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

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

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

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

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

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

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

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

# 455799 # 5f7add # af6ac6 # f09686 # f7be3e

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

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

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

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

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

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

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

# e85db6 # ea5467 # f2af37 # cdf564 # 6fd862

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

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

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

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

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

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

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

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

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

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

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

# 333333 # a5502f # e36f30 # f2bf20 # 4b7803

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

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

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

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

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

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

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

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

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

#fffafd # fcf3f7 # f8dbe3 # e94363 # 131414

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

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

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

# b63232 # fbf3e4 # 397e77 # cf633d # f7c156

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

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

# f9f5ef # c19a5b # 1f1f1f

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

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

# 48aee3 # 3181b2 # 212221 #ffffff

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

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

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

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

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

#cfdaeb # b9a3c8 # f9daf0 # f7e79c # c2c2c0

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

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

# 619481 # 85714d # 0f344a # 3f4751

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

27. Виртуозный, творческий, продвинутый

# 242441 # dd782f # f4f4f4 # 816359 # a25a2b

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

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

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

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

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

# fff7e2 # fedd87 # f9bf54

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

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

# c9d0fd # 804ef6 # f3b3a0 # 140d41

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

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

# e54360 # f6b733 # 0d2e40 # 4da9af

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

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

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

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

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

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

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

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

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

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

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

# c8ff00 # e0e0e0 # 5301ff # 000000

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

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

# 3060f6 #

a # e8622a # f7c444 # 131516 # 000000

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

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

# 1f2c16 # 757e6d # fDfBf4

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

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

# 4d8b2c # c2d553 # 2d1051 # 282828

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

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

# fdf5f0 # f2a271 # f6cace # 1b262c

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

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

# e9d4c5 # 336b59 # d69e92 # deb99c # fdfaf6

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

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

# a0c3d2 # e94236 # 61c174 # 000000

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

42. Образное, минималистичное

# 7e5dfc # 64d5d6 # 4f5cfc # 3faafb

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

43. Элегантный, классический, современный

# fad565 # ed7768 # 292b37 # ab7c68

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

44. Задумчивый, Причудливый

# 1b2337 # ee724b # f5da7d # 9Caaf2

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

45. Сильный, вдохновенный, радостный

# 000000 # ffeb32 # f1be31 # ef8533 # e5e5e5

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

46. Землистый, органический, надежный

# d9b395 # eee5df # f4b25c # 3a7e6c # 000000

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

47. Шипучий, эффектный и элегантный

# 132d3b # ec7e9a # e24897 # e56731 # eee8e4 # ebc22f

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

48. Комфортный, свежий, изысканный

# 425664 # f6f4f2 # c7af92

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

49. Натуральный, Органический, Землистый

# 000000 # 3b3b3b # 6ad7a6 # 6ed563 # f6c187 # db512f

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

50. Возвышенный, мечтательный

Wonderland — агентство User Experience, которое использует на своем веб-сайте довольно нестандартную цветовую схему, хотя в итоге она работала очень хорошо. Как и следовало ожидать от агентства по дизайну пользовательского опыта, на веб-сайте Wonderland темно-коричневый и серый цвета сочетаются с контрастными цветами, такими как Electric Violet и Brandy Punch Orange, которые, возможно, звучат не так, как будто они хорошо сочетаются друг с другом, но это действительно так! Пять основных цветов, используемых на веб-сайте Wonderland, идеально сочетаются с профессиональной, но игривой атмосферой бренда агентства.

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

И это, ребята, у нас есть для вас сегодня.

Полный текст, полный текст, весь набор цветовых схем веб-сайта.

Хотите узнать обо всем этом дизайне веб-сайтов?

У нас есть друзья!

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

Что это такое и как его сделать?

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

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

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

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

Что такое цветовая палитра веб-сайта?

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

Пример: WordPress

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

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

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

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

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

Например, возьмем синий цвет. Синий обычно заставляет людей чувствовать, что что-то заслуживает доверия и заслуживает доверия. Бренды, которые используют этот цвет в своей цветовой палитре, включают Chase. Я бы сказал, что финансовое учреждение определенно захочет показаться заслуживающим доверия… не так ли?

Пример: Чейз

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

Веб-сайт №1 содержит массу информации, но цвета несовместимы. Шрифт всякие разного цвета, фон размытый, а фото разного размера и качества.

Вы бы проводили здесь много времени? Наверное, нет.

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

Теперь посмотрим на сайт №2:

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

Какой бизнес вы бы выбрали для удовлетворения своих потребностей в технологиях водоснабжения? Sponsored Links

В этом сила цвета.

Основные сведения о цвете

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

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

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

Контраст, дополнение, вибрация

Контраст

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

Пример: Пышный

Дополнение

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

Пример: HostGatorSponsored Links

Вибрация

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

Пример: Огромный

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

Четыре общие цветовые схемы

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

Монохромный

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

Пример: Davroc

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

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

Пример: Slickplan

Аналог

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

Пример: Страховой домкрат

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

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

Пример: Лоренцо Верзини

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

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

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

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

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

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

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

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

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

3. Реализуйте свою цветовую палитру

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

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

Альтернатива: использование автоматизированного решения

Альтернатива — для автоматизированного инструмента брендинга ознакомьтесь с Tailor Brands. Раньше я вручную создавал все свои цветовые палитры, но для многих сторонних проектов я начал передавать их их инструменту брендинга AI.

Следующие шаги

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

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