что такое палитра цветов растрового изображения

Информатика. 7 класс

Конспект урока

Перечень вопросов, рассматриваемых в теме:

Пиксель – это наименьший элемент изображения.

Растр – совокупность пикселей, образующих строки и столбцы.

Каждый пиксель может иметь свой цвет.

Достоинства растровой графики: точность цветопередачи – при сохранении растрового изображения, сохраняется и информация о цвете каждого пикселя; изображения можно распечатать на принтере.

Недостатки: чувствительность к уменьшению и увеличению рисунка; большой объём всего изображения.

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

Растровые графические редакторы: Paint, GIMP, AdobePhotoshop и другие.

Формулы, которые используются при решении типовых задач:

где N – количество цветов в палитре,i – глубина цвета, K – размер растрового изображения.

1. Босова Л. Л. Информатика: 7 класс. // Босова Л. Л., Босова А. Ю. – М.: БИНОМ, 2017. – 226 с.

Теоретический материал для самостоятельного изучения.

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

Ведь, если взять в руки лупу и рассмотреть экран монитора, то можно увидеть изображение, состоящее из каких-то отдельных мелких элементов. Что же это такое? Это пиксель – наименьший элемент изображения. А всё изображение в растровой графике формируется в виде растра – совокупности пикселей, образующих строки и столбцы. Каждый пиксель может иметь свой цвет.

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

У любых растровых изображений есть определённые особенности:

1) чувствительность к уменьшению и увеличению рисунка;

2) если в изображении большое количество пикселей и используется множество цветов в палитре, то возрастает и объём всего изображения.

Всё это является недостатками растровых изображений.

Но есть, конечно же, и достоинство– это точность цветопередачи. При сохранении растрового изображения, сохраняется и информация о цвете каждого пикселя.

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

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

Больше возможностей имеет растровый графический редактор Gimp. Панель инструментов редактора содержит диалог «Параметры инструментов». Имеется панель слоёв, каналов, контуров и путей, а также панель кистей, текстур и градиентов. Инструменты редактора Gimp можно разделить на следующие группы: инструменты выделения, инструменты рисования, инструменты преобразования, инструменты цвета.

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

Растровый рисунок размером 1366×768 пикселей сохранили в виде несжатого файла размером 2 Мб. Каково максимально возможное число цветов в палитре?

Для решения этой задачи переведем 2 Мб в биты.

В одном байте – 8 бит, в 1 Мб – 1024 Кб, а в 1 Кб– 1024 байта.

Вычислим разрешение картинки.

Делим объём памяти на количество пикселей.

Получили 65536 максимально возможных цветов в палитре.

Решение:

2 Мбайт = 2 · 1024 · 1024 · 8= 16777216 битов

1366 · 768=1049088 точек

16777216 : 1049088≈16 битов на пиксель

N= 2 16 =65536 цветов.

Ответ: 65536 цветов.

Растровый графический редактор AdobePhotoshop

Получить растровое изображение с помощью сканера, цифрового фотоаппарата или видеокамеры не составляет особого труда. Гораздо сложнее создать растровое изображение вручную. Для этого существуют специальные растровые графические редакторы. Мы с вами рассмотрим более подробно один из них: растровый графический редактор AdobePhotoshop. РедакторAdobePhotoshop способен изменить изображение, например, отретушировать фотографию; объединить изображения, создать изображение.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Рисунок 5.1. Photoshop оснащён большим числом инструментов создания контуров выделения.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Но, к сожалению, программа не является свободным программным обеспечением.

Форматы растровых графических файлов имеют следующие расширения: BMP, GIF, JPEG.

Разбор решения заданий тренировочного модуля

№1. Сколько цветов(N) насчитывается в палитре, если глубина цвета(i) равна 3? Выделите цветом правильный ответ.

Задача решается с помощью формулы N=2 i

Ответ: в палитре 8 цветов, вариант ответа 3.

№2. Фотографию размером 256×128 пикселей сохранили в виде несжатого файла. А для кодирования одного пикселя используется 2 байта. Определите размер файла в Кб.

Сначала определяем размер растрового изображения:

256 · 128 = 32768 точек в изображении

Теперь определяем размер файла: т.к. для кодирования одного пикселя используется 2 байта, то 32768 · 2 = 65536 байтов. Ответ нужно выразить в килобайтах, для этого 65536 : 1024 = 64 Кб.

Верный ответ: 64 Кб.

№3. Цветной рисунок состоит из 65536 цветов и занимает 3 Кб информации. Из скольких точек состоит данный рисунок?

Теперь, 3 Кб переведём в биты, для этого 3 · 1024 · 8 = 24576 бит – это объём всего изображения.

Источник

Что такое палитра цветов растрового изображения

Всю двумерную компьютерную графику можно разделить на 2 больших класса – векторную и растровую.

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

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

Параметры растрового изображения

Растровое изображение характеризуется двумя важными параметрами – размер и разрешение.

Размер – это размерность массива, количество пикселей по горизонтали и вертикали.

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

Системы представления цвета

Существуют две основные системы представления цвета – RGB и CMYK. Первая применяется в компьютерных мониторах, вторая – при печати на бумаге. Главное их отличие – на экране отсутствие цвета представлено черным цветом, на бумаге – белым. Соответственно, смешению максимального количества цветов на экране соответствет белый, на бумаге – черный. Таким образом, системы противоположны друг другу. В RGB в качестве основных используются красный (Red), зеленый (Green) и синий (Blue) цвета, в CMYK – противоположные им голубой (Cyan), пурпурный (Magenta) и желтый (Yellow). Однако на бумаге из-за несовершенства печатных устройств не удается создать идеально черный цвет путем смешения, поэтому в системе CMYK добавляется еще один базовый цвет – черный (black).

Глубиной цвета называется количество бит, хранящих информацию о цвете, приходящихся на один пиксел изображения. От этого параметра зависит количество используемых в изображении цветов. Скажем, 8-битная глубина цвета – это 2^8 = 256 цветов. Уровень качества, при котором человеческий глаз неспособен отличить компьютерное фотографическое изображение от настоящего – 24 бита, т.е. около 16 миллионов цветов.

Форматы растровой графики для веба

Разумеется, от объема информации о цвете напрямую зависит объем графического файла в байтах. Поэтому необходим компромисс между качеством воспроизведения и объемом графического файла, что достигается, в частности, путем оптимизации графики. В вебе используются 2 основных формата растровой графики – GIF и JPG.

GIF способен хранить информацию о любом количестве цветов от 2 до 256, за счет сокращения количества цветов достигается резкое уменьшение объема файла.

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

Пиксел

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

Размер и разрешение

Основные характеристики растрового изображения: размер и разрешение.

Число пикселов на единицу длины называется разрешением изображения и измеряется в пикселах на дюйм ppi (pixels per inch) или в точках на дюйм, а dpi (dots per inch) – для монитора, принтера, сканера Она определяет, во сколько пикселов превратиться линия длиной 1 дюйм.

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

Размер изображения на экране определяет количество пикселов в изображении, размер монитора и его параметры. Большой монитор с экранной матрицей 640х480 имеет более крупные пикселы, чем маленький с той же размерностью. Разрешающая способность PC монитра 96 dpi. При размещении изображении надо это учитывать. Например, изображение с 144 ppi на экране с разрешающей способностью 72 dpi вдвое превышает реальный размер.

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

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

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

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

Кодирование цвета

Все пикселы имеют цвет, определенным образом указанный цифрой. А как определить, какая цифра необходима? Есть ряд способов кодирования цвета, которые разделяются на 2 основные группы: индексированные (с палитрой) и полноцветные.

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

Второй метод состоит в том, что по номеру цвета мы можем непосредственно определить сам цвет.

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

Источник

Что такое палитра цветов растрового изображения

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

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

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

В модели RGB цвет можно представить в виде вектора в трехмерной системе координат с началом отсчета в точке (0,0,0). Внутри полученного куба и «находятся» все цвета, образуя цветовое пространство.

Цветовая модель CMY(K)

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Конус имеет единичную высоту (V = 1) и основание, расположенное в начале координат. В основании конуса величины H и S смысла не имеют. Белому цвету соответствует пара S = 1, V = 1. Ось OV (S = 0) соответствует ахроматическим цветам (серым тонам).

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

Источник

Что такое палитра цветов растрового изображения

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

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

В растровом редакторе (Gimp, Adobe Photoshop, Paint) изображение разбивается на квадратные элементы одинакового размера и каждый такой элемент описывается отдельно. Этот квадратный графический элемент называют пикселом (picture element, pixel).

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

Важными характеристиками для таких изображений являются:

Разрешение

Наиболее распространенная единица измерения – dpi – количество пикселов на одном дюйме длины (1 дюйм = 2,54 см).

Но что да ет разрешение?

Теперь уменьшим размер клетки-пикселя в 4 раза, закрасим только четверть клетки, в этом случае разрешение увеличится только в 2 раза, ведь на одну длину теперь приходится 10 клеток-пикселей

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Преимущества растрового изображения:

Источник

Цветовые пространства: большой разбор

Всё, что нужно знать о CMYK, RGB, HSL, HSB, LAB и чистых градиентах.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Ведущий интерфейсный дизайнер в K&K TEAM, увлечён дизайном, технологиями и людьми. В свободное время ведёт Telegram-канал «Karoza Ҩ»

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

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

Цветовое пространство CMYK — субтрактивное: если сложить все цветовые компоненты, то итоговый цвет будет чёрным. По этому же принципу работают обычные краски, а потому пространство CMYK используется в полиграфии. Через процентные соотношения в нём записаны пропорции смешения четырёх красок: бирюзовой ( Cian), пурпурной ( Magenta), жёлтой ( Yellow) и чёрной ( Key color, blac K). Интенсивность каждого цвета задаётся в процентах от 0 до 100.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

Pantone — американская компания, основанная в 50-е годы в Нью-Йорке и занимающаяся производством пигментов и продажей чернил. Компания разработала систему стандартизации цветов Pantone Matching System (PMS), в которой каждому цвету присваивается специальный код.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

PMS — Pantone Matching System — система подбора цвета, но не цветовое пространство, так как у цветов есть код, но нет значений цветовых координат.

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

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

Цветовой оттенок в RGB создаётся смешиванием красного ( Red), зелёного ( Green) и синего ( Blue) каналов с разной интенсивностью излучения. Яркость каждого из трёх основных цветов закодирована числом от 0 до 255, то есть занимает 256 бит или 32 байта.

Например, RGB (90, 0, 157) соответствует фиолетовому, а RGB (255, 223, 0) — жёлтому.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Для удобства записи придуманы HEX-коды обозначения цветов, в которых интенсивность каждого из трёх цветов задаётся через двузначное число в шестнадцатеричной системе, что даёт те же 256 комбинаций или 32 байта, ведь
16 × 16 = 256.

В шестнадцатеричной системе цифры обозначаются от 0 до F, в результате
HEX-коды выглядят вот так: #5A009D — фиолетовый, #FFDF00 — жёлтый. Преимущество такой записи ― стандартизация и удобство копирования короткого цветового значения.

Иногда HEX-код в CSS или графических редакторах содержит только три знака, в таком случае каждый второй символ в записи с овпадает с первым. То есть #F45 интерпретируется как #FF4455, #000 — #00000.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Поскольку с цветовым пространством RGB работают все экраны, то применяется оно практически везде ― от разработки макетов для печати (цвета переводятся в CMYK в самом финале) до разработки сайтов и интерфейсов.

Свойства цвета

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

Важные понятия

Цветовой тон (Hue) — положение цвета в видимом спектре. Человеческий глаз различает цвета от красного до фиолетового, цветовой тон ― это место цвета в спектре. Красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый — всё это цветовые тона.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Насыщенность (Saturation) — интенсивность цвета, красочность, степень отличия цвета от равного по светлоте серого. Чем ближе цвет к серому, тем он менее насыщенный.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Яркость (Brightness) — приближённость цвета к чёрному. Чем ниже яркость, тем цвет темнее. Нередко яркость путают с насыщенностью, но это разные характеристики.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Цилиндрические цветовые пространства

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

Допустим, мы используем синий цвет RGB (63, 42, 255), но для второго макета нам нужен более тёмный синий того же тона или же зелёный той же яркости и насыщенности. При изменении одной характеристики изменились сразу три параметра: синий теперь имеет значения RGB (18, 12, 77), а зелёный —
RGB (67, 255, 42).

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Координаты цвета существуют в кубической системе RGB, но в графических редакторах управление цветом реализовано с использованием другой модели ― цилиндрической версии RGB, которая называется HSB или HSV.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

В HSB цветовой тон ( Hue) задаётся в градусах на цветовом круге от 0° до 360°, а насыщенность ( Saturation) и яркость ( Brightness) в процентах от 0% до 100%.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Иногда цветовое пространство HSB называют HSV ( H ue — цветовой тон, S aturation — насыщенность, V alue — значение). Не стоит путаться — это альтернативное название, а не другое цветовое пространство.

В CSS помимо HEX-кодов RGB применяют цилиндрическое цветовое пространство HSL, где вместо яркости ( Вrightness) используется светлота ( Lightness). HSB и HSL очень похожи, но не идентичны.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

То есть светлота в HSL отвечает за примесь чёрного или белого, освещённость. При конвертации цвета из системы HSL в HSB изменение параметра L будет влиять на два параметра сразу — S и B, неизменным сохранится только цветовой тон — H.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

Дано: пользователи двух статусов.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Для изменения цветового тона необходимо изменить параметр Hue, а остальные параметры сохранить. Для светлого фона используем значения HSL: [0–360°], 100%, 78%, а для тёмного — HSL: [0–360°], 100%, 30%.

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

LAB и LCh

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

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Значения цвета в LAB задаются через светлоту ( Lightness) и две координаты, отвечающие за хроматическую составляющую: тон и насыщенность.
A — положение цвета в диапазоне от зелёного до красного, B — от синего до жёлтого.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Параметр L варьируется от 0 до 100, а параметры A и B в большинстве сервисов для работы с LAB имеют значения от −128 до 128, поскольку координаты A и B обозначают не просто интенсивность какого-то цвета, а спектр между двумя цветами.

Система достаточно сложная, но можно попытаться представить её как смешение четырёх цветов — зелёного, красного, синего и жёлтого. На самом насыщенном срезе цветового пространства со светлотой 100 по углам находятся: зелёный — LAB (100, −128, 128), красный — LAB (100, 128, 128), фиолетовый — LAB (100, 128, −128), бирюзовый — LAB (100, −128, −128), а в самом центре белый —
LAB (100, 0, 0). Как и в случае с RGB, настраивать цветовой тон удобнее в цилиндрической версии LAB — LCh.

Цилиндрическая версия LAB называется LCh, вместо прямоугольных в ней используются полярные координаты. Параметр C ( Chroma — хроматическая составляющая, насыщенность) отвечает за длину радиуса и удалённость от центра цветового круга, а h ( Hue) за угол поворота в градусах — то есть цветовой тон.

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

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

Также ранее LAB использовали для удаления шума на цифровых фотографиях. Для этого достаточно было размыть цветовые каналы A или B, а поскольку цифровой шум состоит из бледных разноцветных точек, такой подход делал их менее насыщенными.

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Задача: создать чистый градиент между насыщенными цветами.

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

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Решение: использовать LAB-градиент.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Открываем Lch and Lab colour and gradient picker, выбираем два цвета, между которыми надо сделать переход, и вводим желаемое количество ступеней.

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения

Если в качестве редактора вы используете Figma, то нужно установить плагин Chromatic Figma, который автоматически исправляет градиенты через LAB. Результат будет немного отличаться от инструмента Дэвида Джонстона.

Источник

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

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

что такое палитра цветов растрового изображения. Смотреть фото что такое палитра цветов растрового изображения. Смотреть картинку что такое палитра цветов растрового изображения. Картинка про что такое палитра цветов растрового изображения. Фото что такое палитра цветов растрового изображения