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

Related

studio.everypixel.com

Гайд по созданию цветовой палитры для сайта — статьи на Skillbox

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

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

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

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

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

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

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

Компании из сферы digital, производители бытовой техники или спортивных товаров чаще используют синие цвета и их оттенки: Samsung, Dell, Twitter, Skechers.

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

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

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

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

Tumblr использует непривычный темный фон, а в качестве акцентных цветов — оранжево-желтый, красный и зеленый.

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

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

Если вы только начинаете работать в дизайне, используйте бесплатные инструменты и сервисы: Adobe Color Wheel, Coolors, Swiss Color. Они помогут составить первоначальную цветовую палитру за несколько минут и выбрать основные цвета для будущего сайта. Чтобы лучше понимать композицию и цветовые сочетания, прочитайте книгу «Искусство цвета» Иоханнеса Иттена. В ней хорошо сформулированы и описаны принципы выбора.

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

Самый эффективный способ, представить цветовую палитру — сделать

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

Курс «Веб-дизайн с 0 до PRO»

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

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

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

В палитре не более пяти цветов, и только один ключевой.

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

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

Adobe Color Wheel, Coolors, Swiss Color и другими — их очень много.

Вам хватает цветов в палитре.

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

Элементы интерфейса сочетаются между собой.

Сайт не выглядит, как цветная «каша»: текст и заливка разного цвета, якорные объекты выделены одним цветом, цвет не мешает воспринимать информацию.

На сайте нет явных и грубых ошибок.

Например: красная кнопка «Купить» и зеленая кнопка «Отмена».

Подключите «Яндекс.Метрику» и Google Analytics.

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

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

1. Андрей Туканов, «10 упражнений построения цветовых структур».
2. Иоханнес Иттен, «Искусство цвета».
3. Статья о теории цвета и влиянии цветов на психику человека на «Постнауке».
4. Краткая история теории цвета на Awdee.
5. Статья преподавателя Skillbox Вадима Паясу о ключевых навыках дизайнера: типографике, стиле и композиции.

skillbox.ru

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

~

Сервисы по определению цветовой схемы

• color-hex.com — определит какие цвета стоят рядом с вашим цветом
• thestocks.im — агрегатор мокапов,  видео, фотографий, иконок, шрифтов.
• Eye Dropper — расширение для  Google Chrome, которое позволяет с помощью пипетки узнать код любого цвета на любой странице в интернете.
• Adobe Color CC  -подберёт цветовые сочетания. Adobe Color CC поможет, когда есть картинка, и вы хотите выгрузить её основные цвета. Программа определяет палитру из 5 доминирующих цветов изображения, которую можно сохранить и использовать в презентациях. Бесплатно.
• Colorzilla -расширение для  Google Chrome и  Mozilla Firefox, которое включает инструменты colour picker, eye-dropper, css gradient generator и palette browser. Достаточно навести пипеткой на нужный цвет на любом сайте и скопировать код.
  
• ColorPick Eyedropper — расширение с пипеткой, работает аналогично предыдущего: наводите ей на понравившийся цвет и получаете его код. Для Chrome и Firefox.

~

Подбор цвета

Загрузите картинку и сделайте из нее палетку.

• Coolors.co — ресурс с палитрами, которые можно создавать самим или заимствовать из коллекци
• Material Design Color Tool
• flatuicolors.com
• flatuicolorpicker.com
• COLOURlovers — коммьюнити цветовых фанатов, которые делятся палитрами, цветами, фонами и графическими шаблонами. Здесь есть цветовые тренды из интерьеров, журналов, сайтов и даже уличной моды. В разделе «Browse» можно найти авторские цвета и палитры и скачать фоны для презентации.
• Web Colour Data — сайт, на котором можно ввести URL нужного сайта и получить его цветовую палитру.
• Movies In Color — подбирает цветовые палитры известных фильмов.

~

Как выбрать цвет для сайта

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

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

• Черный. Надежный, утонченный и опытный. Используется для продвижения предметов роскоши.
• Белый. Простой, спокойный и чистый.
• Красный. Уверенность, молодость и власть. Нередко используется для тотальных распродаж.
• Оранжевый. Дружелюбный, теплый и энергичный. Создает призыв к действию: регистрироваться, покупать или продавать.
• Желтый. Счастье, оптимизм и тепло. Обычно используется для привлечения внимания к витрине.
• Зеленый. Мир, рост и здоровье. В маркетинге применяется для расслабления.
• Синий. Доверие, безопасность и стабильность. Обычно используется для банков и бизнесов.
• Пурпурный/фиолетовый. Роскошный, креативный и мудрый. Обычно применяется в индустрии красоты и антивозрастных товаров.
• Розовый. Романтичный и женственный. Используется для продвижения товаров для женщин и молодых девушек.

Черный

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

Белый

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

Красный

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

Оранжевый

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

Желтый

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

Зеленый

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

Синий

Цвет доверия. Он обычно показывает надежность, успокаивает.

Пурпурный

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

Розовый

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

Коричневый

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

~

Влияние цвета на покупку товара

Исследование проводилось в Северной Америке.

Любимые цвета

Нелюбимые цвета

~

Цветовые модели

• CMYK: Cyan (синеватый), Magenta (красноватый), Yellow (желтый), и Key («ключевой» — черный). То есть эта модель состоит из трех основных цветов и черного, который позволяет создавать более темные оттенки. Используется в живописи и печати.
• RGB-модели: red, green, blue — красный, зеленый, синий. Используется в компьютерах, телевизорах и других электронных устройствах

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

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

Аналогичные (Analogous Colors)

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

Complementary

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

Расщепленные дополняющие цвета (Split-Complementary)

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

Триада цветов (Triadic colors) 

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

Tetradic/Double-Complementary

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

Behance

Dribbble Colors

Color Hunter

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

Designspiration

Можешь выбрать сразу 5 цветов и посмотреть, что нашлось в это цветовой палитре.

Tineye Multicolr

На сайте 20 миллионов изображений по лицензии Creative Commons из Flickr.

~

Больше статей по теме

Color in Design: Influence on Users’ Actions

Digital colour mixing explained

Why Color Matters

Responding To Color

The Psychology of Color in Marketing and Branding

Color Theory for Designers, Part 1: The Meaning of Color

Color Associations

Why Color Matters

Birren, Faber., Color Psychology and Color Therapy.

blog.alevi.ru

Идеальная палитра цветов для сайта ТОП6 сервиса

Приветствую Вас! На связи с Вами снова Владимир Савельев. Сегодня статья будет ориентирована в основном на новичков. Именно на начальном этапе многие не могут «на глаз» сказать какая палитра цветов для сайта подойдет идеально?!

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

Читай так же:

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

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

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

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

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

Палитра цветов для сайта ТОП-6 сервиса

1. Начну я с обзора самого моего любимого сервиса — colorhexa.com.
Почему я начал именно с этого сервиса? Все просто, просто этот сервис действительно подойдет для самых ленивых пользователей. Однако, несмотря на свою простоту – этот сервис настоящая находка для веб-дизайнеров.

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

2. Сервис Color Blender
Вот так название! Вы пользовались когда-нибудь блендером? Думаю, что да, потому как соки, мороженное, молочные коктейли и многое что еще – делаются именно в этой чудо-технике.

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

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

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

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

5 и 6. Еще стоит упомянуть об онлайн сервисах paletton.com и Сolor scheme designer, с их помощью Ваша палитра цветов для сайта будет идеальна!

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

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

А Вы слышали про программу Color Browser, которая позволяет вам найти очень даже интересные цвета для своего сайта. Данная программа работает без Интернета. Вы ее скачиваете здесь и устанавливаете на свой ПК. Далее для работы Вам потребуется такая программа как Adobe AIR. Скачать данную программу можно здесь.

Стоит упомянуть так же, о таблице безопасных цветов… Они одинаково отображаются на любых мониторах!

Таблица безопасных цветов для сайта

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

savme.ru

Как выбрать цветовую палитру для дизайна вашего сайта | DesigNonstop

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

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

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

Цветовая модель RGB
Наиболее распространена в веб-дизайне. Аббревиатура RGB означает названия трех цветов: Red (красный), Green (зеленый), Blue (синий). Его исходным цветом является черный (экран монитора). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать белый цвет. В HTML документах цвета задаются символами от 00 до FF в шестнадцатиричном коде перед которыми ставится символ #.

Цветовая модель CMYK
Эта модель характерна для полиграфии и печати. Аббревиатура CMYK означает названия четырех цветов: Cyan (голубой), Magenta (пурпурный), Yellow (желтый), Key (черный). Его исходным цветом является белый (лист бумаги). Все остальные цвета на нем получаются путем комбинации трех цветов, которые в своей смеси должны образовать черный цвет.

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

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

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

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

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

Так на приведенных ниже примерах третий и четвертый — это основные контрастные цвета. 1 и 2 — оттенки третьего, а 5 — оттенок четвертого.

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

Аналоговая палитра 

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

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

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

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

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

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

www.designonstop.com

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

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

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

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

Что нужно для создания палитры цветов

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

Давайте разделим нашу палитру на три группы.

Оттенки серого

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

Не исключено, что в вашем случае понадобится намного больше вариантов серого. Поначалу кажется, что 3-4 — это более, чем достаточно, однако вскоре вам захочется, например, добавить элемент чуть темнее №2, но немного светлее №3 и т.п.

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

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

Основной цвет(а)

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

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

Цвета для акцентов

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

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

…желтый (по аналогии со светофором) будет предупреждать посетителей:

…а с помощью зеленого сможете выделить положительную динамику:

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

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

Прежде всего, решите, какие оттенки вам нужны

Если для вашей задачи понадобятся более светлые или темные тона, не стоит прибегать к помощи CSS настроек «lighten» или «darken», генерирующих результаты на лету. В итоге они дают довольно широкий диапазон значений, что лишь слегка отличаются между собой. Дабы избежать подобных проблем, сначала составьте свой набор оттенков, которые собираетесь применять в работе.

Но как сделать палитру цветов подобную этой?

Начните с основного цвета

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

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

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

Определите крайние оттенки в палитре

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

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

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

Заполняем пробелы

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

Кстати, девять – довольно удобное число, отлично подходит при разделении/заполнении всех оттенков. Для удобства назовем наиболее светлый вариант – 100, основной – 500, а максимально темный – 900. Затем начинаем подбирать оттенки 300 и 700 – те, что находятся в центре между базовыми. Они должны выглядеть как идеальные промежуточные решения.

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

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

Что с серым цветом?

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

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

Это не точная наука

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

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

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

design-mania.ru

119 трендовых цветов для создания фантастических сайтов (на 50 живых примерах).

Вам знакома эта проблема? Вы хотите создать сайт, но понятия не имеете, какой цвет подобрать и как лучше сочетать цвета? Пробуете, что-то делать, но в итоге получается какая-то «абра-кадабра»? Хорошая новость! Благодаря этой статье Вы получите мощный и готовый инструмент по подбору цветов. Это действительно достойно Вашего внимания.

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

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

Не буду тянуть резину. Давайте начнем.

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

vladimirchernyshov.ru