чем определяется цветовой тон
Часто можно услышать, как люди говорят: «Какой красивый синий оттенок». или «Какой оттенок зеленого тебе нравится?» или «Какой тон вам больше нравится?» или «Этот оттенок слишком светлый».
Вы когда-нибудь задумывались, что именно они подразумевают под этими цветовыми терминами? Позвольте пояснить разницу между ними. Как только вы поймете разницу, вы больше никогда не будете их путать. Вам также будет намного проще смешивать цвета, создавая неповторимые изображения.
Тон или цвет?
В общем, они вроде как похожи, но технически нет.
На самом деле, разница между ними очень проста.
Когда вы используете цвет в каком-либо проекте, очень полезно говорить или четко обдумывать каждый из них. Итак, позвольте объяснить разницу между тоном и цветом как можно проще.
ТОН относится к доминирующей цветовой семье конкретного цвета, на который мы смотрим. Белый, черный и серый никогда не называют тоном.
На фото выше вы, очевидно, сразу узнаете тона. Но как насчет более сложных цветов, которые мы хотим воспроизвести в наших произведениях искусства или проектах?
Как говорить про цвета
Что, если на цветовом круге выбрать цвет, который находится между двумя другими основными цветами, например, между желтым и зеленым, где ни желтый, ни зеленый не доминируют? Очевидно, вы могли бы описать его как желто-зеленый тон, и не ошиблись бы.
Вскоре вы сможете легко определить оттенок более конкретно. Вы начнете углубляться в детали и произвести на себя впечатление, описав цвет примерно так:
«Цвет имеет желтый тон, сильно склоняющийся к зеленому».
Это действительно проясняет, что смесь начиналась с первичного желтого цвета и постепенно переходила к вторичному зеленому цвету.
Нейтральные цвета также содержат тона в зависимости от исходного цвета. С другой стороны, чистый черный, чистый белый и чистый серый не содержат тонов.
Вот несколько примеров того, как вы можете внимательно посмотреть на цвет, чтобы решить, какой из цветов является доминирующим. Если вы установите это в своем уме, то вам станет намного проще воссоздавать цвета или смешивать их дальше.
Что такое оттенок цвета
Оттенок иногда также называют пастелью. Но если быть точным, Теория цвета определяет истинный оттенок как любой тон или смесь чистых цветов с добавлением только белого.
Оттенок осветляет цвет, но не делает его ярче. Хотя может показаться, что цвет изменился, но на самом деле это не так. Сам цвет остается тем же, только становится светлее. Более того, даже небольшое количество белого, добавленного к цвету, преобразует его в оттенок.
Таким образом, оттенок может варьироваться от немного более светлого, чем исходный цвет, вплоть до белого, при котором почти не смешивается какой-либо из цветов.
Кроме того, настоящий оттенок не содержит серого.
Чтобы создать настоящий оттенок, просто добавьте белый к любому отдельному цвету на цветовом круге или к любому из этих чистых цветов, смешанных вместе.
Что такое тональность цвета?
Теория цвета определяет истинную тональность, как любой оттенок или смесь чистых цветов с добавлением только серого. Если быть точным, в этом определении серый считается действительно нейтральным. Другими словами, в сером нет дополнительных цветов, кроме белого и черного.
Нейтральная смесь серого, независимо от того, насколько она светлая или темная, снизит интенсивность любого цвета. В качестве общего предупреждения, будьте осторожны с тем, сколько серого вы добавляете. Слишком большое количество серого настолько притупляет цвет, что становится невозможно вернуть блеск.
Тональные цвета обычно считаются более приятными для глаз. Они сложные, тонкие и изощренные. Потому что яркие чистые цвета чаще всего ассоциируются с детьми.
Вообще говоря, почти каждый цвет, который мы видим в нашем повседневном мире, был в той или иной степени имеет тональность. На фото ниже посмотрите на сами цвета, не думая о них как о шерсти. Практически каждый комплект представляет собой слегка тональную версию оригинальных чистых цветов. Обратите внимание, как кажется, что почти каждый вариант содержит немного серого.
Что такое тени цвета
Теория цвета определяет истинные тени, как любой чистый оттенок или смесь чистых цветов с добавлением только черного. Другими словами, полученный цвет совершенно не содержит ни белого, ни серого.
Тени затемняют цвет. Остается тот же оттенок только в более темной версии. Как было отмечено выше, даже небольшое количество белого или серого, добавленного к цвету, преобразует его в тон.
Таким образом, оттенок может варьироваться от немного более темного, чем исходный цвет, вплоть до почти черного с едва ли смешанным цветом.
Цветовой круг и основные понятия: тон, насыщенность и яркость цвета
Цветовой круг представляет собой определённое расположение цветов для удобства их сочетания и применения.
Цветовые круги начали создавать ещё в XVII—XVIII веках с позиции мистических учений. Цвет основательно изучался физиками, и я рассказала о том, что такое цвет и как получили систему RGB в этой статье. Скажу кратко, что сам спектр был получен экспериментально, когда цвета разложили и получили искусственную радугу.
Самый знаменитый круг, который применяют в дизайне, был создан Иоганнесом Иттеном, одним из преподавателей школы Баухауз в Германии в первой половине XX века.
Пурпурный включен в цветовой круг искусственно
Цветовой круг представляет собой цвета, которые плавно перетекают из одного в другой, согласно расположению естественного спектра. За исключением пурпурного цвета, который включили в цветовой круг искусственно. Дело в том, что этого цвета нет в естественном спектре цветов, при разложении белого на составные части. Но чтоб замкнуть круг и сделать плавный переход от красного к фиолетовому, добавили между ними пурпурный.
Первичные, вторичные и третичные цвета
Среди цветов круга выделяют основные или первичные цвета — это желтый, красный и синий. Считается, что их нельзя получить путем смешивания. Но здесь идёт речь о физической краске, потому что в системе RGB, когда цвет идёт от луча, то жёлтый получается путем смешивания зеленого и красного.
К вторичным цветам относятся зеленый, оранжевый и фиолетовый. Они получаются путем смешивания основных цветов и на цветовом круге располагаются между цветами, из которых они состоят. Оранжевый получается путем смешивания желтого с красным, зеленый состоит из синего и желтого, а фиолетовый получится если смешать красный с синим.
Третичные цвета получаются путем смешивания основного и вторичного — желто-зеленый, желто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый и сине-зеленый.
Хроматические и ахроматические цвета
Все цвета спектра у нас являются хроматическими.
Все цвета от черного до белого являются ахроматическими.
Каждому хроматическому цвету соответствует определенный ахроматический, потому что в любом цвете содержатся черные и белые пигменты. Они дают разную насыщенность и светлоту хроматического цвета. В момент обесцвечивания, мы теряем тон, но количество черного и белого остаются, они и дают разные серые оттенки.
Основные понятия: Тон, насыщенность, яркость, светлота
Цветовой круг также можно разложить по яркости и насыщенности цвета. Эту модель уже называют HSB, о ней подробно я буду писать в следующих статьях. Но здесь просто рассмотрю сами значения.
Тон
Понятие тон совпадает с понятием цвет. Это, в принципе, одно и то же. Когда говорят «Синий тон», подразумевают синий цвет. Соответственно, и употребляют его также со словами темнее или светлее.
Подтон
Подтон — это примесь другого цвета в определенном тоне, которая слегка улавливается. Например коричневый может быть с красным подтоном или желтым, синий может быть с зеленым подтоном, а может быть с желтым. Подтоном может быть цвет, который расположен рядом в цветовом круге.
Яркость цвета
Яркость является характеристикой нашего восприятия, и она всегда зависит от того, какие цвета находятся рядом. То есть яркость всегда определяется по сравнению с чем-то или насколько сильно цвет выделятся среди других. И тогда мы говорим, что он яркий.
По сути, яркость цвета — это то, с какой скоростью мы выделили один цвет из всех других. Это относительная величина, но чаще всего самыми яркими являются чистые цвета спектра, либо самые светлые, т.е. приближенные к белому.
Насыщенность
Насыщенность цвета всегда определяется в пределах одного тона. Например, насыщенность синего определяется тем, как много или мало в нём примеси серого цвета. Чем больше в цвете присутствует серого, тем меньше его насыщенность. Чистый цвет, без примеси серого, будет насыщенным.
Когда говорят о насыщенном цвете, то подразумевают чистый тон с умеренными примесями черного и белого.
В противоположность понятию насыщенность используют слово — блеклость цвета. Также можно применить «приглушенный» тон, что тоже означает, что в цвете присутствует достаточно серого.
Оттенок
Оттенок — это небольшое изменение цвета в пределах одного тона
Светлота цвета
Каждый цвет содержит в себе примеси черного и серого цвета. Чем больше этих примесей, тем цвет темнее, а чем меньше светлее.
Любой цвет мы можем обесцветить, т.е. сам тон убрать и оставить только количество серого и черного. Те цвета, которые содержат мало черного и серого станут светло-серыми, а которые содержат много, станут темно-серыми.
Так вот, светлота — это характеристика того, как мало в цвете серого и как много белого. Здесь надо не путать с насыщенностью, потому что там определяется в переделах одного тона. А понятие светлота распространяется на все цвета.
Каждый цвет и оттенок имеет свою светлоту. Самым светлым является яркий желтый, а самыми темными являются синий и фиолетовый.
Голубой, зеленый, розовый и красный являются промежуточными по светлоте.
Теперь у меня появилась страница в чем разница» rel=dofollow»>страница на Facebook. Если вам интересна эта тема, можете присоединиться и следить за выходом новых статей. Буду рада вас видеть 🙂
Цветовые пространства: большой разбор
Всё, что нужно знать о CMYK, RGB, HSL, HSB, LAB и чистых градиентах.
Для работы с цветом необходимо хорошо понимать, как он устроен. Есть системы представления цвета, с которыми дизайнер сталкивается каждый день. Но есть и другие, не столь популярные модели. Разберёмся, как они устроены, чем отличаются и как эти знания можно применить на практике.
Ведущий интерфейсный дизайнер в K&K TEAM, увлечён дизайном, технологиями и людьми. В свободное время ведёт Telegram-канал «Karoza Ҩ»
Воспроизводимые представления цвета
Цветовые модели RGB и CMYK соответствуют физическому представлению цвета на носителе. RGB отвечает за то, с какой интенсивностью светятся диоды красного, зелёного и синего цветов внутри пикселя монитора. CMYK задает пропорции смешиваемой краски на листе бумаги.
Цветовое пространство CMYK — субтрактивное: если сложить все цветовые компоненты, то итоговый цвет будет чёрным. По этому же принципу работают обычные краски, а потому пространство CMYK используется в полиграфии. Через процентные соотношения в нём записаны пропорции смешения четырёх красок: бирюзовой ( Cian), пурпурной ( Magenta), жёлтой ( Yellow) и чёрной ( Key color, blac K). Интенсивность каждого цвета задаётся в процентах от 0 до 100.
Дизайнеры, работающие с печатью, знают, что не все видимые на экране цвета возможно воспроизвести в CMYK. Связано это с тем, что модель RGB ― с ней работает монитор ― построена на излучении света, а CMYK ― на поглощении.
Для более точного отображения цветов при печати требуется допечатная подготовка. Во время неё экранные цвета пространства RGB переводятся в CMYK, чтобы получаемые оттенки на экране и бумаге были максимально приближены друг к другу.
Pantone — американская компания, основанная в 50-е годы в Нью-Йорке и занимающаяся производством пигментов и продажей чернил. Компания разработала систему стандартизации цветов Pantone Matching System (PMS), в которой каждому цвету присваивается специальный код.
Поскольку не все цвета можно воспроизвести в CMYK наложением четырёх стандартных красок во время печати, в полиграфии существует дополнительная палитра Pantone. Например, серый и жёлтый, которые Pantone выбрала в качестве цветов 2021 года, получить наложением палитры CMYK на листе невозможно.
Выбор цветов Pantone шире, потому что его на бумагу наносят одной краской, тон которой получен смешением пигментов ещё на фабрике. Также цвета Pantone используют при печати больших тиражей в один-три цвета.
PMS — Pantone Matching System — система подбора цвета, но не цветовое пространство, так как у цветов есть код, но нет значений цветовых координат.
CMYK используется в полиграфии для печати фотографий и цветных иллюстраций, небольших тиражей, а также в домашних и офисных принтерах.
RGB ― это цветовое пространство, здесь каждый цвет задаётся в виде трёх координат. Смешение цвета происходит по аддитивному принципу ― если сложить все три основных цвета, то результат будет не чёрным, а белым. Поэтому RGB используется в системах, построенных на излучении света, что делает её самой распространённой ― с ней работают все экраны.
Цветовой оттенок в RGB создаётся смешиванием красного ( Red), зелёного ( Green) и синего ( Blue) каналов с разной интенсивностью излучения. Яркость каждого из трёх основных цветов закодирована числом от 0 до 255, то есть занимает 256 бит или 32 байта.
Например, RGB (90, 0, 157) соответствует фиолетовому, а RGB (255, 223, 0) — жёлтому.
Для удобства записи придуманы HEX-коды обозначения цветов, в которых интенсивность каждого из трёх цветов задаётся через двузначное число в шестнадцатеричной системе, что даёт те же 256 комбинаций или 32 байта, ведь
16 × 16 = 256.
В шестнадцатеричной системе цифры обозначаются от 0 до F, в результате
HEX-коды выглядят вот так: #5A009D — фиолетовый, #FFDF00 — жёлтый. Преимущество такой записи ― стандартизация и удобство копирования короткого цветового значения.
Иногда HEX-код в CSS или графических редакторах содержит только три знака, в таком случае каждый второй символ в записи с овпадает с первым. То есть #F45 интерпретируется как #FF4455, #000 — #00000.
Поскольку с цветовым пространством RGB работают все экраны, то применяется оно практически везде ― от разработки макетов для печати (цвета переводятся в CMYK в самом финале) до разработки сайтов и интерфейсов.
Свойства цвета
Перед тем как перейти к следующему разделу, нужно разобраться в некоторых определениях колористики — науки, изучающей свойства цвета.
Важные понятия
Цветовой тон (Hue) — положение цвета в видимом спектре. Человеческий глаз различает цвета от красного до фиолетового, цветовой тон ― это место цвета в спектре. Красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый — всё это цветовые тона.
Насыщенность (Saturation) — интенсивность цвета, красочность, степень отличия цвета от равного по светлоте серого. Чем ближе цвет к серому, тем он менее насыщенный.
Яркость (Brightness) — приближённость цвета к чёрному. Чем ниже яркость, тем цвет темнее. Нередко яркость путают с насыщенностью, но это разные характеристики.
Цилиндрические цветовые пространства
Модель RGB технически подходит для компьютеров и экранов, но в этом пространстве сложно работать, если нужно изменить что-то одно ― яркость, насыщенность или цветовой тон.
Допустим, мы используем синий цвет RGB (63, 42, 255), но для второго макета нам нужен более тёмный синий того же тона или же зелёный той же яркости и насыщенности. При изменении одной характеристики изменились сразу три параметра: синий теперь имеет значения RGB (18, 12, 77), а зелёный —
RGB (67, 255, 42).
Поэтому в программах для дизайнеров цветовой тон настраивается полоской, а яркость и насыщенность ― через цветовое поле.
Координаты цвета существуют в кубической системе RGB, но в графических редакторах управление цветом реализовано с использованием другой модели ― цилиндрической версии RGB, которая называется HSB или HSV.
В HSB цветовой тон ( Hue) задаётся в градусах на цветовом круге от 0° до 360°, а насыщенность ( Saturation) и яркость ( Brightness) в процентах от 0% до 100%.
Чтобы получить в HSB чёрный, надо уменьшить яркость до 0%, а тон и насыщенность не важны. Для получения белого нужно понизить насыщенность до 0% — то есть приблизить цвет к серому, а яркость повысить до 100%. Для получения чистых цветов яркость и насыщенность должны быть 100%.
Иногда цветовое пространство HSB называют HSV ( H ue — цветовой тон, S aturation — насыщенность, V alue — значение). Не стоит путаться — это альтернативное название, а не другое цветовое пространство.
В CSS помимо HEX-кодов RGB применяют цилиндрическое цветовое пространство HSL, где вместо яркости ( Вrightness) используется светлота ( Lightness). HSB и HSL очень похожи, но не идентичны.
Главное отличие HSL в том, что при любых значениях тона и насыщенности светлота в 0% даст чёрный, а светлота в 100% — белый. В HSB 100% последнего параметра ― яркости — даёт наиболее яркий цвет, а белый возможен, только если насыщенность равна нулю.
То есть светлота в HSL отвечает за примесь чёрного или белого, освещённость. При конвертации цвета из системы HSL в HSB изменение параметра L будет влиять на два параметра сразу — S и B, неизменным сохранится только цветовой тон — H.
Цилиндрические цветовые пространства полезны в ситуациях, когда нужно управлять только одним из параметров цвета. Например, для создания палитры, где изменение основного цвета приводит к изменению цветового тона, насыщенности или светлоте дополнительных. В этом случае дополнительные цвета необходимо задавать через отклонения от основного в цилиндрической цветовой системе.
В новой философии дизайна Material You компании Google цвета интерфейса подстраиваются под цвет обоев рабочего стола. Вполне возможно, что для такой автоматической подстройки применяют алгоритмы, использующие цилиндрическое цветовое пространство.
Дано: пользователи двух статусов.
Задача: автоматически создавать аватары пользователям с учётом их статуса. У одних пользователей должны быть светлые буквы на тёмном фоне, а у других — тёмные буквы на светлом.
Для изменения цветового тона необходимо изменить параметр Hue, а остальные параметры сохранить. Для светлого фона используем значения HSL: [0–360°], 100%, 78%, а для тёмного — HSL: [0–360°], 100%, 30%.
В результате цветовой тон аватарок генерируется автоматически с заданной светлотой, а буквы на них хорошо читаются.
LAB и LCh
Одна из проблем пространств RGB и CMYK состоит в том, что это просто
набор значений, которыми должно оперировать устройство вывода ― принтер или экран. Реальное отображение цвета, заданного в RGB и CMYK, зависит от множества факторов. При печати ― от качества краски и печатного оборудования, плотности бумаги, влажности воздуха. На экранах — от качества монитора и его калибровки. Не говоря уже о том, что освещение также влияет на фактическое восприятие цвета глазом.
Создатели CIELAB, также известно как LAB, преследовали цель спроектировать такое цветовое пространство, которое не будет привязано к конкретному устройству и покроет весь видимый спектр. Также было важно, чтобы изменение значений координат было нелинейным и приводило к изменению цвета по логике, близкой к осознанию цвета человеком.
Значения цвета в LAB задаются через светлоту ( Lightness) и две координаты, отвечающие за хроматическую составляющую: тон и насыщенность.
A — положение цвета в диапазоне от зелёного до красного, B — от синего до жёлтого.
Параметр L варьируется от 0 до 100, а параметры A и B в большинстве сервисов для работы с LAB имеют значения от −128 до 128, поскольку координаты A и B обозначают не просто интенсивность какого-то цвета, а спектр между двумя цветами.
Система достаточно сложная, но можно попытаться представить её как смешение четырёх цветов — зелёного, красного, синего и жёлтого. На самом насыщенном срезе цветового пространства со светлотой 100 по углам находятся: зелёный — LAB (100, −128, 128), красный — LAB (100, 128, 128), фиолетовый — LAB (100, 128, −128), бирюзовый — LAB (100, −128, −128), а в самом центре белый —
LAB (100, 0, 0). Как и в случае с RGB, настраивать цветовой тон удобнее в цилиндрической версии LAB — LCh.
Цилиндрическая версия LAB называется LCh, вместо прямоугольных в ней используются полярные координаты. Параметр C ( Chroma — хроматическая составляющая, насыщенность) отвечает за длину радиуса и удалённость от центра цветового круга, а h ( Hue) за угол поворота в градусах — то есть цветовой тон.
LAB используют как промежуточное цветовое пространство для конвертирования RGB в CMYK и наоборот, поскольку оно не привязано к конкретному носителю.
В цветокоррекции его применяют, чтобы быстро убрать желтизну или усилить естественные цвета фотографии. Некоторые цветокорректоры предпочитают LAB, если с его помощью внести изменения будет проще, нежели через корректирующие слои.
Также ранее LAB использовали для удаления шума на цифровых фотографиях. Для этого достаточно было размыть цветовые каналы A или B, а поскольку цифровой шум состоит из бледных разноцветных точек, такой подход делал их менее насыщенными.
Отдельное преимущество LAB — возможности для создания чистых градиентов между насыщенными цветами. Красивые градиенты важны не только в проектировании интерфейсов и дизайн-макетов, но и в информационном дизайне.
Задача: создать чистый градиент между насыщенными цветами.
Проблема: из-за технических нюансов RGB между некоторыми насыщенными цветами при построении градиента возникает странный сероватый оттенок.
Пояснение: в кубической визуализации RGB самые насыщенные цвета расположены на углах куба, а центр занят ненасыщенными сероватыми тонами. Если создавать градиент из цветов, которые находятся на противоположных углах или гранях куба, прямая пройдет через ненасыщенную середину. Так произойдёт, например, с градиентами от фиолетового к зелёному или от жёлтого к синему.
Решение: использовать LAB-градиент.
Открываем Lch and Lab colour and gradient picker, выбираем два цвета, между которыми надо сделать переход, и вводим желаемое количество ступеней.
Копируем цвета из колонки Lab и переносим в редактор, делая линейный градиент из выбранного количества шагов.
Если в качестве редактора вы используете Figma, то нужно установить плагин Chromatic Figma, который автоматически исправляет градиенты через LAB. Результат будет немного отличаться от инструмента Дэвида Джонстона.