Подбор цветовой палитры — 28 лучших инструментов

COLOURlovers

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

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

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

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

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

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

Что почитать про колористику: подборка книг

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

Вот самые лучшие из них.

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

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

Еще одна фундаментальная работа на тему истории цвета и его восприятия. Когда автор писал этот труд, он начал терять зрение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Монохромная

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

Аналоговая

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

Комплементарная

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

Раздельно-комплементарная

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

Триадическая

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

Четвертичная/Сдвоенно-комплементарная

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

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

Adobe Color

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

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

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

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

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

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

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

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

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

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

Behance

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

Dribbble Colors

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

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

Designspiration

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

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

Tineye Multicolr

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

Colorzilla

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

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

Shutterstock Spectrum

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

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

W3Schools

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

Принципы формирования композиций цветов в интерьере

Различают 2 типа цветовых сочетаний: однотонный и полихромный.

Однотонный тип

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

Принцип аналоговой триадыИсточник pobetony.ru

Комплементарное, или контрастное сочетание цветов в интерьере

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

Контрастные тона в спальнеИсточник houzz.se

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

Контрастное сочетание цветов с доминирующим фиолетовымИсточник seattlehelpers.org

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

Круг Иттена поделен на 12 частей. В каждой части представлены все оттенки одного цвета. По интенсивности идет возрастание от центра вверх, к краю.

Цветовой круг – удобный инструмент для дизайнерских решенийИсточник dizain.guru

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

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

Цветовой круг для создания гармоничных интерьеровИсточник greatlabel.ru

Серый

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

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

Примеры:

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

Типографика делает этот сайт современным, а светло-серый фон усиливает этот эффект.

Холодный серый цвет делает этот сайт утонченным и современным.

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

Благодаря нескольким оттенкам серого, этот сайт выглядит одновременно профессионально и утонченно.

Чек-лист хорошей цветовой палитры

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

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

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

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

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

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

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

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

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

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

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

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

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

HSL

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

HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).

Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).

1. h1 { color: hsl(120, 100%, 50%); } /* зелёный */
2. h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
3. h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
4. h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */

HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.

Кремовый и цвет слоновой кости

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

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

Примеры:

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

Натуральные коричневые цвета элементов страницы делают серо-кремовый фон теплее.

Если бы не кремовый фон, этому сайту не доставало бы элегантности.

Кремовый фон усиливает тему старины, которая создается за счет элементов графики.

Благодаря фону цвета слоновой кости и другим светлым цветам, сайт выглядит очень элегантно.

Вкратце

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

Правила сочетания цветов в интерьере для разных стилей

При выборе цвета учитывают следующее:

Нужные цвета в интерьере определяет стиль оформления.
Не стоит в одном помещении использовать более 5 тонов, чтобы не нарушить гармонию.
В фаворе нейтральные и смешанные оттенки.
Для акцента уместны насыщенные цвета.
Фундамент декорирования – основные тона. Они должны быть представлены большими массами. Окраска стен, потолков, пола – главное поле их использования. Также присутствуют в обивке мебели, в оформлении окон.
Два основных цвета нельзя делить пополам. Одного должно быть больше, другого меньше.
Разнообразие вносят 1-2 дополнительных тона

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

Контрастное сочетание цветов в интерьереИсточник pinterest.at

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

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

Хроматичность (Chromaticity, Chorma)

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

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

Высокая хроматичность — очень сияющие, живые цвета.

Низкая хроматичность — ахроматичные, бесцветные цвета.

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

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

Хроматичность, которую часто называют «сочностью», является количеством цвета (hue) в цвете. Цвет без цвета (hue) является ахроматичным или монохроматичным, и видим как серый. Для большинства цветов, по мере увеличения яркости увеличивается и хроматичность, за исключением очень светлых цветов.

Оранжевый (второстепенный цвет)

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

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

Примеры:

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

Оранжевый изображает самую очевидную ассоциацию — огонь.

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

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

Оранжевые акценты добавляют визуального интереса и привлекают внимание к основному действию (call to action)

ColorScheme

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

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

Синий (основной цвет)

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

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

Примеры:

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

Благодаря темно-синему цвету (особенно в сочетании с белым фоном) сайт выглядит профессионально. Светло-голубые акценты делают его более интересным.

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

Светлый, приглушенный голубой придает сайту ощущение расслабленности и спокойствия.