Что такое насыщенный цвет
Что такое насыщенный цвет
Войти
Авторизуясь в LiveJournal с помощью стороннего сервиса вы принимаете условия Пользовательского соглашения LiveJournal
2.10 Насыщенность. Чистота
В физическом плане насыщенность цвета определяется характером распределения излучения в спектре видимого света. Наиболее насыщенный цвет образуется при существовании пика излучения на одной длине волны, в то время как более равномерное по спектру излучение будет восприниматься как менее насыщенный цвет. В субтрактивной модели формирования цвета, например при смешении красок на бумаге, снижение насыщенности будет наблюдаться при добавлении белых, серых, чёрных красок, а также при добавлении краски дополнительного цвета. (Источник)
Хроматическую композицию можно построить, варьируя насыщенность одного цвета постоянной светлоты. Это достигается добавлением к выбранному цвету нужного количества равного ему по светлоте серого. В результате варианты выбранного цвета образуют чистый ряд по насыщенности, в которой насыщенность закономерно изменяется, светлота остается неизменной, а цветовой тон ахроматизируется. (Источник)
Когда к чистому цвету добавляется черный, то меняется его светлота:
Ещё пример, как изменяется насыщенность синего при добавлении к нему серого:
Изменение насыщенности и светлоты оттенков оранжевого и синего:
Различают несколько качественных характеристик насыщенности цвета:
— живая (vivid) насыщенность;
— сильная (strong) насыщенность;
— глубокая (deep) насыщенность.
Ненасыщенные цвета характеризуются, как тусклые (dull), слабые (weak) или вымытые.
Пример изменения цвета в зависимости от его светлоты (value) и насыщенности (chroma), на примере красного цвета из книги цвeта Манселла:
А так выглядит зеленый цвет с одинаковой светлотой, но с разной насыщенностью (даны процентные соотношения первичных цветов в системе CMYK):
Таким образом, мы рассмотрели 3 основных параметра, по которым оценивается цвет (тон, светлота, насыщенность).
Словарь теории цвета
Цветом можно любоваться бесконечно, но вот обсуждать тему цвета, порой бывает трудно. Дело в том, что слова, которые мы используем для описания цвета, слишком неточны и часто приводят к взаимному непониманию. Путаница происходит не только с такими техническими терминами как «яркость», «насыщенность» и «цветность», но даже с такими простейшими словами, как «светлый», «чистый», «яркий» и «тусклый». Даже специалисты ведут свои споры так до сих пор и не утвердив стандартные определения понятий.
Цвет — это феномен света, вызываемый способностью наших глаз определять различные количества отражённого и проецируемого света. Наука и технология помогла нам понять, как физиологически человеческий глаз воспринимает свет, измерить длины волн света, узнать количества несомой ими энергии. И теперь мы понимаем, насколько сложно понятие «цвет». Ниже мы рассказываем о том, как мы определяем свойства цвета.
Мы попытались составить словарь терминов и понятий. И хотя мы не претендуем на единственный авторитет в теории цвета, определения, которые вы здесь найдёте, подкрепляются другими математическими и научными аргументами. Пожалуйста, сообщите нам, если в данном словаре отсутствуют какие-либо слова и понятия, о которых вы бы хотели узнать.
Тон (Hue)
Иные переводы: цвет, краска, оттенок, тон.
Именно это слово мы имеем в виду, когда задаём вопрос «Какой это цвет?». Мы интересуемся свойством цвета, которое называется «Тон/Hue». Например, когда мы говорим о красном, жёлтом, зелёном, и синем цветах, мы имеем в виду «тон/hue». Различные тона создаются светом с различной длиной волны. Таким образом, этот аспект цвета обычно довольно легко распознать.
Контраст тонов — явно различные тона.
Контраст тона — различные оттенки, одинаковый тон (синий).
Термин «тон» описывает главную характеристику цвета, которая отличает красный цвет от жёлтого и синего. Цвет в значительной степени зависит от длины волны света излучаемого или отражаемого объектом. Например, диапазон видимого света находится между инфракрасным (длина волны
700nm) и ультрафиолетовым (длина волны
На диаграмме показан цветовой спектр, отражающий эти границы видимого света, а также две цветовые группы (красная и синяя), которые называются «семействами тонов». Любой цвет, взятый из спектра можно смешать с белым, чёрным и серым, и получить цвета соответствующего семейства тонов. Обратите внимание, что в семействе тонов присутствуют цвета с различной яркостью, хроматичностью и насыщенностью.
Хроматичность (Chromaticity, Chorma)
О хроматичности мы говорим, когда рассуждаем о «чистоте» цвета. Это свойство цвета говорит нам, насколько он чист. Это означает, если в цвете отсутствуют примеси белого, чёрного или серого, цвет имеет высокую чистоту. Эти цвета выглядят живыми и чистыми.
Понятие «хроматичность» связано с насыщенностью. И его часто путают с насыщенностью. Однако мы будем продолжать использовать эти термины раздельно, потому что на наш взгляд они относятся к различным ситуациям, о чём будет сказано несколько ниже.
Высокая хроматичность — очень сияющие, живые цвета.
Низкая хроматичность — ахроматичные, бесцветные цвета.
Хроматичность одинакова — средний уровень. Та же живость цветов несмотря на различный тон; чистота меньше, чем у образцов выше.
Высокохроматические цвета содержат максимум собственно цвета с минимальными или нулевыми примесями белого, чёрного или серого. Иными словами, степень отсутствия примесей других цветов в конкретном цвете характеризует его хроматичность.
Хроматичность, которую часто называют «сочностью», является количеством цвета (hue) в цвете. Цвет без цвета (hue) является ахроматичным или монохроматичным, и видим как серый. Для большинства цветов, по мере увеличения яркости увеличивается и хроматичность, за исключением очень светлых цветов.
Насыщенность (Saturation)
В связке с хроматичностью, насыщенность говорит нам, как цвет выглядит в различных условиях освещённости. Например, комната окрашенная в один цвет, ночью будет выглядеть иначе, чем днем. В течение дня, несмотря на то что цвет будет неизменён, его насыщенность будет меняться. Насыщенностью не имеет отношения к словам «тёмный», «светлый». Вместо этого используйте слова «бледный», «слабый» и «чистый», «сильный».
Насыщенность одинаковая — та же интенсивность, различные тона.
Контраст насыщенности — различные уровни наполнения, тон одинаковый.
Насыщенность, которую также называют «интенсивностью цвета» (intensity), описывает силу цвета относительно его яркости (value) или светлоты (luminance/lightness). Иными словами, насыщенность цвета обозначает его отличие от серого при определённой яркости освещения. Например, цвета близкие к серому ненасыщенные по сравнению с более светлыми цветами.
У цвета свойство «живой» или «полный» является ни чем иным, как отсутствием примеси серого или его оттенков. Важно отметить, что насыщенность измеряется вдоль линий одинаковой яркости.
Насыщенность/Saturation: 128
Яркость (Value/Brightness)
Когда мы говорим, что цвет «тёмный» или «светлый», мы имеем в виду его яркость. Это свойство сообщает нам, насколько свет светел или тёмен, в том смысле, насколько он близок к белому. Например, канареечный жёлтый цвет считается светлее синего «navy blue», который в свою очередь сам светлее чёрного. Таким образом, значение (value) канареечного жёлтого выше, чем синего «navy blue» и чёрного.
Низкая яркость, постоянная — одинаковый уровень яркости.
Контраст яркостей — серый = ахроматичный.
Контраст яркостей — полное различие яркости.
Яркость (используется термин «value» или «brightness») зависит от количества света, излучаемого цветом. Самый простой способ запомнить это понятие — это представить себе шкалу серого цвета, со сменой чёрного на белый, в которой содержатся все возможные варианты монохроматического серого цвета. Чем больше в цвете света, тем он ярче. Таким образом пурпурный — менее яркий, чем небесно-голубой, так как излучает меньше света.
Эту шкалу серого цвета можно приравнять к цветной шкале с помощью того же уравнения, которое используется в телевидении (Яркость серого цвета = 0.30 Red + 0.59 Green + 0.11 Blue):
Интерактивная демонстрация иллюстрирует изменение яркости в двухмерной схеме:
Яркость/Value: 128
Светлота (Luminance/Lightness)
Несмотря на то, что вместо этого слова часто употребляют слово «яркость» (brightness), мы предпочитаем использовать слово «светлота» (или «светимость»). Понятие «светлота цвета» связано с многими теми же переменными, что и яркость в смысле «value». Но в данном случае используется другая математическая формула. Если говорить кратко, вспомните цветовой круг. В нем цвета расположены по кругу с одинаковой светлотой. Добавление белого увеличивает светлоту, добавление чёрного — уменьшает.
Это измерение цвета относится к яркости (value), но отличается по своему математическому определению. Светлота цвета измеряет интенсивность потока света на единицу площади его источника. Рассчитывается она путём вычисления среднего в группе ахроматичных цветов.
Достаточно сказать, что светлота растёт от очень тёмного до очень светлого (сияющего) и может быть отображена с помощью цветового круга, который показывает все цвета (hue) с одинаковой светлотой. Если к цветовому кругу добавить немного света, мы тем самым увеличим интенсивность света и таким образом увеличим светлоту цветов. Противоположное произойдёт, если мы уменьшим свет. Сравните, как выглядят плоскости, отображающие светлоту, с плоскостями, отображающими яркость (выше).
Светлота/Luminance: 128
Оттенок (tint), тональность (tone), и тень (shade)
Эти термины часто используются неправильно, но они описывают довольно простое понятие в цвете. Главное помнить, насколько цвет отличается от своего начального тона (hue). Если к цвету добавляется белый, эта более светлая разновидность цвета называется «оттенок» (tint). Если цвет делается темнее путём добавления чёрного, полученный цвет называется «тень» (shade). Если же добавляется серый цвет, каждая градация дает вам различную тональность (tone).
Оттенки (добавляем белый к чистому цвету).
Тени (добавляем чёрный к чистому цвету).
Тональности (добавляем серый к чистому цвету).
Комплементарные, дополнительные цвета (Complementary Colors)
Когда два или несколько цветов «подходят друг к другу», их называет комплементарными, дополняющими друг друга цветами. Этот признак абсолютно субъективен, и мы готовы его обсудить и выслушать другие мнения. Более точным определением будет «если два цвета, будучи смешанными вместе, дают нейтрально-серый (краска/пигмент) или белый (свет) цвет, они называются дополняющими, комплементарными».
Основные цвета (Primary Colors)
Определение основных цветов зависит от того, как мы собираемся воспроизводить цвет. Цвета, видимые при расщеплении солнечного света с помощью призмы, иногда называют спектральными цветами. Это красный, оранжевый, жёлтый, зелёный, голубой, синий и фиолетовый. Эту комбинацию КОЖЗГСФ часто сводят к трём цветам: красный, зелёный и сине-фиолетовый, которые являются основными цветами аддитивной системы цветов (свет). Первичными цветами субтрактивной системы цветов (краска, пигмент) являются циан, фуксин и жёлтый. Запомните, комбинация «красный, жёлтый голубой» не является комбинацией основных цветов!
Системы цветов RGB, CMYK, HSL
В различных случаях в зависимости от того, как воспроизводится цвет, используются различные цветовые системы. Если мы используем источники света — доминирующей системой является RGB (от «red/green/blue» — «красный/зелёный/синий»).
Для цветов, которые получаются путём смешивания красок, пигментов или чернил на ткани, бумаге, полотне или другом материале, в качестве цветовой модели используется система CMY (от «cyan/magenta/yellow» — «циан/фуксин/жёлтый»). В связи с тем, что чистые пигменты очень дороги, для получения чёрного цвета используется не равная смесь CMY, а просто чёрная краска.
Другой популярной цветовой системой является HSL (от «hue/saturation/lightness» — «цвет/насыщенность/яркость»). У этой системы есть несколько вариантов, где вместо насыщенности используется хроматичность (chroma), светлота (luminance) вместе с яркостью (value) (HSV/HLV). Именно эта система соответствует тому, как человеческий глаз видит цвет.
Базовые понятия в колористике
Театр начинается с вешалки, а изучение колористики — с базовых понятий и терминов. Как и в любой другой науке, понимание основ колористики является гарантией ее более успешного и полного освоения.
Что же такое колористика и кому она будет полезна? Колористика — это наука о цвете, которая включает в себя изучение его природы, характеристик, значения, а также культурных особенностей и практического применения. Трудно переоценить важность колористики в работе любого профессионала, так или иначе связанного с цветом. Безусловно, колористика — необходимый инструмент художников. Не менее важна она и для визажистов и парикмахеров. В арсенале дизайнера цвет и знания о нем могут стать мощнейшим инструментом для создания гармоничных, визуально приятных дизайнов. Цветом дизайнер может создать общее настроение продукта, сообщить пользователям об угрозе или возможной ошибке, направить внимание и выстроить иерархию элементов на странице. Изучение возможностей цвета — необходимое условие профессионального роста дизайнера.
Начнем изучение базовой терминологии с понятия «Цветовой тон». Цветовой тон — это характеристика цвета, отвечающая за его положение в видимом спектре. Как вы, наверняка, знаете, люди видят цвета в диапазоне от красного до фиолетового, это и есть видимый спектр. Так вот цветовой тон говорит нам, к какой части спектра относится цвет: синий он или красный или, может быть, зеленый. Просто называя цвет мы, по сути, указываем его цветовой тон. Различные тона создаются светом с разной длиной волны, а сама эта характеристика цвета обычно довольно легко распознается.
Следующим рассмотрим понятие хроматичности/ахроматичности цвета. Хроматичность — это свойство цвета, которое говорит о его чистоте и отсутствии в цвете примесей белого, серого или черного. По сути, все цвета являются хроматическими, так как в той или иной степени в них присутствует определенный оттенок. Ахроматические цвета не имеют никакого оттенка и не принадлежат ни к одной из частей спектра. Белый, черный и вся серая шкала являются ахроматическими цветами.
Цвет: тон, насыщенность, светлота
Продолжение темы про контраст
Прежде чем перейти к последнему виду контраста (контраст по площади) давайте поговорим о математике цвета.
Создано несколько моделей цветовых пространств: RGB, HSL, Lab. Сегодня рассмотрим HSL как наиболее простое для понимания. Данная цветовая модель характеризуется 3-мя
— Тон (Hue). Выражаясь простым языком это и есть «сам цвет» (красный, зеленый, синий и т.д.)
— Насыщенность (saturation). интенсивность определённого тона, то есть степень визуального отличия хроматического цвета от равного по светлоте ахроматического (серого) цвета. Уменьшение насыщенности разных тонов будет приводить к разным ахроматическим цветам.
— Светлота (lightness). Субъективная яркость участка изображения, отнесённая к субъективной яркости поверхности, воспринимаемой человеком как белая. Каждый тон в максимальной насыщенности будет иметь разную яркость
Для примера. Все цвета в этом ряду имеют одинаковую яркость. (насыщенность цветов различается)
Про цвет все. Следующим постом закончу тему с контрастом.
Если интересно могу рассказать про модели цветового пространства, +/-, где используются, история создания.
Графический и Веб-дизайн
606 постов 11.6K подписчиков
Правила сообщества
Публиковать свои посты / обзоры, и я до сих пор удивлен почему этого никто еще не делает. Практически любой более-менее вменяемый пост можно запилить, и я уверен, что его лампово примут.
Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.
1. Публиковать сообщения, картинки, не соответствующие тематике;
2. Размещать ссылки рекламного характера;
3. Перегибать палку;
в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;
А можете поподробней про третью картинку рассказать?
Как ее трактовать?
По горизонтали тон, по вертикали насыщенность, но вот именно такой картинки не видел.
Там показана субъективная яркость цветов?
довольно сухо, будто вики читаеш
про модели цветового пространства, +/-, где используются
Международная Церковь Конопли в США (Денвер, штат Колорадо)
В целом неплохо, но есть замечания
Дизайнерские игры для работы с цветом
Веб-дизайнер постоянно учится, чтобы прокачивать свои навыки и быть в тренде. Здесь собраны игры для работы с цветом, чтобы обучение проходило веселее.
Развитие цветового восприятия
Найди заданный оттенок на цветовой палитре. После каждого уровня палитра будет становиться больше. Смотри не растеряйся
Научит лучше различать оттенки. Следи за цветом большой полосы и ищи соответствие на палитре. Просто? Не тут то было.
Внимательность и восприятие
Найди среди всех плиток одну, что выбивается. С повышением уровня плитка растет, диапазон тонов уменьшается. Проверь зрение.
Прокачать зрительную память
Попробуй вернуть логотипу его узнаваемый оттенок, если еще помнишь, как это делать.
6 сервисов для игры с цветом
6 онлайн-сервисов для работы с колористикой. Цвета можно подбирать самому или воспользоваться готовой палитрой.
Сервис от компании Adobe для создания цветовых схем. Можно создать свою схему или посмотреть работы других дизайнеров.
На сайте собраны палитры Flat и Material-дизайна, Metro-интерфейса и цвета популярных соц.сетей. У сервиса есть аналог: flatuicolors.com
Большая коллекция фирменных цветов известных брендов, популярных сайтов и социальных сетей.
На сайте можно подобрать цветовую схему, нажимая нравится/не нравится. Цвет можно редактировать вручную. Каждый следующий цвет подбирается так, чтобы он сочетался с предыдущими.
Сервис автоматически генерирует цветовую палитру, которую затем можно редактировать. Полезные функции сервиса: генерация палитры из изображения и показ оттенков выбранного цвета.
Использование черного и белого в дизайне. МиниСоветы
Рубрика Мини советы.
Сегодня поговорим про использование белого и черного цвета в дизайне. Замечаю, что многие начинающие и не только дизайнеры, при использовании черного и белого цвета, не парясь выкручивают цвет в палитре на полную катушку. Получая #000000 и #FFFFFF
Я не советую делать так. Особенно на сайтах. В некоторых случаях можно выкрутить чисто фон, либо текст, но когда оба показателях наМаксимум текст становится сложно считывать. Он буквально ударяет по глазам своим контрастом.
Вместо это попробуйте сделать текст темно-серым, при использовании на белом фоне и светло-серым на черном. С фоном ситуация та же.
Главное не перестарайся, иначе цвет станет грязным, что даже тайд с кипячением не поможет.
Это не так хорошо видно в баннерах ниже. Но поверь на сайтах при использовании большого количества текста разница ощутима.
Эта история подходит не для всех случаев) к примеру в информативных и черное на белом не режет глаз. А вот в промо сайте или баннерах вполне совет сгодится.
Дизайн вырвиглаз
Захотелось роллов пожевать. Посмотрел что есть поблизости. Наткнулся на такой вот сайт. Написать им что ли в отзывах чтобы сменили дизайн сайта )
Большой список сайтов, по получению основных цветов из картинки или просто подбору подходящей палитры
Как-то в интернете я увидел картинку, на которой была фотография и рядом прямоугольники с основными, ключевыми цветами фотографии. Мне очень понравился такой «эффект», уж очень гармонично выглядят сочетающиеся цвета. Там в посте была ссылка на один сервис, который позволяет получить такие прямоугольники из фотографии. Я предположил, что нет какого-то общего алгоритма, по извлечению «ключевых» цветов или оттенков из картинки и поэтому должны быть еще сервисы, которые могут разложить картинку на палитру, начал искать и понеслось. Результат вы видите ниже.
Я много гуглил и собрал воедино ссылки на сервисы, которые позволяют получить палитру «основных» цветов картинки, сервисы с палитрами, сервисы с подборками гармоничных цветов и т.д. Ниже будут заголовки категорий, по которым я сгруппировал сервисы, а потом уже ссылки.
Естественно все сайты я нашел не напрямую из поисковой выдачи, а из других статей в которых тоже делались сборки подобных сервисов. Внизу я оставил ссылки на источники, там вы можете найти описание и, возможно, сравнение и скриншоты некоторых из перечисленных здесь сервисов.
Есть еще приложения для разных ОС, в том числе и на смартфоны, которые тоже позволяют создавать палитру основных цветов по фотографии или просто подбирать гамму цветов, но приложения это не универсальное решение, т.к. не все могут получить к ним доступ ввиду возможного отсутствия нужной ОС.
Список сайтов получился очень внушительный, некоторые сайты совмещают в себе несколько категорий, поэтому имена некоторых доменов вы можете увидеть здесь несколько раз. Тем не менее я не считаю этот список самым полным, скорее всего есть еще сайты (или появятся в будущем) о которых я ничего не знаю и которые подпадают под представленные категории.
Сайты для генерации палитры основных цветов по картинке
Сайты по поиску картинок определенного оттенка или цвета
Сайты для генерации палитры основных цветов определенного сайта
Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.
Палитры с подобранными цветами Material Design и динамическими макетами Android приложения
Мультифункциональные сайты с разными инструментами для цвета
Сайты с картинками и готовыми палитрами цветов к ним
Сайты с просто подборками гармоничных цветов
Сайты для генерации палитры основных цветов по картинке: