Сочетание цветов для сайта. Советы и рекомендации

Сочетание цветов для сайта

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

Вначале разберём правила специалистов. Дизайнеры советуют использовать пропорции 60-30-10. Хороший совет, если учитывать, что применяется 3-4 цвета. Оптимальное сочетание цветов для сайта.

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


цвета на сайте

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

Заметили соотношение цветов 60-30-10 на kinopoisk, я нет. Это правило подойдёт для блогов и небольших сайтов. Думаю, даже идеально впишется. На таких порталах, как kinopoisk, много разной информации, сложно добиться описанного сочетания, что не скажешь о сайте mvideo, где оно выполняется.

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

 

Природа вам поможет!

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


Оформление сайта

Какие цвета вы увидели?

Зелёный (два три оттенка).

Серый (два оттенка, светлый и тёмный).

Сиреневый.

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

 

Городская местность

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


Подбираем цвет

 

Профессиональные дизайнеры

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

 

Инструменты

Популярный инструмент дизайнеров — https://color.adobe.com/ru/. Задаёте интересующийся цвет и создаёте палитру. Преимущество сервиса – доступность. Кликайте по ссылке, он откроется в браузере. Палитра интегрируется в программу фотошоп (это для тех, кто использует версию для ПК). В самой программе включается через функцию: окно расширения темы Adobe Color.


популярный инструмент дизайнеров

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


Цвета из изображения

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


Генерация цветовых схем

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


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

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

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

Всего хорошего! С уважением Вадим Сулик.

Понравилось? Поделитесь с друзьями, нажав на одну из кнопок:


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

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