Конвертер цветов

Цветовая модель HEX

Кодирование цвета в формате HEX — это, по сути, шестнадцатеричное представление рассмотренной выше модели RGB.

Все коды цветов этой модели представляются в комбинированном виде из триады цифр в шестнадцатеричной системе счисления, в которой каждая из трёх групп отвечает за свой составляющий цвет. Длина группы фиксированная – 2 символа. Такой подход позволяет всё так же указать 256 состояний нужного цветового коэффициента. Значения каждого из групп коэффициентов должны быть между 00 и FF.

Для браузеров возможна и упрощённая форма записи цвета в HEX-формате, где указываются всего три символа кода вместо 6. В таком случае, подразумевается что каждая из трёх групп состоит из одинаковых символов. Например, AAFF11, можно сократить до AF1.

Примеры передачи цвета в WEB при помощи HEX-модели для CSS-стилей элементов:

Помимо указанных особенностей, HEX-модель поддерживает и alpha-канал для управления прозрачностью, в таком случае добавляется четвертый коэффициента в диапазоне от 00 и FF (256 значений). В таком случае использование сокращённой формы записи уже недопустимо.

Пример передачи цвета в WEB при помощи HEXA-модели для CSS-стилей элементов:

Как выбрать идеальный цвет

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

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

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

Попросите у клиента информацию о рекламных продуктах компании — если повезет, вам выдадут брендбук и вопрос о подборе цвета отпадет.

Ищите готовые цветовые схемы на сайтах:

• ColorHunt — цветовые палитры высокого качетсва с функцией быстрого предпросмотра. Отличный ресурс, если вам достаточно четырех цветов.
• COLOURlovers — отличное сообщество по цвету, с разнообразными инструментами для создания цветовых палитр.
• Coolors — генератор легких цветовых палитр, позволяющий оставить выбранные цвета и заменить все остальные.
• Flat UI Colors — отличный набор цветов для UI, один из самых популярных
• Material Design Colors — еще одна отличная палитра UI. Она не только предоставляет богатый ассортимент цветов, но и предлагает разные “веса” или уровни яркости каждого цвета.
• Palettab — расширение для Chrome, которое показывает новую палитру цветов и шрифт на каждой вкладке.
• Swiss Style Color Picker — еще одна коллекция хороших цветовых палитр

Coolors — онлайн-сервис для анализа цветовой палитры

Сервис Coolors поможет проанализировать основные цвета снимка или картинки.

Как с ним работать, чтобы узнать, что за цвет изображен на фото:

1. Сверху на панели инструментов видно схематичное изображение фотокамеры. Щелкните по ней.

   Создание палитры по фото в Coolors

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

   Загрузка картинки на сайт Coolors

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

   Как добавить цвет с фото в палитру Coolors

4. Нажав на кнопку «Next», можно экспортировать палитру в формате png или просмотреть информацию о выбранных оттенках.

   Где найти кнопку Next в онлайн-программе Coolors

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

Кнопка для перехода к созданию коллажа

Далее:

1. Покрутите снизу на шкале настройки, чтобы добиться наиболее удачного цветового расклада.

   Как менять цветовой расклад Coolors

2. Нажмите «Next». Найдите в маленьком всплывающем меню опцию «Create Collage». Кликните по ней.

   Как создать коллаж в Coolors

3. Посмотрите, как может выглядеть ваша палитра.

   Внешний вид палитры

4. Выбирайте, какой аспект картинки будет отображаться.

   Выбор аспекта в Coolors

5. Определитесь, как именно организовать цвета.

   Возможности сервиса Coolors

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

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

Названия кнопок:	Назначение:
View shades.	Щелкните здесь, и сервис покажет список родственных оттенков – от самого светлого до самого темного.
Drag.	Нажатие этой кнопки позволит вам затем произвольно перемещать цвет по палитре. Так можно проверить, как он смотрится в другом окружении.
Lock.	Если кликнуть на эту опцию, то при каждом обновлении палитры выбранный вами цвет останется зафиксированным.

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

Дальтонизм Coolors

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

Раздел Популярное в Coolors

HSLA цвета

По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа-канала, который задает уровень прозрачности со значениями от до 1 (от невидимого до полностью непрозрачного).

Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:

<p style = color: hsla(0,100%,50%,0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> 
<p style = color: hsla(0,100%,50%,0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.2 --> 
<p style = color: hsla(0,100%,50%,0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> 
<p style = color: hsla(0,100%,50%,0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> 
<p style = color: hsla(0,100%,50%,0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> 
<p style = color: hsla(0,100%,50%,0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> 
<p style = color: hsla(0,100%,50%,0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> 
<p style = color: hsla(0,100%,50%,0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.8 --> 
<p style = color: hsla(0,100%,50%,0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 --> 

Выбор цвета

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

На данных иллюстрациях представлены панели выбора цвета программ Paint, Photoshop, и Fireworks:

MS Paint: стандартная панель цветов Windows.

Adobe Photoshop CC: уже лучше, но представление цветового пространства по-прежнему плоское.

Adobe Fireworks CS6: цветовой круг, свойства цвета, широкие возможности по подбору палитры цветовых сочетаний.

В следующих статьях, посвящённых теории цвета, представлена кубическая модель цвета. Она более удобна для работы, так как во-первых даёт чёткое понятие места (координат) каждого цифрового цвета, и во-вторых наглядно показывает взаимодействие двух систем цифрового представления цвета (RGB и CMYK).

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

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

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

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

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

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

Основные цвета (Primary Colors)

Определение основных цветов зависит от того, как мы собираемся воспроизводить цвет. Цвета, видимые при расщеплении солнечного света с помощью призмы, иногда называют спектральными цветами. Это красный, оранжевый, жёлтый, зелёный, голубой, синий и фиолетовый. Эту комбинацию КОЖЗГСФ часто сводят к трём цветам: красный, зелёный и сине-фиолетовый, которые являются основными цветами аддитивной системы цветов (свет). Первичными цветами субтрактивной системы цветов (краска, пигмент) являются циан, фуксин и жёлтый. Запомните, комбинация «красный, жёлтый голубой» не является комбинацией основных цветов!

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

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

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

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

Типы цветовых сочетаний

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

Монохромные цвета (mono)

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

Соседние (аналоговые) цвета (analogic)

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

Дополняющие (противосторонние) цвета (complement)

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

Дополняющие совмещенные цвета (triad)

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

Парная четверка

К паре дополняющих цветов добавляется пара аналоговых.

Акцентирование аналоговых цветов

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

Цвета RGB.

Основные цвета RGB, в области представления, могут совмещаться друг с другом, в результате создавая дополнительные: желтый (yellow) – составной из красного с зеленого; пурпурный (magenta или fuchsia) – из красного и синего; голубой (cyan, он же aqua) — из синего и зеленого. Все три цвета вместе воспроизводят белый, а отсутствие освещения – черный.

Оттенки зависят от интенсивности излучения: от 0 (отсутствие света) до 255 (максимальное значение), что в конечном результате дает спектральный выбор из 16 777 216 значений. Однако, несмотря на такое обилие цветов, их воспроизведение в полной мере обусловлено аппаратными возможностями оборудования: различные девайсы имеют разные алгоритмы вычисления входящих данных, а реакция цветовых компонентов (люминофоров или красителей) на отдельные каналы R, G, B полностью зависит от производителя, а зачастую и времени эксплуатации, как пример – “подсевший” экран телевизора или монитора.

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

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

Для перевода значений RGB или конвертации в другие цветовые модели (CMYK, HSV, HSL) можно воспользоваться калькулятором цветов.

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

Алгоритм

К выбору цветов нужно подходить последовательно:

1. Выбираем базовый цвет. Белый или серый — легко и правильно т.к. они подходят к стандартным отделочным материалам. Коричневый, персиковый, черный или любой другой, если хотите страдать.
2. Думаем о вещах, которые появятся в комнатах в процессе жизнедеятельности. Составляем список ВСЕХ вещей и цветов которые они могут иметь.
3. Учитывая предыдущий пункт, выбираем любимый основной акцентный (адекватный выбранному стилю дизайна).
4. По цветовому кругу выбираем к нему дополнительные.
5. Думаем о доле акцентных. От этого зависит допустимая насыщенность. Чем большую площадь занимает цвет, тем менее броским он должен быть.
6. Распределяем наши яркие пятна по разным точкам комнаты. Загруженность должна быть равномерной.
7. Понимаем главный принцип. Для стильного дизайна достаточно белого, серого, чёрного и дерева. Яркость мы добавляем чтобы сделать ещё круче. И в этом всегда лучше недоборщить, чем переборщить.
8. Упрощаем наш план по акцентным цветам раза в 2.

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

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

Натуральные

Итак, базовая палитра — белый, серый, чёрный и дерево.

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

Разобьём несколько реальных фотографий интерьеров на палитры:

Стоп.

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

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

Но всё же разберёмся как это делать.

Лучшие цвета для интерьера

Для интерьеров нас интересуют 2 внутренних кольца (пастельные цвета), 3 внешних (тёмные) и они же но с другой насыщенностью.

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

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

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

Кстати:

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

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

Они слишком агрессивны, они давят на психику и тянут на себя всё внимание

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

Итого исключаем из нашего интерьера:

1. Чистые красный, синий, зелёный.
2. Яркие насыщенные розовые цвета.
3. Тёмные и грязные зелёные(оставляем натуральный травяной зелёный, бледный пастельный и все смеси вроде фисташкового).
4. Бледно персиковый из отделки (в текстиле можно). Причина — персиковый приелся в евроремонтах начала двухтысячных.

Определение цветового круга

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

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

Сочетаемые и не сочетаемые между собой цвета в интерьере

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

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

А также примеры некоторых цветовых комбинаций.

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

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

Почему так много цветовых схем?

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

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

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

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

В связи с этим определяются цветовые схемы (color schemes) — набор первичных цветов, используемых для получения всех остальных цветов.

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

Imagecolorpicker — поможет понять, какие цвета использованы на картинке

Простой онлайн-сервис Imagecolorpicker позволяет быстро определить ключевую цветовую палитру.

Как определить цвет по фото с его помощью:

1. Залейте на сайт нужную картинку;
2. После загрузки сервис автоматически подскажет, какой цвет является доминирующим.

3. Нажмите на кнопку «Показать больше»;

   Где находится кнопка Узнать больше

4. Вы получите исчерпывающую информацию по любому из оттенков на палитре.

   Окно с дополнительной информацией

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

Как работать с сайтом Coolors.co

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

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

Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке.

Сервис Adobe Color CC

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

Сервис Colormind

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

Сервис Colors

Color Safe — этот инструмент понравится тем, кому небезразлична аббревиатура WCAG (Руководство по обеспечению доступности веб-контента, в которое входит множество рекомендаций, помогающих сделать информацию на сайте доступной разным пользователям — например, когда нужно учесть особенности восприятия слабовидящих людей). В алгоритм подборщика встроены необходимые параметры, что удобно при работе над сайтами.

Сервис Color Safe

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

Сервис

Paletton — еще один интересный инструмент для создания цветовых схем для сайта, во многом повторяющий возможности уже рассмотренного Adobe Color CC.

Сервис Paletton

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

Сервис Colordot

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

Сервис Colourcode

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

Сервис Material Design Palette

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

Оттенок (tint), тональность (tone), и тень (shade)

Эти термины часто используются неправильно, но они описывают довольно простое понятие в цвете. Главное помнить, насколько цвет отличается от своего начального тона (hue). Если к цвету добавляется белый, эта более светлая разновидность цвета называется «оттенок» (tint). Если цвет делается темнее путём добавления чёрного, полученный цвет называется «тень» (shade). Если же добавляется серый цвет, каждая градация дает вам различную тональность (tone).

Оттенки (добавляем белый к чистому цвету).

Тени (добавляем чёрный к чистому цвету).

Тональности (добавляем серый к чистому цвету).

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

Светлый + темный цвет= оптический вид. Темный цвет будет визуально сужать часть тела.

Светлый цвет+яркий=сложно и привлекательно

Темный+темный=идеальный наряд для любого случай (как показывает Виктория Бэкхем)

Темный + яркий = гламурно, идеально подходящий для ночи

Светлый+темный+яркий цвета= никогда не останетесь незамеченными

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

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

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

Цветовая модель СMYK — так получают цвет из красок

Эта модель построена на смешении четырёх типографских красок: Cyan (сине-зелёный), Magenta (пурпурный), Yellow (жёлтый) и Key («ключевой» цвет — чёрный). Диапазон цветов на печати гораздо более узкий, чем на современных мониторах компьютеров. Модель СMYK позволяет увидеть на электронных устройствах, как изменятся цвета на бумаге.

В модели CMYK каждый цвет кодируется четырьмя координатами, значения которых могут быть от 0 до 100%. Разные оттенки получаются из-за разных соотношений голубого, розового, жёлтого и черного цвета в их составе. Белый цвет в модели CMYK — это отсутствие краски.

Так выглядит любая напечатанная картинка при большом увеличении:

Новые цвета получаются путём наложения трёх основных друг на друга в разных пропорциях

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

• Красители, созданные с помощью химических веществ, не идеальны. На практике смешение трёх красок обычно даёт грязно-коричневый цвет.
• Цветные краски дороже. Например, если нам нужен тёмно-красный цвет, можно составить его из красного, синего и зелёного, а можно — из красного и чёрного. Второй вариант обойдётся дешевле при печати.
• У бумаги ограничена впитывающая способность. Чтобы получить максимально близкий к чёрному цвет, используя голубой, розовый и жёлтый, на лист нанесут 300% краски — газетная бумага такого не выдержит. А чистый чёрный цвет — это всего лишь 100% процентов краски.

Яркость (Value/Brightness)

Когда мы говорим, что цвет «тёмный» или «светлый», мы имеем в виду его яркость. Это свойство сообщает нам, насколько свет светел или тёмен, в том смысле, насколько он близок к белому. Например, канареечный жёлтый цвет считается светлее синего «navy blue», который в свою очередь сам светлее чёрного. Таким образом, значение (value) канареечного жёлтого выше, чем синего «navy blue» и чёрного.

Низкая яркость, постоянная — одинаковый уровень яркости.

Контраст яркостей — серый = ахроматичный.

Контраст яркостей — полное различие яркости.

Яркость (используется термин «value» или «brightness») зависит от количества света, излучаемого цветом. Самый простой способ запомнить это понятие — это представить себе шкалу серого цвета, со сменой чёрного на белый, в которой содержатся все возможные варианты монохроматического серого цвета. Чем больше в цвете света, тем он ярче. Таким образом пурпурный — менее яркий, чем небесно-голубой, так как излучает меньше света.

Эту шкалу серого цвета можно приравнять к цветной шкале с помощью того же уравнения, которое используется в телевидении (Яркость серого цвета = 0.30 Red + 0.59 Green + 0.11 Blue):

Интерактивная демонстрация иллюстрирует изменение яркости в двухмерной схеме:

Тип 3 – Стильные и креативные сайты с большим количеством графики

Если вы собираетесь создать сайт, связанной с творчеством (мода, дизайн, ресторанный бизнес, красота и т.д.), для вас нет никаких ограничений.

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

Старайтесь всегда придерживаться одного правила:

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

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

Несовершенство цветовых моделей

Модели Lab, HSB, RGB и CMYK — основные, с которыми сталкиваются дизайнеры, иллюстраторы и фотографы. Они упрощают работу, но реальная цветопередача не так предсказуема. Например, RGB и CMYK, с которыми работают чаще всего, — это аппаратно-зависимые модели.

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

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

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

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

Физиология восприятия цвета

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

Ощущение цвета возникает в мозге при возбуждении и торможении цветочувствительных клеток — рецепторов глазной сетчатки человека или животного, — колбочек. У человека и приматов существует три вида колбочек, различающихся по спектральной чувствительности, — ρ (условно «красные»), γ (условно «зелёные») и β (условно «синие»), соответственно. Светочувствительность колбочек невысока, поэтому для хорошего восприятия цвета необходима достаточная освещённость или яркость. Наиболее богаты цветовыми рецепторами центральные части сетчатки.

Каждое цветовое ощущение у человека может быть представлено в виде суммы ощущений этих трёх цветов (т. н. «трёхкомпонентная теория цветового зрения»). Установлено, что пресмыкающиеся, птицы и некоторые рыбы имеют более широкую область ощущаемого оптического излучения. Они воспринимают ближнее ультрафиолетовое излучение (300—380 нм), синюю, зелёную и красную часть спектра. При достижении необходимой для восприятия цвета яркости наиболее высокочувствительные рецепторы сумеречного зрения — палочки — автоматически отключаются.

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

Схемы сочетания цветов на цветовом круге

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

Монохромное – сочетание разных оттенков одного цвета.

Аналогичное – сочетание от 2 до 5 оттенков из трех рядом расположенных секторов.

Комплиментарное – сочетание основного и противоположного ему цвета.

Сплит-комплиментарное – сочетание основного и пары противоположных ему цветов.

Триада – сочетание 3-х цветов, равноудаленных друг по отношению другу.

Тетрада – две пары секторов, расположенных напротив.

Квадрат – четыре равноудаленных сектора.

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

Установлено, что наиболее удачны для человеческого зрения комбинации 2-3 цветов. Тем не менее, творческие люди при создании графических образов довольно часто основывают образ на большем количестве цветовых оттенков.