Сочетание цветов для сайта онлайн: Названия цветов, от Абрикоса до Янтаря

Содержание

Теория цвета: как выбрать правильные цвета для сайта

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

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

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

Как цвет влияет на поведение потребителей

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

В исследовании «Влияние цвета на маркетинг» (Impact of color on marketing) говорится, что использование разных цветов может существенно влиять на настроение и поведение потребителей. Утверждается, что от 60 до 90% покупателей (в зависимости от категории продукта) дают положительную или отрицательную оценку товару, основываясь только на его цвете.

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

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

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

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

Теория цвета

Цветовой спектр

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

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

Основные цвета (Primary Colors) — красный, синий, желтый. Источник — color-wheel-artist.com

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

Вторичные цвета (Secondary colors) — зеленый, оранжевый, фиолетовый. Источник — color-wheel-artist.com

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

Третичные цвета (Tertiary Colors) — сине-зеленый, красно-оранжевый, желто-зеленый, красно-фиолетовый, желто-оранжевый, сине-фиолетовый. Источник — color-wheel-artist.com

Цветовой круг

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

Цветовой круг (цветовое колесо, хроматический круг). Источник — www.ecolourprint.co.uk

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

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

Аналогичные цвета. Источник — www.ecolourprint.co.uk

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

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

Комплиментарные (дополняющие) цвета. Источник — www.ecolourprint.co.uk

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

Триадные цвета. Источник — www.ecolourprint.co.uk

Параметры цвета

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

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

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

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

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

Цветовые ассоциации и психология цвета

Маркетологи Университета Севильи (Испания, Universidad de Sevilla) выяснили, что на поведение потребителей влияет не столько сам цвет, сколько его «уместность и целесообразность» для продукта. Уместность определяют цветовые ассоциации — образы и эмоции, которые человек связывает с определенным оттенком.

О важности цветовых ассоциаций в маркетинге также говорят результаты маркетингового исследования «Влияние цветов продуктов на восприятие уместности логотипа бренда» (The interactive effects of colors and products on perceptions of brand logo appropriateness).

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

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

Красный

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

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

Оранжевый

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

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

Желтый

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

Наиболее эффектно желтый смотрится в сочетании с контрастными цветами.

Зеленый

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

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

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

Синий

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

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

Фиолетовый

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

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

Розовый

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

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

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

Черный

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

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

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

Белый

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

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

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

Есть два основных способа применить теорию цвета для создания эффективных продающих страниц:

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

Как использовать психологию цвета

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

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

Дизайн сайта свадебного салона: нежные пастельные оттенки низкой насыщенности на преобладающем белом фоне

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

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

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

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

Дизайн сайта магазина мужской одежды и аксессуаров: сдержанное сочетание базовых оттенков

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

Как подбирать комбинации оттенков для повышения удобства восприятия информации

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

Например, в ColoRotate есть целая библиотека цветовых схем, которые можно выбирать, сохранять и редактировать с помощью современного 3D инструмента (3D color tool).

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание сайта: сочетаемость цветов — Liqium

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

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

Триады – цвета расположенные на радиусах круга, повернуты относительно друг друга на 1200 (как знаменитая мерседесовская звезда). В триаду входят, например, красный, желтый и синий цвета. Или зеленый, оранжевый и фиолетовый цвета.

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

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

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

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

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

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

Создать свою палитру | LOOKCOLOR

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

Бесплатная программа для телефона Pantone Color Book (для Android) предназначена для создания своей цветовой палитры.

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

Как работать с палитрами? Система PANTONE FASHION + HOME Cotton – это набор цветов для текстиля: одежды и дома. Из этой палитры выбираются модные тона на сезон. Вы можете выбирать оттенки, подходящие к вашей внешности и занести их в отдельный каталог «my colors». Это даст вам возможность всегда иметь при себе набор актуальных цветов.
А чтобы проще было ориентироваться в красках сайт lookcolor.ru постепенно переведет все цвета в систему PANTONE FASHION + HOME Cotton, которая имеет помимо названий (которые разнятся с английского перевода) порядковый номер, например, 12-2102 TCX. Этот номер забивается в строку поиска (search) (опять же в системе PANTONE FASHION + HOME), а затем добавляется в «my colors».

ПОЛЕЗНЫЕ СТАТЬИ НА ЭТУ ТЕМУ (нажать на картинку)

Оставить комментарий

(только на русском языке)

Цветовой круг. Крутая шпаргалка по сочетанию цветов Цветовая подборка

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

1. Использовать известную гамму

На сайте brandcolors.net собрано более 500 сочетаний цветов известных брендов. Яндекс, Google, Burger King используют одну палитру во всех своих продуктах. Эти бренды и их цвета знакомы и любимы многими. Наберите название в строке поиска или полистайте страницу, нажмите на нужный бренд и цвет: его код скопируется в буфер обмена.

2. Выбрать готовую профессиональную палитру

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

Кроме этого, сервис содержит готовую подборку из 24 цветов плоского дизайна. Нажмите слева под названием «Flat Colours» и берите код понравившегося оттенка.

3. Определить палитру цветов понравившейся фотографии или картинки

Этот способ чуть сложнее. Но и эффектнее.

На сайте coolors.co в верхней панели слева найдите значок фотоаппарата, нажмите на него. Откроется окно загрузки изображения.
Можно выбрать фото или картинку с понравившейся цветовой гаммой с компьютера или скопировать ссылку в пустую графу.
Сервис определит сочетание цветов (внизу под загруженной картинкой).
Изменять отдельные цвета этой палитры можно, отмечая их и выбирая точку на фото, с которой нужно взять цвет.
Кнопка «Collage» сохраняет получившуюся палитру с кодами цветов на компьютере.
Кнопка «Auto» генерирует новые сочетания на основе того же фото.
Нажмите «Ок» и перейдете на главную страницу сайта для дальнейшей работы с палитрой.

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

4. Создать свою цветовую гамму онлайн

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

На каждом цвете 4 значка-кнопки :

Alternative shades — Оттенки цвета (темнее и светлее),
Drag (Передвинуть цвет вправо или влево по палитре),
Adjust (Настроить тон, насыщенность, яркость и др.),
Lock (зафиксировать цвет).

Цвет – один из самых важных элементов в работе дизайнера. Но его, как концепцию, довольно сложно освоить: из-за множества комбинаций палитр зачастую трудно решить, каким образом лучше оформить интерфейс веб-страниц и приложений. Ранее мы публиковали обзоры инструментов по выбору и . А сегодня хотим расширить тему, разместив в блоге перевод статьи Essential Color Tools for UX Designers от Nick Babich.

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

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

1. Ищем вдохновение

Краски природы

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

Лучшие сочетания красок – в природе. Можете получить цветовую схему из любого фото

Behance

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

Dribbble Colors

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

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

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

Designspiration

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

В Designspiration найдете разные примеры цветовых комбинаций

Tineye Multicolr

С помощью сервиса подбора цвета Tineye Multicolr сможете определить желаемую гамму изображения и даже задать процент каждого из них (соотношение). Сайт интегрирован с базой данных, состоящей из 20 млн фоток Creative Commons от Flickr. Это определенно один из самых быстрых способов найти в идеальной палитре.

Colorzilla

ColorZilla – расширение для установки в браузерах Chrome и Mozilla Firefox. Оно включает в себя такие инструменты, как «пипетка», функции просмотра палитр, создания и многое другое.

Расширение ColorZilla доступно в Chrome и Firefox

Shutterstock Spectrum

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

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

W3Schools

Недавно в блоге рассматривали подборку от W3Schools. Там собрано очень много информации по теме, начиная от их названий/кодов оттенков, теории сочетания палитр и заканчивая описанием разных форматов: HEX, RGB, CMYK, HWB и др. Также найдете простенькие генераторы, конверторы и тому подобные «мини-сервисы». В целом, интересно посмотреть.

2. Создаем цветовую палитру

Material Design Color Tool

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

Coolors

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

Цветовая схема в Coolors на основе фото

Adobe Color CC

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

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

Подбор цвета для сайта по картинке

Здесь есть сотни готовых комбинаций, ищите их в разделе «Смотреть»:

Если пользуетесь десктоп-версией, то сможете в один клик экспортировать созданную вами цветовую систему в InDesign, Photoshop и Illustrator.

Paletton

Его часто сравнивают с предыдущим Adobe Color CC, поскольку эти проекты очень похожи. Разница лишь в том, что в Paletton вы не ограничены пятью параметрами, а можете экспериментировать с дополнительными тонами интерфейса.

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

3. Делаем палитру доступной

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

WebAIM Color Contrast Checker

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

WebAIM Color Contrast Checker – веб-инструмент, с помощью которого проверяются цветовые коды в шестнадцатеричных значениях.

Coolors

О данном сервисе мы уже упоминали выше. Кроме всего прочего Coolors также поможет вам проверить придуманную палитру на цветовую слепоту.

Тип цветовой слепоты в схеме

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

Так человек с протаномалией видит палитру

NoCoffee Vision Simulator для Chrome

С помощью сайта NoCoffee Vision Simulator сможете просмотреть, как люди с цветовой слепотой или слабым зрением будут воспринимать определенные веб-страницы. Например, указав параметр «Ахроматопсия» в секции «Color Deficiency», вы увидите веб-страницу в сером цвете.

Так выглядит проект CNN для человека с дейтеранопией

Заключение

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

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

Что это такое?

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

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

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

Устройство цветового круга

Купить

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

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

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

Предшественником данного устройства в его современном виде является цветовое кольцо Иттена (смотрите рисунок ниже).

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

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

Рассмотрим этот момент немного подробнее..

Почему основных цветов двенадцать?

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

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

Гид по смешению красок

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

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

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

Шкала насыщенности

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

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

Чтобы понять как это делается практически, посмотрите это видео:

Схемы цветовых сочетаний

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

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

Во-первых, гармония или дисгармония красок — это очень субъективное понятие. Как говорится, «на вкус и цвет товарища нет».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

flatcolors.net

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

materialpalette.com

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

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

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

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

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

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

Ребята, мы вкладываем душу в сайт. Cпасибо за то,
что открываете эту красоту. Спасибо за вдохновение и мурашки.
Присоединяйтесь к нам в Facebook и ВКонтакте

Схема № 1. Комплементарное сочетание

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

Схема № 2. Триада — сочетание 3 цветов

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

Схема № 3. Аналогичное сочетание

Сочетание от 2 до 5 цветов, расположенных рядом друг с другом на цветовом круге (в идеале — 2–3 цвета). Впечатление: спокойное, располагающее. Пример сочетания аналогичных приглушенных цветов: желто-оранжевый, желтый, желто-зеленый, зеленый, сине-зеленый.

Схема № 4. Раздельно-комплементарное сочетание

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

Схема № 5. Тетрада — сочетание 4 цветов

Цветовая схема, где один цвет — основной, два — дополняющие, а еще один выделяет акценты. Пример: сине-зеленый, сине-фиолетовый, красно-оранжевый, желто-оранжевый.

Схема № 6. Квадрат

Сочетания отдельных цветов

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

Подбор сочетания цветов онлайн – описание и видео

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

Сочетание цветов — онлайн программа

Задайте в адресной строке адрес сайта: http://color.romanuke.com/. Это официальная страница ресурса IN COLOR BALANCE. Работает в онлайн режиме. И уже на первом экране данного сервиса вы увидите большое число разнообразных палитр, которые можно просматривать до бесконечности.

Видео «Сочетание цветов — онлайн подбор»

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

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

Как выполнить подбор цвета онлайн бесплатно

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

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

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

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

Как можно использовать выбранную палитру?

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

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

А я перехожу на свой сайт. Посмотрите, именно в этой гамме у меня оформлены заголовки и подзаголовки, основной текст.

Небольшая заметка для начинающих интернетчиков:

— скриншоты экрана можно сделать с помощью специальных программ. их описание на ЭТОЙ странице.

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

Новогодняя палитра

А вот пример тематической подборки — Новогодняя палитра.

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

А я прощаюсь с вами. Оставляйте комментарии подписывайтесь на новости моего блога «Арсенал интернет-решений» — здесь всегда найдете много интересного и полезного для себя!

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

Еще информация по теме:

Крутая шпаргалка по сочетанию цветов

Пример HTML-страницы

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

Схема № 1. Комплиментарное сочетание

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

Схема № 2. Триада — сочетание 3 цветов

Схема № 3. Аналогичное сочетание

Схема № 4. Раздельно-комплиментарное сочетание

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

Схема № 5. Тетрада — сочетание 4 цветов

Схема № 6. Квадрат

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

Сочетания отдельных цветов

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

Ссылка на источник

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

Сочетание Цветов в Интерьере [Цветовой круг > Таблица] + 121 фото

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

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

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

Цвет в интерьере

Цветовой круг

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

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

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

Проверяем на соответствие теории (поменял структуру и теперь она дальше). Раскладываем интерьер на цветовую схему и подбираем сочетания для синего двумя способами. По комплиментарным для двух и трёх цветных комбинаций (ссылка на сервис и пояснения в следующем пункте).

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

Давайте экспериментировать с диваном и стеной.

Всё не то.

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

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

Больше фото этой квартиры в материале про современный дизайн интерьера.

Таблица сочетания цветов в интерьере

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

Есть 3 параметра:

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

Все цвета с одинаковой светимостью и насыщенностью сочетаются.

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

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

Важно!

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

И поэтому же пастельные всегда хорошо вписываются.

Для интерьера подходят цвета с низкой насыщенностью.

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

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

Выбираем палитру

Пример работы с цветом на практике и теорию вы увидели, теперь выбираем 1 из 3-ёх подходов именно для вас:

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

1 дополнительный акцентный цвет + его оттенки. Тоже лёгкий путь когда все-таки хочется яркости.

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

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

1. Натуральные

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

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

Разобьём несколько реальных фотографий интерьеров на палитры:

Стоп.

Они же казались почти монохромными, а там оказывается куча оттенков!

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

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

2. Оттенки одного цвета

Тоже простой подход:

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

Реализовать такое можно даже после ремонта исключительно за счет декора вообще не задействуя отделку:

С оделкой и мебелью сложнее — с ними выше вероятность совершить ошибку и не так легко её исправить.

Много примеров подхода смотрите в материале про кухни в серых тонах.

3. Сочетаем несколько

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

В правом верхнем углу нажимаем «Harmony» и выбираем тип сочетания. Потом двигаемся мышкой по кругу. Все параметры кроме насыщенности регулируются движением мыши по окружности. Насыщенность меняется вторым ползунком сверху в правой колонке «Saturation». Она изменит сам круг.

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

Аналогичные (Analogous). Набор цветов расположенных на круге рядом.
Контрастные, они же комплиментарные, они же взаимодополняющие (Complementary). Расположены друг напротив друга на линии проведённой через центр. Например, коричневый и синий.
Конфликтные. Расположены на линиях пересекающихся в центре цветового круга под прямым углом. Например красный и синий.
Триада. Равноудалены друг от друга (образуют равносторонний треугольник). Например красный, зелёный и синий — три основных цвета образуют именно такой треугольник.
2 пары. Собственно 2 пары комплиментарных цветов линии которых пересекаются в середине круга под прямым углом.

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

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

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

Для интерьеров нас интересуют 2 внутренних кольца (пастельные цвета) и 2 внешних (тёмные) и они же но с другой насыщенностью (количеством серого).

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

Пастельные из середины диаграммы можно использовать и в отделке, но без фанатизма. Грязные тёмные хорошо подходят для текстиля: шторы, ковёр, постельное бельё, мягкая мебель.

Почему остальные плохи?

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

Кстати:

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

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

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

Итого исключаем из нашего интерьера:

Чистые красный, синий, зелёный.
Яркие насыщенные розовые, красные, фиолетовые, оранжевые.
Тёмные и грязные зелёные (оставляем натуральный травяной зелёный, бледный пастельный и все смеси вроде фисташкового).
Бледно персиковый из отделки (в текстиле можно). Причина — персиковый приелся в евроремонтах начала двухтысячных.

Куда и чем добавлять?

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

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

Кста, мы есть в:

Готовые палитры

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

Про таблицы

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

Кому-то интерьер с таким сочетанием понравится, кому-то нет (мне нет). В этом проблема конфликтных — они не универсальные.

Теперь мы знаем:

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

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

Все готовые таблицы сочетания цветов — бред.

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

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

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

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

Модные сочетания

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

Это, дамы и господа, мода.

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

Вот несколько модных сочетаний цветов в интерьерах, которые не лучше и не хуже остальных, просто они популярны (в 2021 уже нет):

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

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

Сохраняйте и делитесь — пригодится!

10 сайтов для игры с цветами и создания цветовых палитр

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

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

Цветовая палитра в ее простейшем определении — это диапазон цветов, который используется для визуального согласования графики или цветного изображения. Возьмем, к примеру, наш собственный веб-сайт, который был разработан с использованием единой для всего сайта цветовой комбинации. Примером конкретной палитры является безопасная для Интернета цветовая палитра (набор из 216 цветов), благодаря которой они выглядят одинаково в браузерах и ОС.

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

Назовите это сообществом любителей цвета.Или «˜ красочное» сообщество, потому что все это творческие люди, которые делятся цветовыми палитрами и узорами. Веб-сайт хорошо организован с такими разделами, как Каналы (которые демонстрируют использование цвета для свадеб, дома, моды и т. Д.) И Trends ( указатель того, что происходит с цветом в различных носителях). Но для более практической работы проверьте Tools , где вы можете создавать палитры и шаблоны. Возможно, вас заинтересует Themeleon, который позволяет создавать собственные темы для вашего профиля в Twitter.

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

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

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

Тукан

Редактор цветовой палитры — один из онлайн-инструментов Aviary.Вы можете выбрать до 20 цветов в палитре, используя цветовые комбинации или загруженное изображение. Вы можете импортировать изображения из Flickr, Picasa, Tumblr и Facebook. Также предоставляется импорт из URL-адреса, но я получал неизвестную ошибку. Toucan также позволяет вам проверить и предварительно просмотреть окончательную палитру, используя раскрывающийся список с вариантами дефицита цвета.

Цветовая палитра FX [Неработающий URL-адрес удален]

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

Онлайн-инструмент начинается с множества цветовых блоков, на которые вы можете навести указатель мыши и расширить палитры, чтобы редактировать их. Другие инструменты включают Color Galaxy (набор из 27 цветовых баз данных), Color Sphere (для правильных цветовых схем и гармонии), Color Studio (создавайте свои собственные цвета), Библиотеку преобразования цветов и многое другое.

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

Генопал

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

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

Изображение: geishaboy500

Что такое биткойн, сколько он стоит и как его потратить?

Не знаете о биткойнах и криптовалютах? Хотите знать, о чем идет речь? Мы объясняем, что такое биткойн и как его потратить.

Об авторе Сайкат Басу (Опубликовано 1527 статей)

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

Более От Сайката Басу

Подпишитесь на нашу рассылку новостей

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

Нажмите здесь, чтобы подписаться

Выберите лучшие сочетания цветов для своего веб-сайта

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

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

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

Думайте о сочетании цветов, а не о цветовой палитре

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

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

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

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

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

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

Пролистайте слайд-шоу веб-сайтов Jimdo ниже, чтобы увидеть различные цвета в действии.

Красный цвет вызывает энергию, движение и любовь, но также может иметь негативный символизм, например гнев и опасность. При умеренном использовании красный может быть очень забавным.На этом веб-сайте Jimdo показано брендовое агентство, которое является резким, сильным и, возможно, даже немного непокорным. Яркий и веселый оранжевый часто означает волнение, тепло и даже амбиции. Здесь он нашел хорошее применение на веб-сайте Freedom & Spirit. Просто помните, что апельсин также может обозначать предупреждение или предостережение, поэтому лучше использовать его в небольших дозах. Жизнерадостный, трудолюбивый и энергичный — вот лишь некоторые из слов, которые приходит на ум желтым. Трудно не почувствовать себя немного лучше после просмотра этого образца сайта Jimdo.Зеленый цвет гармоничен и успокаивает и обычно означает природу, здоровье или даже богатство. Из-за того, что он ассоциируется с природой, он может быть хорошим выбором для таких сайтов, как этот. Есть причина, по которой многие бизнес-сайты тяготеют к синему цвету. Традиционно это означает компетентность, доверие и безопасность. На веб-сайте Rosetta Shop он соответствует теме науки и космоса, а их забавный шрифт не дает цвету казаться скучным.Фиолетовый обычно пробуждает творчество, воображение и успокаивает. Это также цвет королевской семьи и может казаться роскошным. Фиолетовый не так распространен в веб-дизайне, поэтому, если вы ищете что-то уникальное, это отличный выбор. Бирюзовый или бирюзовый цвет часто вызывает в памяти эмоциональное равновесие или безмятежность, поэтому неудивительно, что они используются на этом оздоровительном веб-сайте. Розовый — изысканный и успокаивающий, хотя бывает трудно отделить этот цвет от более женственной традиции.В сочетании с черным и белым веб-сайт Zebrure выглядит современным и энергичным, с легким намеком на мягкость. Коричневый цвет передает суровость, устойчивость и характер. Это означает (правильно или ошибочно!), Что он обычно ассоциируется с более мужскими веб-сайтами. Конечно, бородатый лесоруб помогает отправить это сообщение домой на веб-сайте GrillGold. Серый — формальный, вневременной и роскошный, что делает его отличным дополнением к магазину Seidenweiss. Он не потянется и не привлечет ваше внимание, но, опять же, в этом нет необходимости, поскольку общий эффект сложный и профессиональный.

Отражение индивидуальности вашего бренда

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

Три цветовых стратегии для начинающих

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

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

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

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

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

Когда вы выбираете цвет акцента, вот несколько мест, где вы можете использовать его на своем веб-сайте:

2. Используйте основной и дополнительный цвет

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

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

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

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

3. Представьте свои цвета с помощью фотографий

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

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

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

Вот еще один пример веб-сайта Jimdo, который использует трехцветную палитру и включает эти цвета во все свои фотографии. Мне нравится, как художница Сами Гарра использует на своем сайте ярко-зеленый, розовый и желтый цвета. Каждая фотография ссылается хотя бы на один из этих цветов. Загляните также на ее страницу «О нас», и вы увидите, что даже ее цвет волос и настоящая мастерская тоже используют эти цвета! Поговорим о преданности делу!

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

Где взять идеи для расцветки сайта

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

Какой цветовой код? Когда вы видите понравившийся вам цвет, вы можете использовать его на своем веб-сайте Jimdo, найдя для этого цвета RGB или шестнадцатеричное значение . Это уникальные коды, которые идентифицируют точный цвет, который вы ищете, и обычно они выглядят примерно как RGB (26, 119, 127) или # E82C0C.Получив цветовой код, используйте редактор стилей Jimdo, чтобы воссоздать цвет, вставив код в селектор цвета.

Посмотрите на материалы и фирменные цвета, которые у вас уже есть

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

Цвет веб-сайта Dotty About Ice Cream взят прямо из винтажного розового грузовика с мороженым.

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

Выберите цвет на понравившейся фотографии

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

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

Чтобы подобрать цвет на фотографии, загрузите файл изображения (или файл вашего логотипа) в Adobe Color CC, и этот бесплатный сайт сгенерирует соответствующую цветовую палитру. Наведите кружки на ту часть изображения, которую вы хотите воспроизвести. Здесь я загрузил стоковую фотографию из Unsplash в программу Adobe, чтобы посмотреть, смогу ли я найти цвет этой красивой зеленой пишущей машинки.

Найдите вдохновение в цвете на чужих сайтах

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

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

Ознакомьтесь с цветовыми ресурсами в Интернете

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

Хорошо, вы выбрали цвета. Что теперь?

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

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

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

Введите свой цветовой код в палитру цветов.

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

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

Установите цветовую схему для всего веб-сайта

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

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

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

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

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

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

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

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

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

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

Выводы по цвету

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

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

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

Сделайте свой бизнес онлайн с Jimdo.

Цветовые схемы веб-сайта и лучшие генераторы цветовых схем

Что первое приходит на ум, когда вы думаете о культовом бренде, таком как Pepsi или T-Mobile? Скорее всего, ваш разум сразу же наполняется голубым или розовым цветом. Знаменитые бренды освоили использование цвета в своем брендинге. — это наука для достижения успеха.Если вы создаете интернет-магазин, то самое важное применение вашей цветовой палитры — это дизайн вашего веб-сайта.

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

Как цвет влияет на покупателей?

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

Эмоциональные реакции

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

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

Источник: The Logo Company

Покупательское поведение

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

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

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

Источник: KISSmetrics

Демография

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

Помимо пола — это страна и культура заказчика; Цвета могут иметь совершенно разные значения от страны к стране. Если вы ведете бизнес в стране, где преобладает культура, с которой вы не знакомы, важно изучить, что означают цвета в этой культуре. Например, красный цвет является положительным цветом в таких странах, как Китай и Индия, а в Южной Африке — это цвет траура.Кроме того, фиолетовый может символизировать богатство и власть в большинстве стран Востока и Запада, но в некоторых странах Европы, таких как Великобритания и Италия, он ассоциируется со смертью и скорбью.

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

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

1. Анализируйте свою отрасль

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

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

2.Начните с вашего логотипа и основного цвета

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

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

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

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

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

3. Создайте привлекательную цветовую палитру

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

Источник: Web Ascender

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

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

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

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

4.Распределите основные и акцентные цвета

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

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

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

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

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

Adobe Color CC

Созданный Adobe, компанией-разработчиком программного обеспечения для дизайна, Adobe Color CC представляет собой генератор цветовых схем, который напрямую интегрируется со всеми продуктами Adobe. Сайт можно использовать без регистрации; однако, если вы хотите сохранить какую-либо из созданных вами палитр, вам потребуется создать учетную запись Creative Cloud (которая у вас уже может быть, если вы используете такие программы, как Photoshop).

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

Colormind.io

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

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

Coolors.co

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

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

Раскраска для дальтонизма

Еще больше углубился в доступный дизайн — это бесплатный веб-сайт Coloring for Colorblindness, созданный Дэвидом Николсом, выпускником доктора математических наук Университета Коннектикута.Цвет для дальтонизма автоматически генерирует цветовую палитру и показывает рядом примеры того, как эта палитра будет выглядеть для людей с различными типами дальтонизма.

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

Палитра материалов

Основанная на цветовой палитре Google «Материальный дизайн», Material Palette помогает пользователям создавать упрощенные цветовые схемы для использования на минималистичных веб-сайтах и в приложениях. Сайт является бесплатным для использования и не имеет возможности создать учетную запись; чтобы сохранить палитру, вы можете опубликовать ее в Твиттере или загрузить в различных форматах файлов.

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

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

Заключение

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

Цветовые схемы веб-сайта, которые выглядят потрясающе: 30 цветовых палитр

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

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

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

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

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

Лучшая цветовая палитра сайта — это та, которая вам поможет:

Привлечь внимание пользователя;
Привлечь вашу целевую аудиторию;
Превратите посетителей в клиентов;
Распространение сарафанного радио;
Заинтересуйте посетителей своим брендом

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

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

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

Определите продукт / услугу, которую вы продаете

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

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

Знайте свою целевую аудиторию

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

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

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

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

Сделайте текст черным

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

Что говорит нам каждый цвет?

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

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

Сохраните ощущение с помощью правильных цветовых схем веб-сайта

Цветовые палитры веб-сайтов, волнующие аудиторию

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

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

Цветовая схема веб-сайта, повышающая настроение бренда

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

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

Цветовые схемы веб-сайтов, повышающие надежность

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

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

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

Цветовые схемы веб-сайта, повышающие доверие

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

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

Подумайте о своей отрасли

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

Зеленый для экологически чистых брендов

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

Синий для воды

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

Синий для финансов

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

Красный для розницы

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

Классные цветовые схемы для веб-сайтов

BAUNFIRE

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

Дело

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

Кайтен

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

Zendesk

Представляем Zendesk Sunshine, открытую гибкую платформу CRM. Sunshine построен на AWS и позволяет легко подключать и понимать все данные своих клиентов, где бы они ни находились.

Сумасшедший ребенок

Crazybaby Air 1S — настоящие беспроводные наушники, разработанные для занятий спортом, предлагающие бескомпромиссное качество звука Hi-Fi, которое поможет вам расслабиться, пока вы не потеете.

TakeShape

Беззаботная CMS, GraphQL API и генератор статических сайтов с отличной цветовой схемой, которые помогут вам в реализации ваших проектов.

Пара

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

Школа моушн-дизайна

Никакой ерунды по анимации и моушн-дизайну в After Effects. Цветовая схема его веб-сайта полна ярких красок.

ковчег

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

Люстон

Из любви к минималистичным формам и стильным деталям бренд lūstone был создан с миссией по созданию стильных кожаных сумок и аксессуаров для австралийского рынка.

Сеттер

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

Агенты

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

пять / четыре

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

Мистретта

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

Забрать с помощью WeTransfer

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

Синдикат ICO

Попасть в хорошие ICO становится все труднее. Нет больше, вступайте в Синдикат ICO.

Тоник Мантра

TONIK + наполняет мощные декларации * Я ЕСМЬ * (мантры) успокаивающей атмосферой.Каждая мантра доставляется в виде небольшой повторяющейся дозы (микродозирования).

Ипификация

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

фиксатор

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

Рыболовный палец

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

BarkBox

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

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

Северный Рубин

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

Лимонная стойка

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

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

Монетный двор

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

Одопод

Odopod решил использовать простые цветные шаблоны, но они добавили индивидуальности, добавив градиент на главную страницу, а также большую типографику.

Fiverr

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

Ahrefs

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

Millo.co

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

Ткацкий станок

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

Онлайн-генераторы цветовой палитры

Охладители

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

Быстро и просто — достаточно нажать клавишу пробела, чтобы создать прекрасные цветовые схемы, которые идеально сочетаются друг с другом
Экспорт и совместное использование — Экспортируйте свои схемы в несколько удобных форматов, таких как PNG, PDF, SCSS, SVG, или скопируйте постоянные URL-адреса
Изображение в цвета — выберите начальные цвета из изображений и автоматически получите идеальное сочетание
— Создайте свой профиль и сохраните все свои цветовые схемы в порядке с именами и тегами
Регулировка и уточнение — точная настройка цветов путем регулировки температуры, оттенка, насыщенности, яркости и т. Д.
Цвета в облаке — войдите в свою учетную запись и получайте доступ к своим творениям везде

Цветовая сфера Mudcube

Mudcube — это генератор палитры, который переводит цветовое колесо в 3D, где вы можете вращать сферу, чтобы получить идеальные цвета. Он поставляется с 10 предустановками гармонии, 9 предустановками видения и 3 предустановками квантования. В нем также есть выбор тем из раскрывающегося меню, если вы не хотите создавать их с нуля.Вы можете загрузить свои палитры в файлах .AI или .ACO

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

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

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

SpyColor.com

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

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

ColorZilla

ColorZilla — замечательный продвинутый инструмент для создания удивительной цветовой палитры CSS. Расширенные функции включают:

Пипетка — получить цвет любого пикселя на странице
Расширенная палитра цветов (аналогична Photoshop)
Окончательный генератор градиентов CSS
Webpage Color Analyzer — получите цветовую палитру для любого сайта
Palette Viewer с 7 предустановленными палитрами
Цвет История недавно выбранных цветов

Colormind

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

ЦветHexa

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

Поддон

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

Цвета холста

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

Цветной

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

Палитра материалов

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

ЦВЕТОВлюбленные

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

Живописный

Pictaculous — это генератор цветовой палитры, предоставленный MailChimp, который позволяет создавать цветовую палитру из изображений или фотографий PNG, JPG или GIF.По сути, все, что нужно, — это загрузить изображение по вашему выбору, а приложение сделает все остальное. Затем приложение создает для вас файл образцов Adobe, который поможет вам быстро и легко загрузить цветовую палитру.

Colorexplorer

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

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

Цвета в Интернете

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

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

Цветовые комбинации

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

КОПАСО

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

Цветной блендер

Работа с Color Blender включает в себя несколько простых шагов:

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

Генератор цветовой палитры Colllor

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

Проверь мои цвета

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

Цвет. Орг

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

COLRD

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

Генератор палитр DeGraeve

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

ФОТОКОПА

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

Цвет

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

Завершение мыслей о цветовых схемах сайта

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

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

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

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

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

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

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

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

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

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

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

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

На что следует обратить внимание при выборе цветовой схемы веб-сайта

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

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

Кто ваша целевая аудитория?

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

Какие цвета используют ваши конкуренты?

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

Какие цвета лучше всего смотрятся вместе?

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

Как эта цветовая схема будет выглядеть на разных средах?

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

Как выбрать профессиональную цветовую палитру веб-сайта?

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

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

Решите, какие цвета лучше всего подходят для вашего бренда

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

Выберите доминирующие и акцентные цвета

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

Назначьте цвета различным элементам на странице

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

Проверьте готовый продукт

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

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

15 примеров лучших цветовых схем для веб-сайтов
Если вы не привыкли составлять разные цветовые комбинации, может быть трудно понять, с чего начать, когда дело доходит до выбора цветовой палитры вашего веб-сайта. Чтобы помочь вам, мы составили список из 15 примеров цветовых схем веб-сайтов, которые помогут пробудить ваше воображение. Если один из них вам нравится, не стесняйтесь адаптировать его к собственному дизайну веб-сайта.
1. Темное и современное
Вы можете создать футуристический вид, сочетая яркие цвета, такие как ярко-зеленый, синий или ярко-розовый, на черном фоне.Этот внешний вид отлично подходит для разработчиков приложений, технологических компаний и брендов программного обеспечения как услуги (SaaS).
2. Современное искусство

Для более творческого, молодежного подхода попробуйте использовать толстые черные акценты на белом фоне. Думайте о своем веб-сайте как о произведении современного искусства. Этот стиль излучает артистизм и новаторство.
3. Сепия Ностальгия
Если ваш бренд призывает к более классическому образу, вы можете использовать монохромную цветовую схему, вдохновленную старыми фотографиями.Благодаря различным коричневым тонам в сочетании с черными и белыми акцентами ваш веб-сайт может заставить людей вспомнить «старые добрые времена».
4. Спокойный и свежий
Комбинируя темно-зеленый, белый и более светлый приглушенный зеленый цвет, вы можете сделать свой веб-сайт свежим. Такое сочетание цветов — хороший выбор для спортивных или велнес-брендов.
5. Земляные пастели
Современные детские бренды избегают пастельно-розового и нежно-голубого.Вместо этого популярные мамочки, бренды детской одежды и производители игрушек предпочитают светлые естественные тона. Вы можете добиться этой простой цветовой схемы, сочетая светло-зеленый и коричневый цвета с кремовым или белым фоном.
6. Ретро-акценты

Используя яркие цвета, такие как желтый, зеленый морской пены и персик с черными акцентами, вы можете придать своему веб-сайту игривый ретро-вид. Эта цветовая схема часто используется для брендов бытовой техники и музыкальной индустрии.
7. Элегантная производительность
Спортивные бренды, ориентированные на результат, могут отказаться от землистых тонов и выбрать более насыщенную цветовую палитру. Попробуйте использовать привлекательный неоновый желтый цвет на черном фоне. Затем соедините его с различными оттенками более темного желтого, чтобы сделать образ более ярким.
8. Монохромный синий
Чтобы добиться более профессиональной эстетики, попробуйте цветовую схему, полностью состоящую из разных оттенков синего.Используя ярко-синий, темно-синий и голубой цвет вместе с белыми акцентами, вы можете сделать свой бизнес-сайт авторитетным и заслуживающим доверия.
9. Friendly Foods
Яркие красные и желтые цвета часто ассоциируются с брендами продуктов питания. Однако современные независимые рестораны часто выбирают более простую палитру. Если это похоже на ваш бренд, подходящей цветовой схемой для вас могут быть такие цвета, как светло-голубой, приглушенный бордовый, масляно-желтый и теплый коралловый.
10. Мечтательный закат
Сейчас популярная цветовая гамма — это сочетание лаванды и коралла с черными и белыми акцентами. Эту модную цветовую схему можно использовать для любого бренда, который хочет казаться современным, вычурным и неземным.
11. Цветной профессиональный Pop
Если вам нужен профессиональный вид, но вас не интересует монохромная цветовая гамма, попробуйте сочетать темно-сланцево-серый с белым, черным и насыщенным акцентным цветом, например, баклажаном или календулой.
12. Причудливый сборник рассказов
Некоторые бренды могут требовать более причудливого подхода к веб-дизайну. Независимо от того, являетесь ли вы автором фэнтези, ювелирным мастером или детским брендом, есть много причин, по которым вы можете захотеть, чтобы ваш веб-сайт выглядел как страница из иллюстрированной книги. Чтобы добиться такого эффекта, используйте кремовый фон вместо белого, чтобы имитировать цвет старой страницы из книги. Затем добавьте различные оттенки фиолетового, чтобы придать ему волшебство.
13.Красочная вечеринка
Сочетание забавных цветов, таких как бирюзовый, салатовый, ярко-розовый и ярко-желтый, может произвести захватывающий эффект на веб-странице. Это может быть хорошим выбором для некоторых ресторанов, брендов одежды и аксессуаров. Убедитесь, что эти смелые цвета сочетаются с большим количеством белого пространства, чтобы не загромождать глаза аудитории.
14. Люкс и элитный
Для элитной электронной коммерции вы можете использовать черно-белую цветовую схему для своей веб-страницы.В сочетании сильные блочные черные и ярко-белые могут работать вместе, чтобы создать современную эстетику высокого класса для вашего веб-сайта.
15. Современная элегантность
Luxe Черно-белые цветовые схемы — не единственный способ придать вашему сайту элегантный вид. Если вы хотите более современный вид, но при этом хотите сохранить ощущение высокого класса, подумайте о выборе приглушенной прохладной цветовой схемы. Используя бледный баклажан, шалфей, серо-коричневый и серый, вы можете придать своему веб-сайту всю изысканность, которой он заслуживает.
Создавайте со скоростью культуры
Picsart — это полная экосистема бесплатного контента, мощных инструментов и идей для авторов. Picsart является крупнейшей в мире платформой для творчества с миллиардом загрузок и более чем 150 миллионами активных авторов в месяц. Picsart сотрудничала с такими крупными артистами и брендами, как BLACKPINK, Jonas Brothers, Lizzo, Sanrio: Hello Kitty, I am a Voter, Bebe Rexha, Maroon 5, One Direction, Warner Bros.Развлечения, iHeartMedia, Condé Nast и другие. Загрузите приложение или начните редактировать в Интернете сегодня, чтобы улучшить свои фотографии и видео с помощью тысяч простых и быстрых инструментов редактирования, модных фильтров, забавных наклеек и великолепных фонов. Дайте волю своему творчеству и обновите до Gold и получите премиальные привилегии!
цветов, которые сочетаются с зеленым на веб-сайтах
Цвета имеют огромное влияние на пользователей веб-сайта.При создании сайтов дизайнеры часто выбирают зеленый цвет в качестве основного цвета для своих страниц. Важно то, как они сочетают зеленый цвет с другими цветами и нюансами, чтобы получить приятный визуальный эффект и эффективный веб-сайт?
Интересный отчет о том, как цветовая психология влияет на коэффициент конверсии и увеличивает продажи. показывает, что зеленый — это :
.
Лучше подходит для одних ниш и совсем непопулярно для других
Популярное в сфере энергетики, технологий, финансов, домашнего хозяйства и продуктов питания
Непопулярно для автомобилей, самолетов и одежды
Сомнительно для здравоохранения
От 62% до 90% оценки продукта основывается только на цвете
Цветной оттиск отвечает за 60% принятия или отклонения продукта.
Но эффективный сайт — это не только о продажах, но и о узнаваемости бренда, и запоминании. Базовый цвет и определенная цветовая комбинация на веб-сайтах помогают пользователям формировать собственный имидж бренда.
Источник
Комбинируя зеленый цвет с другими цветами и оттенками, вы должны учитывать различные значения, которые зеленый имеет в разных культурах по всему миру:
Западные культуры — зеленый цвет означает природу и свежесть, весну, экологию, удачу, богатство и положительные стороны.
Ближний Восток — зеленый символизирует удачу и богатство
Восточные культуры — зеленый символизирует молодость и новую жизнь
Помимо интереса к этим значениям, они имеют огромное значение для планирования глобальных коммуникационных кампаний. Цвет должен соответствовать сообщению, которое вы хотите передать, иначе это может иметь следующие последствия, которые отталкивают людей от ваших товаров / услуг. Тщательно выбирайте цвета после того, как выбрали целевой рынок.
Итак, мы можем заключить, что не только ниша является фактором, определяющим, является ли зеленый цвет подходящим или нет. Также есть фактор региона и целевая аудитория с культурной спецификой .
В следующих строках мы проиллюстрируем комбинации зеленого с другими цветами и посмотрим, какое значение они должны передать:
Цветовая схема зеленого, фиолетового и оранжевого цветов
В то время как зеленый и оранжевый сочетаются друг с другом на основе их противостояния в цветовом круге, фиолетовый — довольно необычный цвет.Фиолетовый привлекает внимание к теме веб-сайта, повышает осведомленность и акцентирует внимание на каждой детали на страницах сайта. Зеленый, превратившийся в фиолетовый, действительно означает чрезвычайную ситуацию. Это связано со всей идентичностью сайта и активностью команды, направленной на будущее без выбросов углерода. Если фиолетовый является акцентным цветом, оранжевый смягчает сообщение: он используется для стимулирования взаимодействия и призыва к действиям, которые побуждают пользователей проявить инициативу. Само по себе действие обязательно смягчит обстановку чрезвычайной ситуации.Зеленый должен оставаться основным цветом, как и веб-сайт через цветовую схему и его сообщение.
На следующем веб-сайте представлена довольно похожая цветовая палитра, только оранжевый более смягчает общее сообщение:
Цвета, которые сочетаются с зеленым: коричневый и белый
На этом веб-сайте сочетание цветов является естественным: фотография объединяет зеленый и коричневый (+ некоторые оттенки туманного серого), текст которых отображается белым.Учитывая, что фон имеет более темные цвета, белый цвет пригодится для создания контраста. Это также соответствует естественности изображения, при этом акцентируя внимание на заголовке и призыве к действию. Весь текст страницы отображается белым цветом, включая логотип, заголовок и подзаголовок, а также текст кнопки CTA. Замечательно, как благодаря использованию цветов текст и изображение поддерживают друг друга: зеленый, коричневый и некоторые оттенки серого подталкивают текст вперед, а белый обеспечивает гармонию с естественностью изображения.
Такое же цветовое сочетание используется на таких веб-сайтах, как:
Первый пример зеленого и белого:
Второй пример 2 зеленый и белый:
Третий пример 3 светло-зеленый и белый:
Четвертый пример 4 темно-зеленый и белый:
Цвета, сочетающиеся с разными оттенками зеленого: красный, белый
На веб-сайте Geli есть приятное взаимодействие между различными оттенками зеленого: зеленый фон, зеленый цвет листьев, другой зеленый цвет других листьев … В целом, зеленый цвет распространяется по всей странице, а другие цвета мешают только точка лучшей гармонизации игры «зеленых».Немного красного и немного больше белого — это все, что нужно сайту для создания красивой презентации «Товары для зеленого». Особенность сайта заключается в точном сочетании нюансов, которые отличаются друг от друга, во взаимно дополняющих друг друга и легко образующих единое целое. Текст отображается контрастным белым цветом, как это рекомендуется для зеленых веб-сайтов.
По аналогичной схеме сочетания цветов:
Пример зеленый, красный и белый
Другие цвета, которые сочетаются с зеленым: желтый, белый
Еще одна удачная комбинация — преобладающий зеленый, желтый как акцентный цвет и немного белого для фона, текста и некоторых значков.Он обладает силой передавать яркое ощущение и последовательное сообщение (мы с гордостью финансируем канадских художников более 30 лет!). Темно-зеленый идеально контрастирует с желтым, и в обоих случаях на первый план выходит фотография с белым фоном. В целях согласованности цвет текста чередуется между белым и желтым, поэтому текст и изображение лучше пересекаются по своему значению и символике. Кнопки с призывом к действию имеют желтый фон, поэтому они достаточно заметны и побуждают к действию. Макет и разброс цветов создают чистый дизайн, который легко и приятно просматривать.
Зеленый, синий и черный
Если вас удивляет ассоциация зеленого с синим, пусть этот сайт вас удивит. Кроме того, черный цвет дополняет цветовую гамму темных оттенков. На самом деле, это сочетание цветов заимствует свою естественность у… природы. Синий может ассоциироваться с воздухом, небом и светом, падающим на твердую землю и траву. Этот декор обрамляет черная рамка, контрастирующая с освещенной картиной.Как вы, наверное, уже привыкли, текст отображается белым цветом для большей наглядности и гармоничной цветовой схемы. Кнопки CTA отлично вписываются в дизайн, так как на картинке они чередуют цвета: зеленый и синий.
Вышеупомянутые цветовые комбинации являются наиболее популярными в веб-дизайне. Вы можете использовать их как таковые для своего веб-сайта. Или вы можете использовать их как источник вдохновения для разработки другой, уникальной цветовой схемы. Однако вы должны иметь в виду, что зеленый хорошо сочетается со многими цветами: оранжевым, коричневым, желтым, даже синим, фиолетовым, черным и белым.Начиная с этого момента, вы можете вводить столько инноваций, сколько захотите, учитывая, что вы следите за принципами сочетания цветов для дизайна своего веб-сайта.

Настройка цветовой схемы вашего веб-сайта
При каждом дизайнерском решении, особенно на веб-сайтах, необходимо тщательно продумывать цвет. Скорее всего, если нам не понравится цветовая палитра, мы не задержимся на сайте надолго.
Скажем так, это выглядит очень плохо, когда в хорошем дизайне веб-сайта ужасные цвета.Другими словами, правильная цветовая схема имеет решающее значение для создания профессионального и качественного веб-сайта.
В этой статье мы рассмотрим, как подобрать идеальные цвета для дизайна вашего сайта. Мы также покажем вам, как изменить цветовую схему вашего сайта в редакторе Website.com.
Как выбрать цвета для вашего веб-сайта
Выбор цветов для вашего веб-сайта — это не просто выбор цветов, которые вам нравятся. Выбранные вами цвета должны укрепить ваш веб-сайт и укрепить бренд вашего бизнеса.
Кроме того, цвета, которые хорошо работают по отдельности, могут быть не такими приятными в сочетании. Например, красный — яркий смелый цвет, символизирующий любовь и огонь; зеленый — сильный цвет, символизирующий мир и гармонию. Оба они прекрасного красивого цвета, но в совокупности люди не видят любви, мира и гармонии — они видят Рождество.
Хотя вы можете вручную выбирать цвета для своего веб-сайта, гораздо проще просто использовать генератор цветовой палитры или встроенную библиотеку цветовых схем на вашем веб-сайте.com редактор.
Библиотека цветовых схем Website.com
Цветовая схема — это предустановленный выбор цветов, используемых в дизайне веб-сайта. Цветовые схемы используются для создания стиля и привлекательности. Редактор Website.com представляет собой библиотеку профессионально разработанных цветовых палитр, которые вы можете использовать на своем веб-сайте одним простым щелчком мыши.
Просто нажмите на понравившуюся палитру, и новые цвета будут применены к дизайну вашего веб-сайта.
Вот пример одного и того же веб-сайта в разных цветовых схемах:
Это оригинальный дизайн шаблона:
И это тот же дизайн, но с использованием разных предустановленных цветовых схем, найденных в библиотеке цветовых схем:
Настройка цветовой палитры
Каждая цветовая палитра настраивается — вы можете изменить любой цвет в палитре.Это позволяет легко перенести шаблон в соответствии с брендом вашей компании.

Сочетание цветов для сайта онлайн: Названия цветов, от Абрикоса до Янтаря — ColorScheme.Ru

Теория цвета: как выбрать правильные цвета для сайта

Как цвет влияет на поведение потребителей

Теория цвета

Цветовой спектр

Цветовой круг

Параметры цвета

Цветовые ассоциации и психология цвета

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

Как использовать психологию цвета

Как подбирать комбинации оттенков для повышения удобства восприятия информации

Создание сайта: сочетаемость цветов — Liqium

Создать свою палитру | LOOKCOLOR

Оставить комментарий

(только на русском языке)

Цветовой круг. Крутая шпаргалка по сочетанию цветов Цветовая подборка

1. Использовать известную гамму

2. Выбрать готовую профессиональную палитру

3. Определить палитру цветов понравившейся фотографии или картинки

4. Создать свою цветовую гамму онлайн

1. Ищем вдохновение

Краски природы

Behance

Dribbble Colors

Designspiration

Tineye Multicolr

Colorzilla

Shutterstock Spectrum

W3Schools

2. Создаем цветовую палитру

Material Design Color Tool

Coolors

Adobe Color CC

Paletton

3. Делаем палитру доступной

WebAIM Color Contrast Checker

Coolors

NoCoffee Vision Simulator для Chrome

Что это такое?

Устройство цветового круга

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

Почему основных цветов двенадцать?

Гид по смешению красок

Шкала насыщенности

Схемы цветовых сочетаний

Схема № 1. Комплементарное сочетание

Схема № 2. Триада — сочетание 3 цветов

Схема № 3. Аналогичное сочетание

Схема № 4. Раздельно-комплементарное сочетание

Схема № 5. Тетрада — сочетание 4 цветов

Схема № 6. Квадрат

Сочетания отдельных цветов

Подбор сочетания цветов онлайн – описание и видео

Сочетание цветов — онлайн программа

Видео «Сочетание цветов — онлайн подбор»

Как выполнить подбор цвета онлайн бесплатно

Как можно использовать выбранную палитру?

Новогодняя палитра

Еще информация по теме:

Крутая шпаргалка по сочетанию цветов

Схема № 1. Комплиментарное сочетание

Схема № 2. Триада — сочетание 3 цветов

Схема № 3. Аналогичное сочетание

Схема № 4. Раздельно-комплиментарное сочетание

Схема № 5. Тетрада — сочетание 4 цветов

Схема № 6. Квадрат

Сочетания отдельных цветов

Сочетание Цветов в Интерьере [Цветовой круг > Таблица] + 121 фото

Цвет в интерьере

Цветовой круг

Таблица сочетания цветов в интерьере

Выбираем палитру

1. Натуральные

2. Оттенки одного цвета

3. Сочетаем несколько

Готовые палитры

Про таблицы

Модные сочетания

10 сайтов для игры с цветами и создания цветовых палитр

Тукан