Что такое палитра hsb

Цветовая модель HSB и палитра выбора цвета в Photoshop

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

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

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

И так, приступим: HSB аббревиатура английских слов Hue, Saturation, Brightness в переводе на русский Тон, Насыщенность и Яркость — три координаты этой цветовой модели. Определимся с этими понятиями дабы избежать разночтений в дальнейшем:

Тон – собственно цвет, его выбор в данной цветовой модели осуществляется поворотом по цветовому кругу на определённый градус.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Точка отсчета 0 градусов находится в середине красного спектра. 60 градусов желтый цвет, 120 зелёный, 180 циан, 240 синий, 300 пурпурный (маджента) и возвращаемся в исходную точку — 360о красный цвет.

Насыщенность – интенсивность выбранного (хроматического) цвета, то есть отличие от равного ему по яркости (ахроматического) серого цвета. В HSB определяется расстоянием в процентах от цента круга 0% нейтрально серый цвет до 100% край круга – наиболее насыщенный «чистый цвет».

Яркость – параметр определяющий количество света, отраженного от объекта, окрашенного в определённый цвет. Измеряется в процентном отношении. 0% минимальное отражение, любой цвет с минимальной яркостью становится чёрным. 100% максимальное отражение — белый цвет.

Оперируя этими определениями легко графически представить цветовую модель HSB в виде цилиндра в качестве высоты которого выступает яркость (B), радиус — насыщенность (S) и длина окружности тон (H).

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Палитра выбора цвета (Color Picker) в Photoshop

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Подробно познакомиться с устройством этой палитры вы можете, используя «волшебную» кнопку F1 во время работы с программой.

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Чтобы получить нейтрально серый 50% цвет нужно значение насыщенности снизить до 0% яркость установить в 50%. значения тона при этом не играют никакой роли

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Ориентируйтесь на изменения параметров в полях HSB при перемещении мишени и ползунков, это поможет понять, что происходит с цветом. Через небольшое время, проведённое за этими экспериментами вы сможете уяснить для себя как взаимодействуют параметры Hue, Saturation, Brightness и какой вклад делает каждый из них в формировании цвета.

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

Похожие записи

Обязательно ознакомьтесь с похожими записями, возможно в них вы найдете ответы на свои вопросы

Точечная восстанавливающая кисть – как убрать дефекты с фото

Как создать в Photoshop красивый естественный коллаж

Фильтр Пластика (Liquify) в фотошопе — инструменты и их воздействие

Применение восстанавливающей кисти в фотошоп

Как установить кисти, текстуры и другие дополнения в Photoshop

Источник

Различия цветовых моделей RGB, CMYK, HSB

Очень часто у людей, напрямую не связанных с полиграфией, возникают вопросы: «Что такое CMYK?», и «Почему нельзя использовать ничего, кроме CMYK?». В этой статье постараемся разобраться, что такое цветовые пространства CMYK, RGB и HSB и почему один и тот же фирменный цвет в макете на экране компьютера и на бумаге выглядит по-разному.

Системы цветопередачи RGB, CMYK и HSB

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

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

Что такое RGB

Начнём с цифр. 16,7 миллионов оттенков отображает современный монитор компьютера или хорошее печатающее устройство. Такая большая палитра получается смешением всего трёх цветов в разных пропорциях — красного, синего и зелёного. В графических редакторах каждый из них представлен 256 оттенками (256х256х256=16,7 миллионов).

RGB — цветовая модель, названная так по трём заглавным буквам названий цветов, лежащих в ее основе: Red, Green, Blue, или красный, зелёный, синий. Эти же цвета образуют и все промежуточные. Научное название — аддитивная модель (от англ.слова add — «добавлять»). Служит для вывода изображения на экраны мониторов и другие электронные устройства. Обладает большим цветовым охватом.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Как выглядит цветовая модель RGB?

Что такое CMY(K)

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Что такое HSB?

Перед тем, как подвести итог, подчеркнём: модели RGB и CMYK не так хорошо соответствуют понятию собственно цвета, как цветовая модель HSB. Это аббревиатура с английских слов: Hue, Saturation, Brightness — тон, насыщенность, яркость. HSB основана на модели RGB, но у неё другая система координат: каждый цвет в этой модели получается путем добавления к основному спектру черной или белой краски. При этом тон — это собственно цвет и есть, насыщенность — процент добавленной к цвету белой краски, а яркость — процент добавленной чёрной краски.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

В чем отличие RGB от CMYK?

Разница между CMYK и RGB заключается в том, что RGB-цвет по сути лишь излучаемый цвет (или свет), а CMYK-цвет — цвет отражаемый (краска). Первый образуется за счёт интенсивности свечения, а второй получается как результат наложения красок в полиграфии. Соответственно, любые изображения в электронном виде — рисунки на мониторе компьютера, фотографии на экране телефона — основываются на RGB-модели. Модель CMYK применяется для полноцветной печати. А чтобы цвета не потерялись, изображение перед печатью выводят из аддитивной модели в субстрактивную. Говоря на языке дизайнеров и специалистов подготовки макетов, модель CMYK — рабочий инструмент офсетной типографии, который выводит цвета на бумагу.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Отличие систем цветопередачи RGB и CMYK

CMYK и RGB: применение на практике

Насколько публикация полезна?

Средняя оценка 4.5 / 5. Количество оценок: 20

Источник

Цветовая модель HSB: рекомендации из первых уст

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

Если вы уже в курсе, что означают буквы H, S и B, можете сразу переходить к пункту «HSB на практике» ниже по странице.

Разберём-ка все буквы по порядку

Теперь о том, чем так сильно отличаются эти 3 координаты.

Если вы когда-нибудь кодили в HTML и CSS, то, возможно, сталкивались с моделью RGB, где любой цвет создаётся на основе 3 координат: (1) насколько цвет красный ( R ), (2) насколько цвет зелёный ( G ) и насколько цвет синий ( B ). Сначала может показаться, что тот, кто это придумывал, явно находился под кайфом, но на самом деле, схема-то вполне прямолинейная и цельная — настолько, что по умолчанию является тем языком, на котором компьютер говорит о цвете.

Вот только если у компьютера всё просто, то это не значит, что у человека тоже. И тут в игру вступает HSB.

HSB (от англ. hue-saturation-brightness) — это тон, насыщенность и яркость; более ориентированная на человека модель для описания цвета. Чем же она так хороша? А вот чем: в ней используются те характеристики, которые сами собой приходят нам в голову, когда мы описываем цвет, например. Так, а знаете что? Я лучше покажу.

Hue, тон = «Цвет радуги»

Тон — это любая цифра от 0 до 360. Тон измеряется в градусах, как и окружность (потому что — осторожно, спойлер! — вокружности тоже 360°). Помните цветовой круг? Тон — это любое место на нём.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Цветовой круг или тоновый круг

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

Saturation, насыщенность = «Красочность»

Насыщенность — это любая цифра между 0 и 100. Поэтому, вне зависимости от того, какой тон вы выбрали, 100%-ная насыщенность будет пределом его красочности, а насыщенность в 0% даст его серый вариант (т.е. если цвет светлый, то он станет светло-серым, а если тёмный — то тёмно-серым).

Хотите взглянуть?

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb
С насыщенностью всё довольно просто. Иногда я думаю, что это просто цвет, в определенном количестве добавленный в серый. Таким образом, 0% — это тускло-серый, а 100% — это самый красочный цвет, который способен отобразить ваш монитор.

Brightness, яркость = яркость, прикиньте

Яркость — это цифра от 0 до 100. Как и насыщенность, её иногда указывают в процентах. Довольно очевидно, что это значит, но не тут-то было.

Запутались? Давайте немного переосмыслим. Представьте себе, что яркость — это лампочка накаливания. 0% значит, что лампочка не горит (и в нашей комнате темно, хоть глаз коли). 100% значит, что лампочка горит на полную мощность. Возможно, 100%-ная насыщенность — это яркий цвет или, если свет и до этого был белым, то при 100%-ной насыщенности он абсолютно белый.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Итак, если быть кратким: мы можем описать любой цвет с помощью трёх координат:

Всё понятно? Отлично.

HSB на практике

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

Цветовые вариации тона

Во-первых, тон — это отличный способ создавать разные вариации цвета. Ведь в диапазоне от 0° до 360° можно остановиться где угодно. Зачем оставлять синий цвет просто «синим», когда можно без особых усилий получить неплохие его вариации, просто немного сдвинувшись вверх или вниз по кругу?

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb
Здесь мы начали с очень стандартного синего, повернувшись сразу на 240°. Но дабы не выбирать самый унылый цвет из всех возможных, мы решили его немного оживить.

Даже сдвиг тона на 30° до 210° даёт крутой эффект. Стало светлее, веселее, и не так строго. Что-то вроде оформления в twitter, однако это лишь первый шаг.

Усиление тона до 240° даёт цвет индиго. Небольшой сдвиг на 20° — и вот уже смотрится совсем по-другому, покруче, и может неплохо сочетаться с неоном или тёмным фоном, так можно придать лёгкую нотку женственности. И так далее, вы поняли.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb
То же самое с красным. Сложный цвет, стоит только взяться — и уже проблемы. Он супер яркий и супер дерзкий. Однако всё зависит от того, чего мы хотим добиться — ну, допустим, сделать какое-нибудь сообщение об ошибке — тогда можно добавить в красный совсем чуть-чуть розового (опустившись по тону на 10°), и он станет приятнее. А для более сдержанного варианта можно подмешать немного оранжевого.

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

Настройте видимость с помощью насыщенности

Если в вашем UI есть цвет, который перетягивает на себя всё внимание, то исправить это можно, просто снизив насыщенность.

Например, взгляните на такую вариацию цвета в лого компании Google. Я увеличил насыщенность синего до 90%, и, как видите, он тут как бельмо на глазу.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Насыщенность синего 90%

Смотрите, как выпирает этот синий. Если вы не замечаете, попытайтесь расслабить взгляд и смотрите на лого в течение нескольких секунд. Едва ли не сразу на фоне остальных букв проступят «G» и «g».

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Насыщенность синего 70%

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

Теперь давайте перейдём к одному из самых удивительных фактов об HSB и к тому, что это значит.

Чёрный цвет не противоположен белому

Вот как делается чёрный и белый цвет в HSB:

Это значит — удивительно даже — что (в цветовой модели HSB) чёрный не противоположен белому.

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

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Переходим от одного красного к более «выбеленному» красному

Добавление белого выглядит так:

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

А что с добавлением чёрного? Что ж, так как чёрный — это по сути весь низ на прямоугольнике цветовой палитры, то нам просто нужно уменьшить яркость. Насыщенность роли не играет.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Переходим от одного красного к более «чёрному» красному.

Эти две стрелки никак не исключают друг друга! Чёрный и белый в HSB не противопоставлены.

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Более тёмные оттенки выглядят тускло

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

Или вот, если диаграммы вам больше по душе:

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Двигаемся от одного красного к менее выбеленному красному.

Это даст вам более богатые тёмные оттенки:

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Более тёмные оттенки выглядят богаче

Убрать белый — то есть «обогатить» свои более тёмные оттенки — «правильный» путь к созданию более тёмных цветовых вариаций более чем в 95% случаев.

Дополнительно: В чём разница между HSL и HSB?

Те из вас, кто занимаются front-end разработкой, возможно, знают, что в CSS используется цветовая модель HSL (от англ. hue, saturation, lightness — тон, насыщенность, светлота ). Вау. Что-то мне это смутно напоминает. HSB и HSL — это одна и та же модель?

Если коротко, то нет. Но они очень похожи.

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

Итак, в HSL:

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

Итак, показатель светлоты в HSL — это странная смесь насыщенности и яркости в HSB, которая зависит от степени освещённости!

Как бы то ни было, система, в которой чёрный и белые цвета противопоставлены друг другу, может показаться чуть логичнее, однако во всех современных программах для создания UI дизайна (Sketch, Figma и Adobe XD) используется HSB, а не HSL. И честно говоря, именно в этих программах мы выбираем и настраиваем цвета. Поэтому давайте не будем сильно загоняться: если вы хотите перенести значения цветов из дизайна в код, то просто используйте значения в формате hex, запутаться в них еще проще, чем в обеих моделях (зато их, по крайней мере, можно копировать-вставить)!

Конус HSB и двойнос конус HSL
Tон (hue), насыщенность (saturation), значение (value) и светлота (lightness)
Благодарность SharkD за картинку в Wikipedia

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

Источник

Цветовые модели CMYK, RGB, HSB

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

Система цветопередачи RGB

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Этот алгоритм оттенков выстраивается на 3 основных цветах:

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

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

Цветовая схема CMYK

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Состоит из 4 основных цветов, расшифровка CMYK:

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

На данный момент именно эта модель является стандартом в офсетной полноцветной печати в Европе, США, Японии. В большинстве случаев используется цветовая схема CMYK, при которой оттенки исчисляются от 0 до 100, однако есть и другая модель – CMYK 255. В ней оттенки исчисляются от 0 до 255. Приведем пример.

Допустим, требуется получить чисто черный, тогда показатели должны быть максимальными (в стандартной схеме – по 100), если же белый (то есть отсутствие цвета) – 0. Регулируя каждый из 4 показателей, можно добиться требуемого оттенка. Обычно для дизайнеров помощниками выступают специальные инструменты, как, например, пипетка в редакторе Photoshop. Она определяет не просто вид конкретного оттенка, но и его цветовую схему. Тогда для достижения идентичного результата (при множественном тираже или различных вариантах корпоративной продукции) достаточно знать цифровое значение каждого цвета в системе.

Цветовое пространство HSB

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

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

Источник

Что такое цветовые модели и какими они бывают

Небо голубое, незабудковое или, может быть, бирюзово-синее? Наше восприятие субъективно. Объективны компьютерные цветовые модели.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

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

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Цветовая модель Lab — ветеран компьютерной графики

Одна из ранних моделей, которая лежит в основе системы управления цветом в Photoshop. Модель Lab — это система координат из трёх осей:

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Цветовая модель HSB — воплощение гуманизма

При описании цвета в быту большинство из нас оперируют тремя характеристиками: это сам цветовой оттенок, степень его бледности или насыщенности и степень его яркости. На этом построена система HSB: есть три координаты: Hue (цветовой тон), Saturation (насыщенность) и Brightness (яркость).

Визуально цветовую модель HSB можно представить в виде цилиндра. Насыщенность и яркость варьируются от 0 до 100%, а тон измеряется в градусах от 0 до 360.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Цветовая модель RGB — то, что мы видим на экране

Это модель для отображения цвета в цифровых устройствах — например, на мониторах или в цифровых камерах. В ней каждый цвет кодируется значениями базовых цветов: Red (красный), Green (зелёный) и Blue (голубой). Это три оси, которые имеют градацию значений от 0 до 255. Нулевая точка этой системы координат — чёрный, а максимальные значения по всем трём осям кодируют белый цвет.

Например, посмотрим, как получается ярко-красный в системе RGB. Для этого нужно высокое значение по шкале R и низкие значения по двум другим.

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Наглядно модель RGB можно представить как раскрашенный кубик:

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

Даже при создании макетов для печати работа на компьютере преимущественно ведётся в RGB, а лишь на этапе предпечатной подготовки переводится в другую модель — CMYK.

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

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

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

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

Что такое палитра hsb. Смотреть фото Что такое палитра hsb. Смотреть картинку Что такое палитра hsb. Картинка про Что такое палитра hsb. Фото Что такое палитра hsb

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

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

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

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

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

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

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

Источник

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

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