8-900-374-94-44
[email protected]
Slide Image
Меню

Hsb система цветопередачи: Системы цветопередачи RGB, CMYK, HSB, чем отличаются

Содержание

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

  1. Главная
  2. Блог
  3. Различия цветовых моделей RGB, CMYK, HSB

28 сентября 2018

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

Наша продукция:

Печать каталогов

Печать газет

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

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

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

Что такое RGB

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

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

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

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

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

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

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

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

  • зелёный+синий — голубой (Cian)
  • синий+ красный — пурпурный (Magenta)
  • красный+зелёный — жёлтый (Yellow)

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

Эти три цвета лежат в основе цветовой модели CMYK — субстрактивная модель (от англ. слова subtraсt — «вычитать»), которая основана на вычитании из белого первичных цветов: голубой цвет вычитает из белого цвета красный, желтый — синий, а пурпурный — зелёный. Модель CMY(K) используется в полиграфии для стандартной триадной печати и в сравнении с RGB-моделью обладает меньшим цветовым охватом. Бумага и другие печатные материалы — это поверхности, которые отражают свет. Согласитесь, гораздо удобнее считать, какое количество света отразилось от той или иной поверхности, чем считать, сколько поглотилось.

Если вычесть из белого три первичных цвета — RGB, получаются три дополнительных цвета CMY.

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

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

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

Black, и она обозначает ключевой цвет — Key Color.

Что такое HSB?

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

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

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

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

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

Итак, подведем краткий итог:

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

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

Отличие RGB и CMYK

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

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

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

Прежде, чем сделать заказ полиграфии, важно помнить, что на цвет при печати влияет ещё много факторов — качество и поверхность бумаги, возможности печатанной машины, внешние условия. В идеале лучше сделать цветопробу и увидеть на бумаге цвет будущего тиража. Цветопроба не отнимет много времени, но поможет избежать возможных ошибок при печати. Это просто: набор нужных сочетаний триадных красок печатают на цветопробной бумаге на полностью откалиброванном под печатные машины принтере, а затем данные сравниваются с эталонными значениями. Подробнее о цветопробе можно прочитать в другой статье нашего блога:
Цветопроба — инструмент предсказуемой печати
.
Оцените, насколько Вам была полезна статья:
Отличие RGB и CMYK Загрузка...

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

Можете назвать меня дураком, но я не смог найти в интернете ничего толкового про цветовую модель HSB. Google выдаёт два с половиной миллиона результатов по запросу, но много ли там материала от тех, кто этой моделью реально пользовался? Я что, всё сам должен делать?

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

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

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

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

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

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

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

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

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

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

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

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

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

«А что же делать с чёрным? Белым? Серым?» Не мчите вперёд паровоза, ребята. Я же говорил, попозже мы и это узнаем.

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

  • Красный — 0°
  • Зелёный — 120°
  • Синий — 240°
  • Красный — также 360°, что абсолютно идентично 0°


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

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

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

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


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

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

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

  • при яркости 0%, цвет становится чёрным, вне зависимости от тона и насыщенности.
  • при яркости 100%, цвет становится белым только при условии, что насыщенность также равна 0%. В противном случае, 100%-ная яркость это всего лишь... очень яркий цвет.

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

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

  • Тона: определенного цвета на цветовом круге, от 0° до 360°
  • Насыщенности: того, как много в нём цвета, от 0% до 100%
  • Яркости: насколько ярко горит наша «лампочка», от 0% до 100%

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

HSB на п

Цветовые модели RGB,CMYK, HSB - Все что надо знать

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

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

цветовая модель rgb

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

  • R (red) – красный;
  • G (green) – зеленый;
  • B (blue) – голубой.

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

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

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

цветовая модель cmyk

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

  • С (сyan) – синий – можно охарактеризовать как насыщенный голубой;
  • M (magenta) – малиновый – цвет, приближенный к темно-розовому или фуксии;
  • Y (yellow) – желтый – ортодоксальный привычный цвет без понижения или повышения тона;
  • K (key) – черный.

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

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

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

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

цветовое пространство hsb

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

  1. Hue – цветовой тон. Выбирается один из спектра радуги, имеет радиальное расположение, определяется углом от 0 до 360 градусов на окружности с оттенками. С другой стороны, параметр эквивалентен длине световой волны, которую воспринимает человеческое зрение.
  2. Saturation – насыщенность. Регулирует контрастность оттенка по отношению к печатному или виртуальному носителю. Это как при подмешивании белой краски. Наиболее насыщенные цвета находятся по краям круга, чем ближе к центру, тем они становятся более бледными. Соответствует интенсивности цветовой волны.
  3. Brightness – яркость, где 0 – это полностью белый, а 100 – черный. Данный параметр задает освещенность цветовой волны.

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

Цветовая модель HSB – настройка параметров и применение

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

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

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

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

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

цветовой круг  HSB

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

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

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

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

Графическое представление модели HSB

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

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

Иконки выбора цвета

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

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

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

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

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

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

Можно «прогуляться» по цветовому кругу, установив максимальные значения для большей наглядности, насыщенности и яркости S, B -100% менять только значения для угла поворота (Н) выбранный «чистый», цвет будет показан в верхней части окошка просмотра.

изменение тона

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

изменение яркости и насыщенности

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

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

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

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




§ 2.2.3. Палитры цветов в системах цветопередачи RGB, CMYK и HSB




Содержание урока

2.2.3. Палитры цветов в системах цветопередачи RGB, CMYK и HSB

Лабораторная работа № 5 «Учимся кодировать и декодировать графическую информацию»


2.2.3. Палитры цветов в системах цветопередачи RGB, CMYK и HSB

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

Рис. 2.4. Разложение белого света в спектр

Хорошо известна фраза, которая помогает легко запомнить последовательность цветов в спектре видимого света: «Каждый охотник желает знать, где сидит фазан».

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

Палитра цветов в системе цветопередачи RGB. С экрана монитора человек воспринимает цвет как сумму излучения трех базовых цветов: красного, зеленого и синего. Такая система цветопередачи называется RGB, по первым буквам английских названий цветов (Red, — красный, Green — зеленый, Blue — синий).

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

Цвет палитры Color можно определить с помощью формулы (2.1).

При минимальных интенсивностях всех базовых цветов получается черный цвет, при максимальных интенсивностях — белый цвет. При максимальной интенсивности одного цвета и минимальной двух других — красный, зеленый и синий цвета. Наложение зеленого и синего цветов образует голубой цвет (Cyan), наложение красного и зеленого цветов — желтый цвет (Yellow), наложение красного и синего цветов — пурпурный цвет (Magenta) (табл. 2.4).

Таблица 2.4. Формирование цветов в системе цветопередачи RGB

В системе цветопередачи RGB палитра цветов формируется путем сложения красного, зеленого и синего цветов.

При глубине цвета в 24 бита на кодирование каждого из базовых цветов выделяется по 8 битов. В этом случае для каждого из цветов возможны N = 28 = 256 уровней интенсивности. Уровни интенсивности задаются десятичными (от минимального — 0 до максимального — 255) или двоичными (от 00000000 до 11111111) кодами (табл. 2.5).

Палитра цветов в системе цветопередачи CMYK. При печати изображений на принтерах используется палитра цветов в системе CMY. Основными красками в ней являются Cyan — голубая, Magenta — пурпурная и Yellow — желтая.

Цвета в палитре CMY формируются путем наложения красок базовых цветов. Цвет палитры Color можно определить с помощью формулы (2.2), в которой интенсивность каждой краски задается в процентах:

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

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

Смешав две краски системы CMY, мы получим базовый цвет в системе цветопередачи RGB. Если нанести на бумагу пурпурную и желтую краски, то будет поглощаться зеленый и синий свет, и мы увидим красный цвет. Если нанести на бумагу голубую и желтую краски, то будет поглощаться красный и синий свет, и мы увидим зеленый цвет. Если нанести на бумагу пурпурную и голубую краски, то будет поглощаться зеленый и красный свет, и мы увидим синий цвет (табл. 2.6).

Смешение трех красок — голубой, желтой и пурпурной — должно приводить к полному поглощению света, и мы должны увидеть черный цвет. Однако на практике вместо черного цвета получается грязно-бурый цвет. Поэтому в цветовую модель добавляют еще один, истинно черный цвет. Так как буква «В» уже используется для обозначения синего цвета, для обозначения черного цвета принята последняя буква в английском названии черного цвета Black, т. е. «К». Расширенная палитра получила название CMYK (см. табл. 2.6).

В системе цветопередачи CMYK палитра цветов формируется путем наложения голубой, пурпурной, желтой и черной красок.

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

Рис. 2.5. Использование систем цветопередачи RGB и CMYK в технике

Палитра цветов в системе цветопередачи HSB. Система цветопередачи HSB использует в качестве базовых параметров Hue (оттенок цвета), Saturation (насыщенность) и Brightness (яркость).

Параметр Hue позволяет выбрать оттенок цвета из всех цветов оптического спектра: от красного до фиолетового цвета (Н = 0 — красный цвет, Н = 120 — зеленый цвет, Н = 240 — синий цвет, Н = 360 — фиолетовый цвет).

Параметр Saturation определяет процент «чистого» оттенка и белого цвета (S = 0% — белый цвет, S = 100% — «чистый» оттенок).

Параметр Brightness определяет интенсивность цвета (минимальное значение В = 0 соответствует черному цвету, максимальное значение В = 100 соответствует максимальной яркости выбранного оттенка цвета).

В системе цветопередачи HSB палитра цветов формируется путем установки значений оттенка цвета, насыщенности и яркости.

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

Контрольные вопросы

1. В каких природных явлениях и физических экспериментах можно наблюдать разложение белого света в спектр? Подготовьте доклад.

2. Как формируется палитра цветов в системе цветопередачи RGB? В системе цветопередачи CMYK? В системе цветопередачи HSB?

Задания для самостоятельного выполнения

2.8. Задание с кратким ответом. Определите цвета, если заданы интенсивности базовых цветов в системе цветопередачи RGB. Заполните таблицу.

2.9. Задание с кратким ответом. Определите цвета, если на бумагу нанесены краски в системе цветопередачи CMYK. Заполните таблицу.


Cкачать материалы урока


Презентация по информатике "Палитры цветов в системах цветопередачи RGB, CMYK и HSB"

Инфоурок › Информатика ›Презентации›Презентация по информатике "Палитры цветов в системах цветопередачи RGB, CMYK и HSB" Палитры цветов в системах цветопередачи RGB, CMYK и HSB

Описание презентации по отдельным слайдам:

1 слайд Палитры цветов в системах цветопередачи RGB, CMYK и HSB Описание слайда:

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

2 слайд Белый свет может быть разложен с помощью оптических приборов (например, призм Описание слайда:

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

3 слайд Человек воспринимает свет с помощью цветовых рецепторов, так называемых колбо Описание слайда:

Человек воспринимает свет с помощью цветовых рецепторов, так называемых колбочек, находящихся на сетчатке глаза. Наибольшая чувствительность колбочек приходится на красный, зеленый и синий цвета, которые являются базовыми для человеческого восприятия. Сумма красного, зеленого и синего цветов воспринимается человеком как белый цвет, их отсутствие — как черный, а различные их сочетания — как многочисленные оттенки цветов. У радуги 7  цветов.  Глаз различает 3 цвета. По 100 градаций на цвет.

4 слайд Палитра цветов в системе цветопередачи RGB. С экрана монитора человек восприн Описание слайда:

Палитра цветов в системе цветопередачи RGB. С экрана монитора человек воспринимает цвет как сумму излучения трех базовых цветов: красного, зеленого и синего. Такая система цветопередачи называется RGB, по первым буквам английских названий цветов (Red — красный, Green — зеленый, Blue — синий). Цвета в палитре RGB формируются путем сложения базовых цветов, каждый из которых может иметь различную интенсивность. Цвет палитры Color можно определить с помощью формулы Color = R + G + В, где 0<= R <= Rmax, 0 <=G <= Gmax, 0 <= В <= Bmax.

5 слайд Формирование цветов в системе цветопередачи RGB При минимальных интенсивностя Описание слайда:

Формирование цветов в системе цветопередачи RGB При минимальных интенсивностях всех базовых цветов получается черный цвет, при максимальных интенсивности – белый цвет. При максимальной интенсивности одного цвета и минимальной двух других – красный, зеленый и синий цвета. Наложение зеленого и синего цветов образует голубой цвет (Cyan), наложение красного и зеленого цветов — желтый цвет (Yellow), наложение красного и синего цветов — пурпурный цвет (Magenta).

6 слайд Формирование цветов в системе цветопередачи RGB В системе цветопередачи RGB п Описание слайда:

Формирование цветов в системе цветопередачи RGB В системе цветопередачи RGB палитра цветов формируется путем сложения красного, зеленого и синего цветов. Цвет Формирование цвета Черный Black = 0 + 0 + 0 Белый White = Rmax + Gmax + В max Красный Red = Rmax + 0 + 0 Зеленый Green = 0 + Gmax + 0 Синий Blue = 0 + 0 + Bmax Голубой Cyan = 0 + Gmax + Bmax Пурпурный Magenta = Rmax + 0 + Bmax Желтый Yellow = Rmax + Gmax + 0

7 слайд Кодировка цветов при глубине цвета 24 бита При глубине цвета в 24 бита на код Описание слайда:

Кодировка цветов при глубине цвета 24 бита При глубине цвета в 24 бита на кодирование каждого из базовых цветов выделяется по 8 битов. В этом случае для каждого из цветов возможны N = 28 = 256 уровней интенсивности. Уровни интенсивности задаются десятичными (от минимального — 0 до максимального — 255) или двоичными (от 00000000 до 11111111) кодами.

8 слайд Кодировка цветов при глубине цвета 24 бита Цвет	Двоичный и десятичный коды ин Описание слайда:

Кодировка цветов при глубине цвета 24 бита Цвет Двоичный и десятичный коды интенсивности базовых цветов Красный Зеленый Синий Черный 00000000 0 00000000 0 00000000 0 Красный 11111111 255 00000000 0 00000000 0 Зеленый 00000000 0 11111111 255 00000000 0 Синий 00000000 0 00000000 0 11111111 255 255 Голубой 00000000 0 11111111 255 11111111 Пурпурный 11111111 255 00000000 0 11111111 255 Желтый 11111111 255 11111111 255 00000000 0 Белый 11111111 255 11111111 255 11111111 255

9 слайд Десятичные коды интенсивности базовых цветов. Описание слайда:

Десятичные коды интенсивности базовых цветов.

10 слайд Палитра цветов в системе цветопередачи CMYK. При печати изображений на принте Описание слайда:

Палитра цветов в системе цветопередачи CMYK. При печати изображений на принтерах используется палитра цветов в системе CMY. Основными красками в ней являются Cyan — голубая, Magenta — пурпурная и Yellow — желтая. Цвета в палитре CMY формируются путем наложения красок базовых цветов. Цвет палитры Color можно определить с помощью формулы , в которой интенсивность каждой краски задается в процентах: Color = С+М + Y, где 0% <= С <= 100%, 0% <= М <= 100%, 0% <= Y<= 100%.

11 слайд Палитра цветов в системе цветопередачи CMYK. Напечатанное на бумаге изображен Описание слайда:

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

12 слайд Нанесенная на бумагу голубая краска поглощает красный свет и отражает зеленый Описание слайда:

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

13 слайд Смешав две краски системы CMY, мы получим базовый цвет в системе цветопередач Описание слайда:

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

14 слайд Смешение трех красок — голубой, желтой и пурпурной — должно приводить к полно Описание слайда:

Смешение трех красок — голубой, желтой и пурпурной — должно приводить к полному поглощению света, и мы должны увидеть черный цвет. Однако на практике вместо черного цвета получается грязно-бурый цвет. Поэтому в цветовую модель добавляют еще один, истинно черный цвет. Так как буква В уже используется для обозначения синего цвета, для обозначения черного цвета принята последняя буква в английском названии черного цвета Black, т. е. К. Расширенная палитра получила название CMYK

15 слайд Формирование цветов в системе цветопередачи CMYK В системе цветопередачи CMYK Описание слайда:

Формирование цветов в системе цветопередачи CMYK В системе цветопередачи CMYK палитра цветов формируется путем наложения голубой, пурпурной, желтой и черной красок. Цвет Формирование цвета Черный Black = К = С + М + Y= W-G- В- R Белый White =W = (C = 0, М = 0, У = 0) Красный Red =R=Y+M=W-B-G Зеленый Green = G = Y+C = W-B-R Синий Blue = Б = /И + С= W-G-R Голубой Cyan = C=W-R=G + В Пурпурный Magenta = M =W-G = R + В Желтый Yellow = Y = W - В = R +G

16 слайд Система цветопередачи RGB применяется в мониторах компьютеров, в телевизорах Описание слайда:

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

17 слайд Система цветопередачи RGB применяется в мониторах компьютеров, в телевизорах Описание слайда: 18 слайд Палитра цветов в системе цветопередачи HSB. Система цветопередачи HSB использ Описание слайда:

Палитра цветов в системе цветопередачи HSB. Система цветопередачи HSB использует в качестве базовых параметров Hue (оттенок цвета), Saturation (насыщенность) и Brightness (яркость). Параметр Hue позволяет выбрать оттенок цвета из всех цветов оптического спектра: от красного цвета до фиолетового (Н = 0 — красный цвет, Н = 120 — зеленый цвет, Н = 240 — синий цвет, Н = 360 — фиолетовый цвет ). Параметр Saturation определяет процент «чистого» оттенка и белого цвета (S = 0% — белый цвет, S = 100% — «чистый» оттенок). Параметр Brightness определяет интенсивность цвета (минимальное значение В = 0 соответствует черному цвету, максимальное значение В = 100 соответствует максимальной яркости выбранного оттенка цвета).

19 слайд В системе цветопередачи HSB палитра цветов формируется путем установки значен Описание слайда:

В системе цветопередачи HSB палитра цветов формируется путем установки значений оттенка цвета, насыщенности и яркости.

20 слайд В графических редакторах обычно имеется возможность перехода от одной модели Описание слайда:

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

В графических редакторах обычно имеется возможность перехода от одной модели

Курс профессиональной переподготовки

Учитель информатики

В графических редакторах обычно имеется возможность перехода от одной модели

Курс профессиональной переподготовки

Учитель математики и информатики

В графических редакторах обычно имеется возможность перехода от одной модели

Курс повышения квалификации

Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:

Выберите категорию: Все категорииАлгебраАнглийский языкАстрономияБиологияВнеурочная деятельностьВсеобщая историяГеографияГеометрияДиректору, завучуДоп. образованиеДошкольное образованиеЕстествознаниеИЗО, МХКИностранные языкиИнформатикаИстория РоссииКлассному руководителюКоррекционное обучениеЛитератураЛитературное чтениеЛогопедия, ДефектологияМатематикаМузыкаНачальные классыНемецкий языкОБЖОбществознаниеОкружающий мирПриродоведениеРелигиоведениеРодная литератураРодной языкРусский языкСоциальному педагогуТехнологияУкраинский языкФизикаФизическая культураФилософияФранцузский языкХимияЧерчениеШкольному психологуЭкологияДругое

Выберите класс: Все классыДошкольники1 класс2 класс3 класс4 класс5 класс6 класс7 класс8 класс9 класс10 класс11 класс

Выберите учебник: Все учебники

Выберите тему: Все темы

также Вы можете выбрать тип материала:

loading

Проверен экспертом

Общая информация

Номер материала: ДБ-1013541

Похожие материалы

Вам будут интересны эти курсы:

Оставьте свой комментарий

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

Что такое цветовая модель?

          Наверное, всем, кто занимается рекламой, приходилось слышать такие словосочетния, как "цветовая модель", "файл для печати должен быть в CMYK, а для размещения на сайте - в RGB". Кто-то, может быть, даже знает о существовании таких цветовых моделей, как GreyScale, LAB, HSB и HLS. В предыдущей статье мы уже рассказывали об отличиях CMYK и RGB (читать статью).

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

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

          На принципе такого деления света основан цветной телевизор или монитор Вашего компьютера. Если говорить очень грубо, то монитор, в который Вы сейчас смотрите состоит из огромного количества точек (их количество по вертикали и горизонтали определяет разрешение монитора) и в каждую эту точку светят по три "лампочки": красная, зеленая и синяя. Каждая "лампочка" может светить с разной яркостью, а может не светить вовсе. Если светит только синяя "лампочка" - мы видим синюю точку. Если только красная - мы видим красную точку. Аналогично и с зеленой. Если все лампочки светят с полной яркостью в одну точку, то эта точка получается белой, так как все градации этого белого опять собираются вместе. Если ни одна лампочка не светит, то точка кажется нам черной. Так как черный цвет - это отсутствие света. Сочетая цвета этих "лампочек", светящихся с различной яркостью можно получать различные цвета и оттенки.

          Яркость каждой такой лампочки определяется интенсивностью (делением) от 0 (выключенная "лампочка") до 255 ("лампочка", светящая с полной "силой"). Такое деление цветов называется цветовой моделью RGB от первых букв слов "RED" "GREEN" "BLUE" (красный, зеленый, синий).

          Таким образом белый цвет нашей точки в цветовой модели RGB можно записать в следующем виде:

R (от слова "red", красный) - 255

G (от слова "green", зеленый) - 255

B (от слова "blue", синий) - 255

"Насыщенный" красный будет выглядеть так:

R - 255

G - 0

B - 0

Чёрный:

R - 0

G - 0

B - 0

Желтый цвет будет иметь следующий вид:

R - 255

G - 255

B - 0

Так же, для записи цвета в rgb, используют шестнадцатеричную систему. Показали интенсивности записывают по порядку #RGB:

Белый - #ffffff

Красный - #ff0000

Черный - #00000

Желтый - #ffff00


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

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

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

          Примерно так: мы светим на красный предмет белым светом. Белый свет можно представить как R-255 G-255 B-255. Но предмет не хочет отражать весь свет, который мы на него направили, и нагло ворует у нас все оттенки зеленого и синего. В итоге отражает только R-255 G-0 B-0. Именно поэтому он нам и кажется красным.

Так что для печати на бумаге весьма проблематично пользоваться цветовой моделью RGB. Для этого, как правило, используется цветовую модель CMY (цми) или CMYK (цмик). Цветовая модель CMY основана на том, что сам по себе лист бумаги белый, то есть отражает практически весь спектр RGB, а краски, наносимые на нее, выступают в качестве фильтров, каждый из которых "ворует" свой цвет (либо red, либо green, либо blue). Таким образом цвета этих красок определяются вычитанием из белого по одному цветов RGB. Получаются цвета Cyan (что-то вроде голубого), Magenta (можно сказать, розовый), Yellow (желтый).


          И если в цветовой модели RGB градация каждого цвета происходила по яркости от 0 до 255, то в цветовой модели CMYK у каждого цвета основным значением является "непрозрачность" (количество краски) и определяется процентами от 0% до 100%.

Таким образом, белый цвет можно описать так:

C (cyan) - 0%; M (magenta) - 0%; Y (yellow) - 0%.

Красный цвет так - C-0%; M-100%; Y-100%.

Зеленый так - C-100%; M-0%; Y-100%.

Так выглядит синий - C-100%; M-100%; Y-0%.

Это черный - C-100%; M-100%; Y-100%.


          Однако, это возможно только в теории. А на практике же обойтись цветами CMY не получается. И черный цвет при печати получается скорее грязно-коричневым, серый не похож сам на себя, а темные оттенки цветов создать проблематично. Для урегулирования конечного цвета используется еще одна краска. Отсюда и последняя буква в названии CMYK (ЦМИК). Расшифровка этой буквы может быть разной:

           Это может быть сокращение от blacK (черный). И в сокращении используется именно последняя буква, чтобы не спутать этот цвет с цветом Blue в модели RGB;

Печатники очень часто употребляют слово "Контур" относительно этого цвета. Так что возможно, что буква K в абревиатуре CMYK (ЦМИК) - это сокращение от немецкого слова "Kontur";

Так же это может быть сокращение от Key-color (ключевой цвет).

           Однако ключевым его назвать сложно, так как он является скорее дополнительным. И на черный этот цвет не совсем похож. Если печатать только этой краской изображение получается скорее серое. Поэтому некоторые придерживаются мнение, что буква K в обревиатуре CMYK означает "Kobalt" (темно-серый, нем.).

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

Печать с использованием цветов CMYK называют "полноцветной" или "триадной".

          *Стоит, наверное, сказать, что при печати CMYK (ЦМИК) краски не смешиваются. Они ложатся на бумагу "пятнами" (растром) одна рядом с другой и смешиваются уже в воображении человека, потому что эти "пятна" очень малы. То есть изображение растрируется, так как иначе краска, попадая одна на другую, расплывается и образуется муар или грязь. Существует несколько разных способов растрирования.

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

          Изображение в цветовой модели grayscale многие ошибочно называют черно-белым. Но это не так. Черно-белое изображение состоит только из черных и белых тонов. В то время, как grayscale (оттенки серого) имеет 101 оттенок. Это градация цвета Kobalt от 0% до 100%.


Аппаратно-зависимые и аппаратно-независимые цветовые модели

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

Чтобы передать человеку более достоверную информацию о цвете, к аппаратно-зависимым цветовым моделям прикрепляют так называемые цветовые профили. Каждый из такого профиля содержит информацию о конкретном способе передачи человеку цвета и регулирует конечный цвет с помощью добавления или изъятия из какого-либо составляющего первоначального цвета параметров. Например, для печати на глянцевой пленке используется цветовой профиль, убирающий 10% Cyan и добавляющий 5% Yellow к первоначальному цвету, из-за особенностей конкретной печатной машины, самой пленки и прочих условий. Однако даже прикрепленные профили не решают всех проблем передачи нам цвета.

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

Цветовые модели HSB и HLS

В основе этого цветового пространства лежит уже знакомое нам радужное кольцо RGB. Цвет управляется изменением таких параметров, как:

Hue - оттенок или тон;

Saturation - насыщенность цвета;

Brightness - яркость.

Параметр hue - это цвет. Определяется градусами от 0 до 360 исходя из цветов радужного кольца.

Параметр saturation - процент добавления к этому цвету белой краски имеет значение от 0% до 100%.

Параметр Brightness - процент добавления черной краски так же изменяется от 0% до 100%.


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

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

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

           Так как в её основе лежит цветовая модель RGB, она, все же является аппаратно-зависимой.

Эта цветовая модель конвертируется для печати в CMYK и конвертируется в RGB для отображения на мониторе. Так что догадаться, каким у вас в конечном счете получится цвет бывает весьма проблематично.

Аналогична этой модели цветовая модель HLS (расшифровка: hue, lightness, saturation).

Иногда используются для коррекции света и цвета в изображении.

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

          В этой цветовой модели цвет состоит из:

Luminance - освещенность. Это совокупность понятий яркость (lightness) и интенсивность (chrome).

A - это цветовая гамма от зеленного до пурпурного (согласно цветовому кругу)

B - цветовая гамма от голубого до желтого (согласно цветовому кругу)

          То есть двумя показателями в совокупности определяется цвет и одним показателем определяется его освещенность.

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

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

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

Учебник для практикующих - Изучение дизайна пользовательского интерфейса

Найдите в Google «HSB». Есть 2,5 миллиона результатов, и ни один из них, похоже, не написан кем-то, кто на самом деле использовал систему. Что дает?

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

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

Если вы уже знаете, что такое H, S и B, вы можете перейти к материалу 201 внизу страницы.

Давайте возьмем по одной букве за раз

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

Итак, то, что эти 3 числа представляют собой , немного отличается.

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

Но то, что это легко для компьютеров , не означает, что это легко для людей . Вот где на помощь приходит HSB.

HSB означает оттенок-насыщенность-яркость и является гораздо более удобным для человека способом описания цвета. Почему это так здорово? Потому что он использует идеи, которые мы уже естественным образом думаем при описании цвета, например… Хорошо, знаете что? Я вам просто покажу.

Оттенок = «Цвет радуги»

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

Цветовой круг - он же цветовой круг

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

(«А как насчет черного? Белого? Серого?» - качай тормоза, чемпион. Я сказал, что доберемся)

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

  • Красный 0 °
  • Зеленый - 120 °
  • Синий - 240 °
  • Красный также равен 360 °, что в точности совпадает с 0 °
  • .

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

Saturation = «Насыщенность»

Насыщенность - это число от 0 до 100.Таким образом, независимо от того, какой оттенок вы выбрали, насыщенность 100% будет самой богатой версией этого цвета, а насыщенность 0% будет серой версией этого цвета (т.е. если цвет светлый, он будет быть светло-серым; если цвет темный, он будет темно-серым).

Хочешь увидеть?

Насыщенность довольно проста. Я иногда думаю об этом, так как количество цвета добавило к серому. Таким образом, 0% - это плоский серый цвет, а 100% - это самых ярких цветов, которые может воспроизвести ваш монитор.

Яркость = Яркость , Дух.

Яркость - это число от 0 до 100. Как и насыщенность, иногда указывается в процентах. Это довольно очевидно, что это , но здесь есть небольшая загвоздка.

  • 0% яркости - черный, независимо от оттенка, независимо от насыщенности.
  • Яркость 100% - белый , только если насыщенность также 0%. В противном случае 100% яркость - это просто… очень яркий цвет.

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

Хорошо, поэтому для обзора мы можем описать цвет с помощью трех разумных чисел:

  • Оттенок: цвет, наиболее близкий к цветовому кругу, от 0 ° до 360 °.
  • Насыщенность: насколько он окрашен, от 0% до 100%
  • Яркость: сколько горит «лампочка», от 0% до 100%

У нас все хорошо? Отлично.

HSB на практике

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

Варианты цвета с оттенком

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

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

Даже смещение оттенка вниз от 30 ° до 210 ° дает прохладную атмосферу. Легче, веселее, непринужденнее. Вроде на территории твиттера, но это только первый шаг.

И увеличение оттенка до 260 ° дает мне индиго. Сдвиг всего на 20 °, и это совершенно другое ощущение - что-то более крутое, может хорошо работать с неоновыми цветами или темным фоном.Может придать чему-то тонкую женскую атмосферу. И т.д. - вы поняли.

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

.

java - как изменить цвет в цветовой системе HSB

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
  6. реклама Обратитесь к разработчикам по всему миру
,

Разработка систематических цветов. Как сделать тематический, гибкий, WCAG… | автор: Jeeyoung Jung

Mineral UI - это система проектирования с открытым исходным кодом, которую CA Technologies создает для использования во всех наших продуктах. Цвет - это основной строительный блок любой системы дизайна, и он оказался одной из самых сложных проблем проектирования, которые мы решали, из-за большого разнообразия требований:

  • Mineral имеет специальных возможностей встроено по умолчанию , поэтому все наши цвета должны соответствовать WCAG 2.1 Рекомендации уровня AA для контраста.
  • Mineral тематически для единообразного стиля , а цветовые палитры можно поменять местами в любое время. К элементу интерфейса применяются значения линейного изменения , а не отдельные цвета . Например, цвет синий-60 должен быть таким же воспринимаемым контрастом, как красный-60 или бирюзовый-60.
  • Mineral в конечном итоге будет поддерживать темный режим , и мы хотели, чтобы цветовые шкалы были визуально привлекательными как в светлом, так и в темном пользовательском интерфейсе.
  • Цвет используется для описания статуса . Многие продукты CA Technologies используются для описания и / или отчета о состоянии различных вещей, таких как деструктивные действия, развитие сюжета, доступность маршрутизатора и т. Д. Цвет - важный инструмент, позволяющий получить общее представление о значении, поэтому мы поддерживаем несколько Варианты компонентов пользовательского интерфейса как фундаментальные концепции в нашей системе. Эти цветные варианты пользовательского интерфейса должны гармонично сочетаться со всеми нашими цветовыми темами.

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

Новые цветовые шкалы, описанные в этой статье, внедряются на сайте Mineral-ui.com. Если вы хотите попробовать их сейчас, ознакомьтесь с нашими дизайнерскими активами.

Mineral-ui.com

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

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

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

Из Plasma Design System . Основные элементы, такие как цвет, трудно изменить позже.

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

  • Темы : Темы обеспечивают единообразный внешний вид для всех продуктов, и исключает догадки.
  • Тематическая гармония : Каждая цветовая тема должна иметь одинаковые значения ступеней тона.
  • Контрольные точки различного оттенка : Многие из наших продуктов продаются в модулях или наборах, поэтому цвета должны быть достаточно похожими, чтобы ощущаться как одна семья, но при этом достаточно отчетливыми, чтобы указать пользователю, что они находятся в другом модуле внутри Семейство продуктов.
  • Масштабируемая и аддитивная : Цветовая палитра должна иметь систематический узор, который можно добавлять по мере роста потребностей системы дизайна.
  • Без критических изменений: В дальнейшем мы хотели, чтобы наша цветовая система работала в любой ситуации, чтобы больше не было серьезных изменений в дизайне, в котором используется Mineral.
  • Доступно : Наша цель - сделать так, чтобы у всех был отличный опыт использования наших продуктов. Mineral поддерживает цветовую контрастность уровня AA. Визуальное представление текста должно иметь цветовую контрастность 4,5: 1 в каждом компоненте пользовательского интерфейса.

Мы провели глубокий анализ других тематических цветовых палитр, в которых используются линейные изменения, исследуя палитры из IBM Design, Material Design и Open-Color. (Примечание: если вы заинтересованы в изучении других систем дизайна, UXPin's Adele - отличное место для начала.) Целью исследования было не копирование и вставка их идей, а скорее «заглянуть под капот» и понять основные решения, лежащие в основе их выбора цвета.

В ходе исследования мы сосредоточили внимание на следующем:

  • Оттенок : Использует ли каждая цветовая палитра одно значение оттенка? Или изменение оттенка происходит на одной рампе?
  • Шаблон : показывает ли выбор значения устойчивый шаблон? Если есть узор, используется ли единая техника для других палитр?
  • Насыщенность и яркость (яркость) : Как работают насыщенность и яркость, когда каждое значение увеличивается или уменьшается по линейному закону?

RGB, HSB, HSL или HEX?

Цветовое моделирование - сложная тема, заслуживающая отдельной статьи.Но вкратце, вот что важно: в этих примерах я работаю с HSB (оттенок, насыщенность, яркость), потому что это один из наиболее удобных для пользователя палитр цветов - идеально подходит для проверки и настройки цветов. Тем не менее, HSB (360 × 100 × 100 = 3600000 цветов) может отображать только около 21,5% цветового пространства RGB (256 × 256 × 256 = 16 777 216 цветов).

HSB - хороший инструмент для исследования цвета, но во избежание проблем с рендерингом между различными интерпретаторами (браузерами, программным обеспечением для дизайна, дисплеями и т. Д.) Окончательное определение цвета наиболее точно записывается в виде значений RGB или HEX.Еще одно важное замечание: HSL и HSB - это отдельные модели, которые имеют разные принципы, и их не следует путать. Эти примеры находятся в HSB .

Я взял примерные цветовые палитры из каждой системы дизайна и сопоставил каждый образец с сеткой насыщенности и яркости. Я также отслеживал изменение оттенков внутри рампы.

IBM Design

Цветовая палитра IBM использует полный диапазон насыщенности и яркости, но было сложно идентифицировать однородные образцы среди различных линейных изменений.При взгляде на зеленый (см. Ниже) IBM в целом сдвигает значение оттенка между 78 и 120, что может быть трудно последовательно воспроизвести и управлять в других цветах. IBM явно ценит доступность, потому что коэффициент контрастности всегда рассчитывается на 4,5: 1 или выше при значении 50 или выше.

.

javascript - преобразование цвета HSB / HSV в HSL

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Общественные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним возможности технической карьеры
  5. Талант Нанять технических талантов
  6. реклама Обратитесь к разработчикам по всему миру
,

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

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