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

Содержание:

Цветовые Сочетания

Цветовая Гармония – основные приемы создания цветовых схем

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

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

Основные цветовые схемы

Комплементарные или дополнительные цвета

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

Классическая триада

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

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

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

Контрастная триада (сплит – дополнительных цветов)

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

Тетрада – сочетание четырех цветов

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

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

Квадрат

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

Теплые и холодные цвета

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

Палитра цветов — инструкция по работе в Adobe Color

Теперь разберёмся, как работать с палитрой цветов в программе. Заходим в сервис Adobe Color и регистрируемся. Можно обойтись и без этого, но тогда вы не сможете сохранять палитры в библиотеке. Впрочем, чтобы сэкономить время, можно авторизоваться через Facebook. Итак, пройдёмся по разделам и вкладкам Adobe Color.

Раздел «Создать»:

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

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

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

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

Листаем чуть ниже

Обратите внимание, что слева можно развернуть вкладку и выбрать цветовой режим из RGB, CMYK, HSV и LAB. В зависимости от этого будут меняться бегунки, но цвет остаётся тем же

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

Таким образом, автоматически подбирается цветовая палитра. Как только определились с основным цветом, вспомните о типах схем слева:

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

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

Извлечение темы

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

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

Извлечение градиента

Новинка в Adobe Color — извлечение градиента. Загрузка картинки происходит аналогичным образом

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

А затем в разделе «Цветовой круг» вставить его в основной столбец и поиграть цветами.

Цветовая игра

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

Раздел «Смотреть»

Если вас ещё не посетили идеи по поводу цветового оформления сайта, зайдите в раздел «Смотреть». Изучайте все источники или разверните вкладку справа. И откройте Цветовые темы, Творческие проекты или Фотографии Stock, чтобы смотреть готовые решения. Наслаждайтесь и вдохновляйтесь красивыми видами, пока не определитесь.

Тенденции

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

Моя библиотека

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

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

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

ColorGrab – приложение для идентификации цвета по фото

Для владельцев смартфонов на базе Андроид существует приложение Color Grab.

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

  1. Запустите программу. Наведите фотокамеру на нужный объект.
  2. Приложение немедленно выведет информацию об обнаруженном цвете: координаты HSV, RGB, название. Сохраните его в библиотеке.
  3. После этого цвет можно экспортировать в графический редактор, разослать в виде текстового файла по почте или в соцсетях, отправить в Dropbox, поставить на рабочий стол.

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

Коллекция цветов в Colorgrab

Цветовой круг для сочетания цветов в интерьере

Практика

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

Возьмём реальный пример, где цвета подобраны правильно и при этом интерьер небанальный:

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

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

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

Давайте выбирать цвет дивана и стены.

Всё не то.

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

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

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

Типы сочетания цветов в интерьере

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

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

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

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

В интерьерах лучше всего использовать первые 2 типа сочетаний. Остальные рискованные и сложные, хотя это и не значит что их нельзя сочетать. Но только если уверены в своём вкусе.

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

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

Важно!

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

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

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

Выбор готовой палитры

Бесплатный онлайн подбор цветов, все палитры уже готовы, вы только выбираете. В программе ColorDrop (https://colordrop.io/ ) представлены очень удобные 4-х цветные палитры для различных целей. Палитры составлены специалистами по цветовому оформлению. Цвета обозначены в различных кодах, что дает больше возможности для подбора в компьютерной графике, художественной краски, строительной краски, цвета ткани, отделки, полиграфии.

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

Какие цвета для сайта стоит использовать?

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

Желтый – символ молодости, оптимизма и жизнерадостности

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

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

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

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

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

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

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

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

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

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

Подбор цветов с помощью цветового круга

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

Рис. С: На цветовом круге существует четыре возможных триады цветов

Но триадами не стоит ограничиваться. Можно выбрать и комплементарные (complementary) цвета, т.е. те цвета, которые расположены в круге прямо напротив друг друга — например, красный и зелёный. Они называются комплементарными/дополняющими потому, что будучи помещёнными рядом, они делают друг друга ярче и живее, см. рис. D.

Рис. D.: цвета, противоположные друг другу на круге называются комплементарными/дополняющими

Примечание: от латинского «Complementum» — термин переводится как «дополняющий/дополнительный», в более современной литературе как «комплИментарный», и как «комплЕментарный» в равных пропорциях. Последний вариант мы считаем правильным.

Система CMYK

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

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

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

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

Соответственно, существуют комбинации цветов, смешивая которые мы можем полностью поглотить все цвета, отражаемые бумагой, и сделать её чёрной. Опытным путём была выведена комбинация «циан-маджента-жёлтый» (CMY) — cyan/magenta/yellow.

В идеале, смешивая эти цвета, мы должны были бы получить чёрный цвет. Однако на практике так не получается из-за технических качеств красителя. В лучшем случае, что мы можем получить, — это темно-бурый цвет, который лишь отдалённо напоминает чёрный. Более того весьма неразумно было бы использовать все три дорогие краски только для того, чтобы получить элементарный чёрный цвет. Поэтому в тех местах, где нужен чёрный, вместо комбинации трёх красок наносится обычный более дешёвый чёрный краситель. И потому к комбинации CMY обычно добавляется буква K (Key — «ключевой», или blacK) — обозначающая чёрный цвет.

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

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

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

Сочетание цветов онлайн, что это такое

Здравствуйте, друзья! Сочетание цветов онлайн – это дополнение одного цвета к другому цвету. Такие цвета есть на специальных сервисах в Интернете и отображаются в виде палитры, круга, цветовых схем. Цвета могут быть разными: абстрактные, перемешанные в градиент, гармоничные, аналоговые и другие (скрин 1).

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

Далее мы разберем инструкцию по подбору цветов и создадим цветовую гамму.

ColorSnap

Генератор цветовой палитры от бренда Sherwin-Williams устанавливают на устройства с Андроид и iOS. Главная задача заключается в создании пользователем своей базы комбинации цветов, применяя несколько вариантов:

  • собственный фотоснимок,
  • рекомендованные картинки,
  • оформление палитры из цветовой гаммы.

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

Дизайн интерьера с помощью ColorSnap

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

Дайджест Квартблога

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

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

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

Зеленый цвет в интерьере: 25 восхитительных деталей — Зеленый цвет красит интерьер — убедитесь сами!

Серый с розовым: 30 примеров нежного цветового сочетания — 30 нежных примеров настроят на романтический лад.

Фотографии: kdzjj.com, homester.com.ua, homestolove.com, tidsrominterior.no, livingroomideas.eu, decorfacil.com, pinterest.com, roomble.com

уроки дизайна, цвет

Гармония близких цветов (родственная)

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

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

Заключение и итоги

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

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

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

  • Выбрать для сайта правильный преобладающий цвет;
  • Выбрать для преобладающего цвета правильные вспомогательные цвета;
  • Выбрать соответствующий фоновый цвет.

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

Данная публикация является переводом статьи «How to Choose a Good Color Scheme For Your Website» , подготовленная редакцией проекта.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector