Чтобы описать цвет в компьютерной системе необходимо числа
Для описания цветовых оттенков, которые могут быть воспроизведены на экране компьютера и на принтере, разработаны специальные средства — цветовые модели (системы цветов).
Цвет может получиться в процессе излучения и в процессе отражения. Поэтому цветовые модели можно классифицировать по их целевой направленности:
- Аддитивные модели (RGB). Служат для получения цвета на мониторе.
- Полиграфические модели (CMYK). Служат для получения цвета при использовании разных систем красок и полиграфического оборудования.
- Математические модели, полезные для каких-либо способов цветокоррекции, но не связанные с оборудованием, например HSВ.
С экрана монитора человек воспринимает цвет как сумму излучения трёх базовых цветов: красного (Red), зелёного (Green), синего (Blue).
Она служит основой при создании и обработке компьютерной графики, предназначенной для электронного воспроизведения (на мониторе, телевизоре).
Цвет на экране получается при суммировании лучей трёх основных цветов — красного, зелёного и синего. Если интенсивность каждого из них достигает \(100\), то получается белый цвет. Минимальная интенсивность трёх базовых цветов даёт чёрный цвет.
Для описания каждого составляющего цвета требуется \(1\) байт (\(8\) бит) памяти, а чтобы описать один цвет, требуется \(3\) байта, т.е. \(24\) бита, памяти.
Для кодирования одного цвета пикселя определяется длина двоичного кода, которая называется глубиной цвета .
Рассчитать глубину цвета можно по формуле: N = 2 i , где N —количество цветов в палитре, i — глубина цвета.
Интенсивность каждого из трёх цветов — это один байт (т.е. число в диапазоне от \(0\) до \(255\)), т.е. каждая составляющая может принимать \(256\) значений.
Таким образом, с использованием трёх составляющих можно описать \(256⋅256⋅256 = 16777216\) различных цветовых оттенков, а, значит, модель RGB имеет приблизительно \(16,7\) миллионов различных цветов.
При печати изображений на принтерах используется цветовая модель, основными красками в которой являются голубая (Cyan), пурпурная (Magenta) и жёлтая (Yellow).
Чтобы получить чёрный цвет, в цветовую модель был включен компонент чистого чёрного цвета (BlacK). Так получается четырёхцветная модель, называемая CMYK .
Область применения цветовой модели CMYK — полноцветная печать. Именно с этой моделью работает большинство устройств печати.
Из-за несоответствия цветовых моделей часто возникает ситуация, когда цвет, который нужно напечатать, не может быть воспроизведен с помощью модели CMYK (например, золотой или серебряный). В этом случае применяются краски Pantone.
Все файлы, предназначенные для вывода в типографии, должны быть конвертированы в CMYK . Этот процесс называется цветоделением .
При просмотре CMYK -изображения на экране монитора одни и те же цвета могут восприниматься немного иначе, чем при просмотре RGB -изображения.
В модели CMYK невозможно отобразить очень яркие цвета модели RGB , модель RGB , в свою очередь, не способна передать тёмные густые оттенки модели CMYK , поскольку природа цвета разная.
Отображение цвета на экране монитора часто меняется и зависит от особенностей освещения, температуры монитора и цвета окружающих предметов. Кроме того, многие цвета, видимые в реальной жизни, не могут быть выведены при печати, не все цвета, отображаемые на экране, могут быть напечатаны, а некоторые цвета печати не видны на экране монитора.
HSB — это цветовая трёхканальная модель, которая характеризует параметры цвета. Цветовой тон (Hue), насыщенность (Saturation), яркость (Brightness).
Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.
Основы
Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.
Насыщенность цвета зависит от того, насколько разные в парах числа. Чем больше значение пар, тем светлее цвет. Вторая цифра каждой пары уточняет оттенок:
Распознавание цвета
В большинстве случаев распознать цвет по hex-коду можно, учитывая только первые цифры пар. В примере ниже понятно, что цвет смешан из большого количества красного, немного синего, а зеленого совсем нет.
Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы, кроме того, можно всегда произвести впечатление на коллег или клиентов, сказав «Ах, какой прекрасный оттенок бордового».
Можно также легко менять яркость, оттенок или насыщенность цвета, отредактировав лишь его шестнадцатеричный код. В первом примере ниже одна из пар меняется с шагом в 10%, при этом растет яркость цвета. Во втором примере яркость растет, но насыщенность падает:
Подчеркивание ссылок
По умолчанию браузеры подчеркивают гиперссылки на веб-страницах. При использовании не слишком крупных шрифтов подчеркивание может смешиваться с буквами ссылки, и выглядит такая конструкция не очень. Но можно сделать подчеркивание менее насыщенным:
- Для темного текста на светлом фоне делаем ссылки ярче.
- Для яркого текста на темном фоне делаем ссылки темнее.
Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:
Цвета контента
Зачастую на сайтах используется один и тот же цвет для заголовков и основного текста. Но при таком подходе снижается читабельность контента: чем мельче шрифт, тем контрастнее он должен быть. Пример:
Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:
Редактирование фона
Легко управлять фоном, изменяя hex-код цвета:
Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:
Подбор и комбинирование цветов
Понимание структуры шестнадцатеричного кода цветов дает дизайнеру возможность точно подбирать комбинации цветов и выбирать цветовые схемы. Самая простая техника — это переставлять одну пару в разные места кода. Еще один способ — удвоение первой цифры в первой паре и разделение на два остальных первых цифр. Также можно комбинировать цвета, взятые из фото. Описанные способы наглядно продемонстрированы на рисунке ниже:
Этот материал — карманный справочник о том, как работать с цветом в CSS и вебе в целом. Он начинается с теоретических основ и содержит множество инструментов и примеров работы с градиентами, анимацией, SVG и не только.
Статья будет полезна и новичку, и специалисту с опытом. За подробностями приглашаем под кат, пока у нас начинается курс по Frontend-разработке.
Огромная часть работы с цветом — это понимание того, что цвет в мониторах работает не так, как мы привыкли в детстве, когда смешивали краски. К примеру, краска и чернила принтера содержат крошечные частицы, — пигменты, которые смешиваются друг с другом и отражаются, чтобы представить цвет глазу. Так происходит субтрактивное смешивание цветов.
Чем больше цветов вы добавляете к исходному цвету, тем темнее он становится, пока не станет коричневым. Основные цвета принтера близки к привычным красному, жёлтому, синему, но смешивая цвета субтрактивно вы получите коричневый.
С другой стороны, на мониторах мы работаем со светом: когда все цвета смешиваются, они образуют белый цвет.
До знаменитого эксперимента Исаака Ньютона считалось, что цвет содержится в объектах, а не отражается или поглощается ими. Ньютон при помощи призмы доказал теорию о том, что солнечный свет состоит из нескольких цветов. Он разделил цвета призмой — получилась радуга.
Затем Ньютон попытался разделить синий цвет, но синий не разделился. Это означало, что цвет не находится внутри призмы, а, скорее, призма разделяет свет. То есть при аддитивном смешивании цветов в мониторе красный, зелёный и синий цвета могут использоваться, чтобы получить все цвета. При таком смешивании красный и зелёный цвета создают жёлтый.
Мониторы — это множество комбинаций кусочков света. Резонируя, они создают мириады других цветов. Разрешение — это количество отдельных цветных точек, известных как пиксели, которые содержатся на дисплее.
Художники использовали этот тип частоты света ещё до того, как у нас появились мониторы. Сёра и пуантилисты использовали красный и зелёный цвета, чтобы получить жёлтый, на таких картинах, как «La Grande Jatte» (хотя сам Сёра предпочитал термин «хромо-люминаризм»). Другие люди называют подход дивизионизмом.
Этот тип живописи был создан на основе убеждения, что оптическое смешение создаёт более чистый резонанс, чем традиционное субтрактивное смешение цветов пигмента.
Количество цветов, которые могут быть отображены одновременно, определяется битовой глубиной цвета. Если битовая глубина равна 1, мы можем получить два цвета, или монохром.
Битовая глубина 2 даст 4 цвета, и так далее, пока мы не достигнем битовой глубины 32, хотя обычно мониторы, отображающие веб-страницы, имеют плотность 24 битовой глубины и 16 777 216 цветов, — это True Color и альфа-канал.
True Color называется так потому, что наши глаза различают 10 000 000 уникальных цветов, а значит, 24-бит, безусловно, позволяет это. В этой 24-битной глубине по 8 бит отводится на красный, зелёный и синий цвета. Остальные используются для прозрачности или альфа-каналов.
Значения цвета
Последний раздел иллюстрирует, что rbga(x, x, x, y); передаёт информацию, но давайте разберём цветовые значения немного подробнее и покажем некоторые другие свойства и их использование. Цвета в канале RGB задаются в диапазоне 0-255.
Переменные цвета
Хорошая практика — хранить переменные цвета и никогда не использовать их напрямую, вместо этого отображая их на переменные с более осмысленными именами, вот так:
На момент написания этой статьи в браузерах Microsoft переменных не было. Препроцессоры CSS тоже поддерживают переменные, поэтому вы можете установить переменные типа $brandPrimary или отображение:
Помните, что именование здесь очень важно. Абстрактное именование иногда полезно, чтобы при изменении переменной, которая представляла синий цвет, на оранжевый, вам не пришлось переименовывать все значения цвета. Или, что хуже, повесить табличку с надписью "$blue теперь оранжевый".
Генеративные цвета
В пределах указанных ранее диапазонов вы можете использовать циклы for в любом препроцессоре, или же JavaScript функцию Math.random() и Math.floor() . Здесь нам нужны Math.floor() или Math.ceil() , потому что если не вернуть полные целые числа, то вместо значения цвета получим ошибку. Хорошее эмпирическое правило: не следует обновлять все три значения.
При помощи HSL очень легко переходить от одного цвета к другому, потому что вы знаете, что перебор оттенков от 0 до 360 даст вам полный диапазон. Ещё одна приятная особенность hue-rotate в градусах заключается в том, что поскольку это полный круг, вам не нужно придерживаться диапазона 0–360, можно написать даже -480 или 600 — браузер вас поймёт.
Я использую его, чтобы сгенерировать эти цвета:
А также этот, с другим диапазоном (прокрутите очень быстро):
Ниже я использую Math.random() в значениях rgb, чтобы получить множество цветов в одном диапазоне. Демонстрация написана на React, создаётся впечатление трёхмерности. Я могла бы пройти по нему при помощи for , но хотелось, чтобы цвет был случайным, отражал движение. Здесь нет предела совершенству.
Фильтры
Фильтры CSS предоставляют множество классных цветовых эффектов, а также возможность взять цветное изображение и сделать его серым. На CSS-Tricks есть замечательный ресурс, который показывает, как они работают, и хорошо поддерживается браузерами. У Беннета Фили вы найдёте хорошую галерею фильтров.
Фильтры и режимы размытия могут работать вместе! Уна Кравец создала этот классный инструмент под названием CSS Gram, комбинируя некоторые эффекты, чтобы создать фильтры из Instagram. В конце есть хорошая документация.
Свойства цвета
Как свойство CSS color относится к цвету шрифта. Если вы задаёте цвет для большой области, то используете background-color , а в случае SVG-элемент работаете с fill . Border — это граница вокруг элемента HTML, а stroke — аналог этой границы в SVG.
Градиенты
Линейные градиенты работают, обозначая направление от и до, в зависимости от префикса браузера сверху, снизу, слева, справа, можно задать градусы и радиальный градиент. Затем мы указываем остановки цвета и цвет, которого хотим добиться на каждой остановке. Цвета могут быть и прозрачными:
Синтаксис градиентов не так уж сложно написать, но мне очень нравится работать с этим генератором градиентов, потому что он создаёт сложное свойство фильтра, поддерживая IE6-9. Есть ещё один очень красивый Open Source генератор.
Градиенты также легко пишутся на SVG. По желанию мы можем задать площадь поверхности для градиента. С помощью идентификатора мы определяем блок, на который ссылаемся.
Эти градиенты также поддерживают непрозрачность, поэтому можно добиться красивых эффектов слоя, например, анимировать слои как маску.
Градиентный текст возможен только в webkit. Вот простой код на CSS-Tricks.
Hex (шестнадцатеричные цвета)
Шестнадцатеричные цвета — это немного другой формат для представления значений тем же способом. И это, пожалуй, самый распространённый способ обозначения цвета в Интернете.
Если вы помните, что байт — это 8 бит, каждый цвет или число Hex представляет собой байт. Цвет задаётся в соответствии с интенсивностью его красного, зелёного и синего компонентов. Эти три значения называются триплетом.
Один байт представляет собой число в диапазоне от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 в десятичной системе счисления. Первый байт — красный, творой байт — зелёный, а байт 3 — синий.
Значения hsl работают с диапазонами, как и RGB, но вместо того, чтобы работать со значениями, соответствующими логике интерпретации монитора, значения hsl — это оттенок, насыщенность, светлота. Похоже на значения RGB, но диапазоны отличаются. Эта система основана на колориметрической системе Манселла (он был первым, кто разделил цвет на эти три канала, или создал трёхмерную систему, основанную на математических принципах, привязанных к человеческому зрению).
Трёхмерное представление HSL
Оттенок вращается на 360 градусов, полный круг, а насыщенность и светлота — это проценты от 0 до 100. Представьте себе колесо, в центре которого находится плотное и насыщенное содержимое. Эта демонстрация довольно хорошо отражает систему.
Если вы не особенно опытны в работе с цветом, hsla() позволяет использовать некоторые довольно простые правила для приятных эффектов для разработчиков. Подробнее об этом — в разделе “Генеративный цвет”.
Доступность и другие замечания
Цвет проявляется только в отношении с другими цветами. Вы, вероятно, немного знакомы с этим в плане стандартов доступности [для людей с ограничениями по зрению]. Светло-зелёный цвет на чёрном может быть доступным [видимым], но, когда вы меняете фон на белый, зелёный различается плохо.
Доступность цвета можно измерить многими инструментами. Ниже некоторые из моих любимых:
Также очень хорошо с самого начала настроить свою палитру так, чтобы она была доступной [контрастной].
Color Safe — отличный инструмент, который помогает в этом. Как только вы всё подготовите, WAVE (Web Accessibility Tool) поможет оценить веб-страницу.
Прямоугольник и тень текста
Свойства box-shadow и text-shadow принимают значение цвета. Тени текста принимают 2 или 3 значения, h-shadow (горизонтальная тень), v-shadow (вертикальная тень) и необязательный радиус размытия.
Тени прямоугольника принимают 2 или 4 значения, h-shadow , v-shadow , дополнительное расстояние размытия и дополнительное расстояние распространения. Вы также можете обозначить вставку в начале, чтобы создать перевёрнутую тень. На этом сайте есть отличная демонстрация с простым, легко вставляемым кодом.
JavaScript
GreenSock выпустили инструмент, позволяющий анимировать относительные значения цвета, что очень полезно: можно захватывать сразу множество элементов и анимировать эти элементы относительно их собственных цветовых координат. Вот несколько демонстрирующих идею черепах. Чтобы увидеть эффект, наведите курсор на черепаху.
Смешение цветов и режимы смешения фонов
Если вы использовали эффекты слоёв в Photoshop, то, вероятно, знакомы с режимами смешивания (наложения). Почти каждый сайт в 90-е годы использовал их (мой тоже). Режимы смешивания и фонового наложения позволяют соединить два разных многослойных изображения, при этом доступно 16 режимов.
Верхнее изображение, или цвет, называется исходным, нижний слой называется конечным. Область между слоями, где происходит смешивание, называется фоном. Изображения смешиваются при помощи довольно простых формул.
Если вы хотите прослыть настоящим занудой, знайте, что формулы для режимов наложения зависят от типа эффекта. Например, multiply — это destination source = backdrop. Другие эффекты — это вариации простой математики с вычитанием, умножением, сложением и делением. Формула линейного эффекта — A+B-1, а эффекта Color Burn — это 1-(1-B)*A.
Вот более обширная документация, а ниже простая демонстрация, иллюстрирующая работу цвета в таких эффектах:
В этой замечательной статье Робин демонстрирует некоторые действительно сложные и впечатляющие эффекты, которых можно добиться с помощью наложения нескольких режимов смешивания. Ниже мы рассмотрим их смешивание с фильтрами.
Именованные цвета
Именованные цвета имеют репутацию неудобных из-за неточных названий.
Самые яркие, "знаменитые" примеры: тёмно-серый на самом деле светлее серого, а лайм и лайм-грин — совершенно разные цвета. Есть даже игра, где нужно угадать название цвета в вебе, созданная Крисом Хеилманном.
В давние времена chucknorris был кроваво-красным цветом (сейчас он поддерживается только в HTML, насколько я могу судить), это был мой любимый цвет.
Именованные цвета могут быть полезны в быстрой демонстрации, но обычно разработчики используют Sass или другие препроцессоры для хранения значений цветов в формате hex, rgba или hsla и сопоставления их с названиями цветов, используемых в компании.
feColorMatrix
В другой статье Уна исследует создание этих изображений через feColorMatrix, — примитива фильтра в SVG, который также может применяться к элементам HTML. Он очень мощный и позволяет точно настроить цвет. Как следует из названия, базовая разметка feColorMatrix использует матрицу значений, а применяется она через её относительный id.
Матрицу можно расширить и отрегулировать оттенок, насыщенность и так далее:
В статье Уны подробно рассматриваются все возможности этого инструмента. Ещё больше информации об этом и многих других сумасшедших цветах SVG, а также об инструментах градиента в книге Амелии Белами-Ройд от O’Reilly или в исследовательской демонстрации Майка Муллани.
Полезное
Color Highlighter Plugin для Sublime Text я использую, чтобы увидеть, какой цвет интерпретирует браузер. Мне нравится использовать .
Существует несколько различных традиционных комбинаций палитры, а также интернет-ресурсы, которые помогут вам их составить. Вот более научное представление — Paletton или Adobe Color.
Бенджамин Найт написал аналог Adobe Color при помощи d3 на CodePen, инструмент довольно крут и заслуживает внимания.
Если вы хотите, чтобы веб делал за вас тяжёлую работу (а кто этого не хочет?), посмотрите на Coolors, настолько простой, насколько это возможно.
Если вам нужна помощь в интерпретации цветов, и вы хотите быстрый простой инструмент перевода цвета из одной цветовой модели в другую, в энциклопедии цвета ColorHexa вы найдёте преобразования цветов в разные системы, которые только можно придумать.
И для самых занудных цветоманов. Вы можете даже заставить свою консоль выводить цвета для вас. Вот великолепный пен, показывающий, как это работает. Надеюсь, эта статья даст вам отправную точку для экспериментов и понимания.
Продолжить изучение цветов, чтобы стать профессиональным веб-разработчиком, вы можете на наших курсах:
Также вы можете перейти на страницы из каталога, чтобы узнать, как мы готовим специалистов в других направлениях.
Профессии и курсы
Подавляющее большинство компьютерной графики относится к двум видам: растровая и векторная.
В растровой графике главным элементом является пиксель (сокращение от английских слов picture element, элемент изображения). Пиксель ¾ это элементарный квадратный элемент растрового изображения, внутри которого цвет, яркость и другие свойства остаются неизменными. Все изображение состоит из мельчайших квадратов одинакового размера, каждый из них обладает определенным цветом и яркостью, и это записано в файле.
Иначе говоря, принцип такой: берем окружающую непрерывную реальность, делим ее на мелкие квадраты и по квадратам вносим в компьютер. Если квадраты-пиксели незаметны глазом, то цифровое изображение выглядит вполне естественно.
Почти все устройства ввода графики в персональный компьютер и вывода из него построены по растровому принципу, изображение в них оцифровано в виде точек растра. Рисунки или фотографии, вводимые в компьютер, например, со сканера или через Интернет, будут растрового типа.
Мерой величины пикселей является разрешение. Разрешение ¾ это количество пикселей, отнесенное к единице длины – одному дюйму. Разрешение измеряется в точках на дюйм ¾ dpi (dots per inch). Один дюйм равен 2,54 см.
В векторной графике основным элементом является линия. Точнее сегмент: отрезок линии ограниченный двумя опорными точками. Все линии-сегменты рисунка записаны в файле в виде определенных математических формул. Также определенным образом записаны цвет, толщина и другие свойства сегментов и опорных точек. Сегменты, соединяясь друг с другом через опорные точки, образуют контуры. Замкнутые контуры могут быть заполнены цветом, градиентом, текстурой и пр.
Назначение векторной графики – создание рисунков, логотипов, деловой графики и пр.; простых и бедных в живописном плане, но точно очерченных. Такой рисунок не является точным отражением реальности, он выражает некие смыслы и образы, понятные другим людям. Кстати, текст – это тоже векторная графика, все буквы созданы из векторных контуров.
Представление цвета в компьютере.
Как уже было сказано, в компьютере все выражается в виде комбинации нулей и единиц, в том числе и цвет. Имеются различные варианты описания цвета, ниже приведены самые распространенные из них.
а) Режим Bitmap.Это самое элементарное представление – побитовое, цвет пикселя или векторного объекта кодируется одним битом. Так можно закодировать только два варианта – черный и белый цвет (или любой другой набор их двух цветов, например, красный и зеленый). В режиме Bitmap обычно представляется текст, а также штриховая графика – черные рисунки на белом фоне.
б) Режим Grayscale. Для кодирования яркости тоновых черно-белых иллюстраций используется один байт (8 разрядов), что дает в результате для каждой точки 2 8 = 256 градаций серого цвета. Этого вполне достаточно для черно-белой тоновой графики, в большей детализации нужды нет.
в) Индексный режим– здесь одним байтом кодируется цвет, всего может получиться те же 256 цветов. Разумеется, такое небольшое количество цветовых кодов снижает качество изображения.
Бывает, что при создании рисунков используется именно индексный режим. Вызывается имеющаяся в программе индексная палитра и выбирается подходящий цвет. Если нет необходимости, или желания провести более детальный выбор, то на этом раскраска заканчивается.
Индексный режим часто применяется в Интернете, где существенную роль играет время загрузки веб-страницы. Время будет тем меньше, чем меньше размер страницы. Экономия на описании цвета тоже дает выигрыш в размере Интернет-баннеров.
г) Режим True Colorили цветовая модель RGB.ТерминTrue Color относится только в мониторам, а термин RGB гораздо шире.В основе этой модели заложены три цвета: красный, зеленый и синий. Red, Green, Blue, модель названа по первым буквам английских названий этих цветов (рисунок 1). Наше зрение устроено таким образом, что любой цвет, видимый человеческим глазом, можно получить путем смешения этих трех основных цветов.
Модель хорошо подходит для объектов, испускающих свет, в частности для экранов мониторов. Сканеры, цифровые камеры и прочие устройства ввода графики в компьютер тоже работают в модели RGB, ведь в конечном итоге человек видит электронное изображение на экране монитора.
Для кодирования яркости каждого из основных цветов используется по 256 значений, то есть один байт или 8 разрядов. Всего на кодирование цвета одной точки надо затратить 24 разряда. А всего система кодирования обеспечивает однозначное определение 2 24 ≈ 16,8 миллионов различных цветов.
На самом деле такого огромного количества цветов на экране не требуется, человек различает около 200 000 цветовых оттенков. Но такова уж система кодирования – на каждый канал отводится не меньше, чем по одному байту. А при обработке файлов бывает, что избыток оттенков может оказаться полезным и даже необходимым.
Рис. 1. Цветовая модель RGB.
д) Цветовая модель CMYK(рисунок 2).Здесь основными цветами являются голубой (Cyan), пурпурный (Magenta), желтый (Yellow), черный (Black). В обозначении цветовой модели для черного цвета взята не первая буква, а последняя, чтобы не было путаницы с буквой В системы RGB.
Рис. 2. Цветовая модель CMYK.
Эту модель используют для описания отраженного цвета, главным образом в полиграфии. Большая часть цветной печатной продукции выполняется в модели CMYK (имеется шестикрасочный и пантонный виды печати, но рассмотрение этих деталей выходит за рамки данного курса). При печати цветного электронного изображения, даже на офисном принтере, происходит автоматическое преобразование RGB в CMYK.
При отражении света от поверхности часть света поглощается, и цвет определяется теми световыми волнами, которые поверхностью не поглотились. Чем больше положено различных красок, тем больше поглощение, меньше отражение, тем темнее выглядит поверхность. Смешение всех красок будет давать черный цвет. А отсутствие какого-либо поглощения будет давать полное отражение, как в зеркале. Если на зеркало падает белый цвет, то это нулевое окрашивание.
При испускании света все наоборот – чем больше испускается световых волн, тем выше яркость света. Равномерное испускание всех световых волн соответствует белому цвету. А отсутствие испускания (отражением здесь мы пренебрегаем) соответствует черному цвету.
Как следует из сказанного, модели RGB и CMYK описывают противоположные процессы. Поэтому в RGB всем нулевым индексам соответствует черный цвет, а всем единицам белый. В CMYK наоборот: все нули это белый цвет, а единицы – черный.
В теории модели RGB и CMY (без K) зеркально противоположны: основные цвета одной модели являются дополнительными для другой и наоборот (рисунки 1 и 2). Для чего же вводится еще и черный цвет?
Дело в том, что при переходе к реально используемым при печати краскам теория не работает. Смешение голубой, пурпурной и желтой красок дает не черный, а темно-бурый цвет. А между тем, черный цвет является основным в полиграфии: текст как правило печатается черным, да и много выпускается не цветной, черно-белой продукции. Поэтому возникает необходимость во введении отдельной, черной координате в цветовой модели.
Электронная цветовая палитра в компьютерной графике по предназначению подобна палитре художника, но включает гораздо большее число цветов. Электронная палитра состоит из определенного числа ячеек, каждая из которых содержит отдельный цветовой тон. Конкретная цветовая палитра соотносится с определенной цветовой моделью, так как ее цвета созданы на основе цветового пространства этой модели. Но если в цветовой модели возможно воспроизвести любой из описываемых ею цветов, цветовая палитра содержит ограниченный набор цветов, называемых стандартными.
Примером стандартных цветовых палитр являются наборы фирмы Pantone, ориентированные на полиграфическую публикацию изображений. Программы создания и обработки компьютерной графики, как правило, предоставляют на выбор несколько цветовых палитр в цветовых моделях RGB, HSB, CIE Lab, CMYK.
Состав цветовых палитр RGB зависит от выбранного цветового разрешения — 24, 16 или 8 бит. В последнем случае цветовая палитра называется индексной, потому что каждый цветовой оттенок кодируется одним числом, которое выражает не цвет пиксела, а индекс (номер) цвета. Таким образом, к файлу цветного изображения, созданного в индексной палитре, должна быть приложена сама палитра, так как программе обработки компьютерной графики неизвестно, какая именно палитра была использована.
Изображения, подготавливаемые для публикации в Интернете, принято создавать в так называемой безопасной палитре цветов. Она является вариантом рассмотренной выше индексной палитры. Но так как файлы изображений в Web-графике должны иметь минимальный размер, необходимо было отказаться от включения в их состав индексной палитры. Для этого была принята единая фиксированная палитра цветов, названная «безопасной», то есть обеспечивающей правильное отображение цветов на любых устройствах (в программах), поддерживающих единую палитру. Безопасная палитра содержит всего 216 цветов, что связано с ограничениями, накладываемыми требованиями совместимости с компьютерами, не относящимися к классу IBM PC.
При создании и обработке элементов компьютерной графики необходимо добиться, чтобы изображение выглядело практически одинаково на всех стадиях процесса, на любом устройстве отображения, при любом методе визуализации (аддитивном или субтрактивном). Иначе, чем больше переходных этапов будет содержать процесс обработки, тем большие искажения будут вноситься в оригинал, и конечный результат может совершенно не удовлетворять даже минимальным требованиям к качеству. Для согласования цветов на всех стадиях обработки компьютерной графики применяют системы управления цветом (Color Management System — CMS).
Такие системы содержат набор объективных параметров, обязательных для всех устройств при обмене цветовыми данными. Универсальность CMS достигается введением трех типов переменных, каждая из которых управляет представлением цвета на своем уровне:
Цветовая гамма.Каждый тип устройства имеет свою цветовую гамму, область которой всегда меньше, чем цветовой охват практически любой цветовой модели. CMS управляет преобразованием цвета между различными цветовыми моделями с учетом цветовой гаммы конкретных устройств.
Профиль.Каждое устройство воспроизводит цвета особенным образом, что зависит от технических и программных решений, принятых изготовителем. Для согласования отображения цветов на различных устройствах они должны иметь собственный профиль, описывающий различия в представлении цвета между устройством и определенной цветовой моделью. Международным консорциумом по цвету (International Color Consortium — ICC) установлен промышленный стандарт на параметры описания характеристик воспроизведения цвета. Устройства, имеющие профиль ICC, напрямую управляются CMS. В противном случае возможна генерация профиля в некоторых системах CMS.
Калибровка.Даже устройства одной модели от одного производителя имеют отличия в реализации профиля ICC, обусловленные допусками при изготовлении компонентов, условиями эксплуатации, внешними помехами. Поэтому CMS, как правило, включает средства калибровки, то есть настройки конкретного экземпляра в соответствии с требованиями профиля ICC и фиксации неустранимых отклонений (с целью их программной компенсации). Средства калибровки могут быть аппаратно-программными и чисто программными. Сам процесс калибровки выполняется с периодичностью, установленной изготовителем, или автоматически, при выходе параметров ICC за границы допусков.
Не существует идеальной системы управления цветом, одинаково пригодной для всех устройств, одинаково работающей на всех платформах и во всех программных средах. Наиболее близко к идеалу подходят CMS, реализованные на уровне операционной системы. Впервые CMS под названием ColorSync в операционную систему встроила фирма Apple, что предопределило успех компьютеров Macintosh в сфере издательской деятельности, допечатной подготовки и полиграфии. В операционной системе Windows XP используется система Image Color Management.
Из CMS, являющихся внешними по отношению к операционной системе, наибольшее распространение получили программы фирм, давно работающих в области цветной фотографии, печати, цифровых графических технологий.
Agfa Foto Tune.Эта система управления цветом работает на платформах Windows и Apple. Включает множество профилей /СС для мониторов, цветных принтеров, сканеров, цифровых фотокамер, полиграфического оборудования. Имеются средства создания заказных профилей для устройств, не попавших в список. Преобразования между цветовыми профилями устройств (например, сканер — монитор) могут производиться напрямую, без промежуточного конвертирования в цветовую модель CIELab и обратно.
Kodak DayStar ColorMatch.Система предназначена для пользователей пакетов Adobe Photoshop и QuarkXPress. Отличается модульным построением, поэтому базовая поставка содержит ограниченное число профилей, а остальные необходимо приобретать дополнительно. Система имеет средства поддержки формата Kodak PhotoCD с учетом вывода изображений на фотопринтеры. Средства калибровки включают стандартный шаблон IT8 для сканеров и устройство Digital Colorimeter для мониторов.
Препроцессоры
Для настройки цветов отлично подходят препроцессоры CSS. Вот несколько ссылок на документацию по цветовым функциям различных препроцессоров:
А ниже несколько интересных вещей, которые мы можем сделать с помощью Sass:
На самом деле есть десятки способов программного смешивания и изменения цветов с помощью препроцессоров, не будем в них углубляться, но вот отличный интерактивный ресурс, чтобы узнать больше.
Нативный ввод цвета
Существует встроенный в браузер селектор цветов, который вы можете использовать, чтобы помочь пользователям выбирать цвета динамически. Такой код:
Отобразит элемент выбора цветов, например такой:
Следует иметь в виду, что в разных браузерах селектор цветов будет отображаться по-разному, как и любой другой встроенный элемент управления.
Этот пен Ноя Блона показывает, как использовать его в сочетании с цветовым фильтром hue в CSS, чтобы выбирать части изображения динамически и изменять цвета. Оставшаяся часть изображения — это градации серого, поэтому она не затрагивается, что довольно умно.
currentColor
currentColor — это невероятно полезное значение. Полезно оно для распространения значения цвета на тени, контуры, границы или даже фон. Допустим, вы создали div (внешний, то есть .div-xternal ), а внутри него ещё один, div-internal . Обведём внутренний div оранжевой границей с помощью currentColor :
Это невероятно полезно для систем иконок, либо шрифтовых SVG-иконок. Вы можете установить currentColor в качестве значения по умолчанию для заливки, обводки или цвета, а затем использовать семантически подходящие классы CSS для стилизации.
Цвет и атмосфера
Атмосфера влияет на цвет. Знать это довольно важно, если вы собираетесь создать хоть какую-то иллюзию глубины. Предметы ближе к вам более насыщены и контрастны. Предметы дальше более размыты.
Ландшафт подчёркивает зависимость контраста от расстояния
Тени не серые, они дополняют цвет света: если свет обладает жёлтым оттенком, тень будет казаться фиолетовой. Это полезно знать, если вы создаёте очень длинные тени.
Читайте также: