Цветовые схемы для гугла

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

12.2020

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

Хочу заметить, что предложенные сервисы лишь отчасти помогают решить данную проблему. К ним стоит относиться лишь как к вспомогательным рабочим инструментам. Так в чем секрет? Как научиться выбирать цвета? Где кроется правда? Ответ прост.

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

ЦВЕТОВЫЕ СХЕМЫ: КАК СОЧЕТАТЬ ЦВЕТА

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

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

1. Adobe Color

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

• Последовательная
• Монохромная
• Треугольная
• Комплементарная
• Сплит-комплементарная
• Двойная сплит-комплементарная
• Квадратная
• Составная
• Оттеночная
• Произвольная

Есть также интересный раздел, в котором сервис анализирует работы других авторов и различные творческие проекты из галерей Behance и Adobe Stock. Можно отслеживать моду на определенные цветовые тенденции.

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

Дополнительный функционал

• Генерация палитры из загруженной фотографии
• Генерация градиента из загруженной фотографии
• Симулятор дальтонизма
• Поддерживает RGB, PANTONE, HSV, CMYK и LAB

2. ColorScheme.Ru

Сочетание цветов. Цветовые схемы и их использование // Types of color schemes

Colorscheme.ru– это сервис, который дает пользователям возможность не только подобрать гармоничные цвета и оттенки, используя цветовой круг, но и познакомиться с цветовой теорией. На сайте вы найдете множество интересных статей из книги Иоханнеса Иттена “Искусство Цвета”. Рекомендую обязательно их прочитать. В них содержится базовая информация о цвете.

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

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

Дополнительный функционал

• Симулятор дальтонизма
• Поддерживает RGB, PANTONE и RAL

3. Color.Hailpixel.Com

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

Дополнительный функционал

• Поддерживает RGB и HSL

4. Colorhunt.Co

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

Дополнительный функционал

• Поддерживает RGB

5. Coolors.Co

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

Что мне еще понравилось, так это то, что создатели предлагают нам функцию преобразования цветов в различные цветовые системы. Сайт работает со следующими системами: HEX, RGB, CMYK, HSB, HSL, LAB, XYZ, LCH, LUV и HWB.

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

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

Дополнительный функционал

• Генерация палитры из загруженной фотографии
• Создание коллажа из загруженной фотографии + сгенерированная палитра
• Палитры градиентов
• Создание градиентов
• Проверка контрастности цвета текста и фона
• Поддерживает HEX, RGB, CMYK, HSB, HSL, LAB, XYZ, LCH, RAL, HKS, COPIC, PRISMACOLOR, LUV и HWB
• Приложение для IOS + аддон для Adobe + расширение для Chrome

6. Hslpicker.Com

В сервис Hslpicker.comвынесена лишь одна полезная функция. Это работа с цветовым пространством HSL. Бывает полезна при составлении гармоничных палитр для иллюстраций и веб дизайна. Позволяет удобно подбирать оттенки для светлых участков и теней.

Дополнительный функционал

• Поддерживает HEX, RGB и HSL

7. Mycolor.Space

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

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

Дополнительный функционал

• Поддерживает HEX и RGB
• Создание 2-х цветного градиента CSS
• Создание 3-х цветного градиента CSS

Источник: supermicrostock.ru

Наборы цветовых палитр с фото

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

Загрузить ещё

• Сортировать по:
• времени
• просмотрам

Привет,
рады вас видеть!

Забыли пароль?

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

Регистрация нового аккаунта

Помочь проекту

Что нам улучшить или добавить на сайт? Ваш ответ поможет проекту

Есть идеи и предложения?

Напишите нам, мы попробуем их воплотить или поправить косяки. Google Form

Источник: gradients.app

Цветовая схема для сайта

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

Как создать цветовую схему для сайта
Сервисы и сайты для подбора цветовых схем
Литература по теории цвета
Подборка цветовых схем
Подведем итоги

Как создать цветовую схему для сайта

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

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

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

Определенные цвета передают определенные эмоции:

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

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

Что касается самостоятельного составления цветовых схемы – правильные цветовые сочетания довольно сложно подобрать, потому что правильный подбор опирается на множество правил. Основное в правильных сочетаниях – это лидирующий цвет, от которого подбираются все остальные (бывают схемы без лидирующего цвета, но это – редкость, пример – Google Chrome). От лидирующего цвета подбираются ближайшие оттенки и противоположности. Ближайшие оттенки – это цвета, которые лежат в узком конусе цветового круга, противоположные цвета – это цвета на равном удалении от основного цвета:

От количества оттенков и количества/удаленности противоположных цветов зависит качество цветовых гармоний.

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

Сервисы и сайты для подбора цветовых схем

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

Adobe Color CC

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

Colormind

Рандомизатор цветовых палитр. Жмете на «Generate» – получаете набор из 5 подходящие друг другу цветов. Цвета можно переставлять местами, каждый из них можно тонко настраивать. Если вам понравится один цвет, но не понравились остальные – вы можете нажать на замок, и этот цвет не будет меняться при новой генерации, а все остальные цвета будут подбираться под него. Как вариант – можете воспользоваться одной из готовых цветовых схем, такие у генератора тоже есть.

Coolors

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

ColorSafe

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

Material Color Tool

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

Литература по теории цвета

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

1. Жан-Габриэль Косс «Цвет. Четвертое измерение».Как понятно из названия, автор утверждает, что цвет – серьезный и глубокий параметр, который наряду с длиной-высотой-шириной формирует наше восприятие. В книге много внимания уделено влиянию цветов на повседневную жизнь и восприятие.
2. Теренс Конран «О цвете».Книга рассказывает о теории цветов на примерах из жизни и бизнеса.
3. Михаил Матюшин «Справочник по цвету».Практическое пособие по цвету, содержащее в себе множество цветовых таблиц и примеров их использования.
4. Джозеф Альберс «Взаимодействие цвета».Книга написана в 60-х годах прошлого века, но до сих пор является актуальной и востребованной. В книге автор рассказывает не только про сочетания цветов, но и про оптические иллюзии, вызванные цветами.
5. Джеймс Гарни «Цвет и свет».Эта книга больше ориентирована на художников, поскольку в ней детально рассматривается взаимодействие цвета и света, что отражается в названии. Но для подбора цветовых схем книга тоже сгодится, потому что цвет сам по себе и сочетания цветов автор рассматривает с точки зрения колористики.

Подборка цветовых схем

10 самых популярных цветовых схем со ссылками на Coolors:

1. 
   https://coolors.co/palette/264653-2a9d8f-e9c46a-f4a261-e76f51
2. 
   https://coolors.co/palette/cdb4db-ffc8dd-ffafcc-bde0fe-a2d2ff
3. 
   https://coolors.co/palette/ccd5ae-e9edc9-fefae0-faedcd-d4a373
4. 
   https://coolors.co/palette/606c38-283618-fefae0-dda15e-bc6c25
5. 
   https://coolors.co/palette/e63946-f1faee-a8dadc-457b9d-1d3557
6. 
   https://coolors.co/palette/8ecae6-219ebc-023047-ffb703-fb8500
7. 
   https://coolors.co/palette/edede9-d6ccc2-f5ebe0-e3d5ca-d5bdaf
8. 
   https://coolors.co/palette/03045e-023e8a-0077b6-0096c7-00b4d8-48cae4-90e0ef-ade8f4-caf0f8
9. 
   https://coolors.co/palette/000000-14213d-fca311-e5e5e5-ffffff
10. 
    https://coolors.co/palette/001219-005f73-0a9396-94d2bd-e9d8a6-ee9b00-ca6702-bb3e03-ae2012-9b2226

FAQ

Насколько цветовые схемы важны?

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

Есть ли курсы по подбору цветов?

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

• Профессия «Графический дизайнер». На курсах вас полностью научат создавать стиль как для печатной продукции, так и для сайтов. Вы познакомитесь с теорией и практикой дизайна, научитесь разрабатывать брендбуки и подбирать цвета. Курс построен так, чтобы вы уже в середине него смогли найти свою первую работу.
• Профессия «Веб-дизайнер». Более узкоспечифичный курс, направленный конкретно на веб-дизайн. В остальном все так же – вас научат создавать полноценные стили в теории и на практике. Через 3 месяца с начала обучения сможете искать первую работу.
• «Профессия Веб-дизайнер (UX/UI)». Курс рассчитан на 5 месяцев, за которые вас с нуля научат разрабатывать полноценный дизайн сайта. Курс – полностью дистанционный, с практикой и защитой работ. Обучение – дешевое по сравнению с другими крупными школами.

Подведем итоги

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

Источник: www.sravni.ru