Цветовые модели передачи цвета в web-дизайне

Web Safe Colors?

Many years ago, when computers supported maximum 256 different colors, a list
of 216 «Web Safe Colors» was suggested as a Web standard (reserving 40 fixed
system colors).

This is not important now, since most computers can display millions of
different colors.

This 216 hex values cross-browser color palette was created to ensure that all computers
would display the colors correctly when running a 256 color palette:

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

❮ Назад
Дальше ❯

RGB

С бумаж­ной печа­тью всё понят­но, но с отоб­ра­же­ни­ем на экране всё ина­че. Дело в том, что экран — это куча све­тя­щих­ся пик­се­лей, кото­рые рабо­та­ют по дру­го­му прин­ци­пу. Если при печа­ти мы не поста­вим на бума­гу ни одну кап­лю крас­ки, она оста­нет­ся белой. А вот если мы не вклю­чим на экране ни один пик­сель, то он оста­нет­ся чёр­ным. Всё дело в том, что бума­га отра­жа­ет свет, а экран — наобо­рот, излу­ча­ет его. 

Каж­дый пик­сель на экране мони­то­ра состо­ит из трёх суб­пик­се­лей — крас­но­го, зелё­но­го и синего.

Суб­пик­се­ли в мат­ри­це экра­на ком­пью­те­ра или смартфона 

На бума­ге при сме­ши­ва­нии чер­нил мы полу­ча­ли более тём­ные цве­та. А на экране всё наобо­рот: при сме­ши­ва­нии мы полу­ча­ем более яркие и более свет­лые цве­та. Это про­ис­хо­дит пото­му, что при сме­ши­ва­нии у нас уве­ли­чи­ва­ет­ся коли­че­ство све­тя­щих­ся пик­се­лей и коли­че­ство све­та, кото­рый видит глаз.

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

А если все три суб­пик­се­ля будут све­тить­ся со сто­про­цент­ной ярко­стью, то мы уви­дим белый цвет:

Цвета RGB.

Основные цвета RGB, в области представления, могут совмещаться друг с другом, в результате создавая дополнительные: желтый (yellow) – составной из красного с зеленого; пурпурный (magenta или fuchsia) – из красного и синего; голубой (cyan, он же aqua) — из синего и зеленого. Все три цвета вместе воспроизводят белый, а отсутствие освещения – черный.

Оттенки зависят от интенсивности излучения: от 0 (отсутствие света) до 255 (максимальное значение), что в конечном результате дает спектральный выбор из 16 777 216 значений. Однако, несмотря на такое обилие цветов, их воспроизведение в полной мере обусловлено аппаратными возможностями оборудования: различные девайсы имеют разные алгоритмы вычисления входящих данных, а реакция цветовых компонентов (люминофоров или красителей) на отдельные каналы R, G, B полностью зависит от производителя, а зачастую и времени эксплуатации, как пример – “подсевший” экран телевизора или монитора.

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

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

Для перевода значений RGB или конвертации в другие цветовые модели (CMYK, HSV, HSL) можно воспользоваться калькулятором цветов.

Золотая природа

Протиста

Золотая водоросль или золотистые большая группа из страменопилы водорослей , в основном в пресной воде.

• Золотой бамбук ( Phyllostachys aurea ) — это вид бамбука.
• Золотой мак и золотарник популярные цветы возделывать в садоводстве .
• Yukon Gold картофеля является разновидностью картофеля узнаваем по его гладких глаз и золотой интерьер.

• Золотые гапалемуры ( Hapalemur стафилококк ) является средними гапалемурами эндемичным для юго — востока Мадагаскара.
• Беркут является Северное полушарие хищных птиц .
• Золотая рыбка была одна из самых ранних рыб быть одомашнены, и еще один из наиболее часто держали аквариумных рыб и воды сада рыбы.
• Золотистый ретривер является средними породами собак , что является одним из самых популярных домашних животных .
• Золотая жаба была амфибия , который раньше жил в Коста — Рике , который сейчас вымерли .

Металлическое золото

Gold (металлическое золото)

Металлическое золото
Цветовые координаты
	# D4AF37
HSV       ( ч , , в )	(46 °, 74%, 83%)
sRGB B   ( r ,  g ,  b )	(212, 175, 55)
Источник
Дескриптор ISCC – NBS	Сильный желтый
B : нормализовано до (байт) H : нормализовано до (сто)

Справа отображается цветное металлическое золото (цвет, традиционно известный как золото ), которое является имитацией цвета самого золота металлического элемента — оттенка золота .

Источником этого цвета является Словарь названий цветов ISCC-NBS (1955 г.), словарь цветов, используемый коллекционерами марок для определения цветов марок — см. Образец цвета золота (образец цвета Gold (T) # 84). на указанной веб-странице:

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

Цвет сети: золото против металлического золота

Металлический по своей природе.

Heritage Dictionary американский определяет цвет металлического золота , как «Свет оливково-коричневого до темно — желтого цвета, или умеренный, сильный , чтобы яркий желтый цвет.»

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

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

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

RGB цвета

Значения цвета RGB поддерживается во всех основных браузерах. Значение цвета RGB задается в следующем порядке: R(красный), G(зеленый), B (синий). Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255 .

Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в . Записывается это следующим образом:

<p style = color: rgb(0,255,0)">Я абзац зеленого цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,0,0)">Я абзац красного цвета</p> <!-- задаем цвет текста значением rgb --> 
<p style = color: rgb(255,165,0)">Я абзац оранжевого цвета</p> <!-- задаем цвет текста значением rgb --> 

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

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

Практическое задание № 11.

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

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

Стили

Таблицы

HSLA цвета

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

Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:

<p style = color: hsla(0,100%,50%,0.1)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.1 --> 
<p style = color: hsla(0,100%,50%,0.2)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.2 --> 
<p style = color: hsla(0,100%,50%,0.3)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.3 --> 
<p style = color: hsla(0,100%,50%,0.4)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.4 --> 
<p style = color: hsla(0,100%,50%,0.5)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.5 --> 
<p style = color: hsla(0,100%,50%,0.6)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.6 --> 
<p style = color: hsla(0,100%,50%,0.7)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.7 --> 
<p style = color: hsla(0,100%,50%,0.8)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.8 --> 
<p style = color: hsla(0,100%,50%,0.9)">Я абзац красного цвета?</p> <!-- значение альфа канала 0.9 --> 

Золотая природа

Протиста

Золотая водоросль или золотистые большая группа из страменопилы водорослей , в основном в пресной воде.

• Золотой бамбук ( Phyllostachys aurea ) — это вид бамбука.
• Золотой мак и золотарник популярные цветы возделывать в садоводстве .
• Yukon Gold картофеля является разновидностью картофеля узнаваем по его гладких глаз и золотой интерьер.

• Золотые гапалемуры ( Hapalemur стафилококк ) является средними гапалемурами эндемичным для юго — востока Мадагаскара.
• Беркут является Северное полушарие хищных птиц .
• Золотая рыбка была одна из самых ранних рыб быть одомашнены, и еще один из наиболее часто держали аквариумных рыб и воды сада рыбы.
• Золотистый ретривер является средними породами собак , что является одним из самых популярных домашних животных .
• Золотая жаба была амфибия , который раньше жил в Коста — Рике , который сейчас вымерли .

RGB в CSS, SVG.

Цвет RGB в CSS задается при помощи свойств , применяется для текста; для фона элемента и для цвета границы. В SVG подобные, но никак не аналогичные, задачи возложены на атрибуты и : fill используется для текста или объекта, stroke для линии или контура (обводки). Для указания цвета можно использовать один из следующих вариантов: в десятичном исчислении числами от 0 до 255: ; в процентах: (запрещено совмещать проценты с цифрами: , данный синтаксис является ошибкой!), или же шестнадцатеричном коде (Hex).

Шестнадцатеричный код.

Шестнадцатеричный код (hex) является простейшей системой измерений, для исчисления в которой используется 16 символов: десять цифр от 0 до 9 и шесть английских букв — A, B, C, D, E, F, комбинация символов от 00 до FF предоставляет выбор из 256 возможных вариантов (16 х 16 = 256). Каждый цветовой канал может быть представлен попарно, как rr-gg-bb: , или, в случае одинаковых значений в каждой паре (#33-ff-00), возможно сокращенное написание r-g-b: или: (r-g-b-a). Регистр значения не имеет, допускается написание как прописными, так и заглавными; знак решетки (#) перед кодом является обязательным; последовательность соблюдается для всех вариантов: R, G, B.

RGBA.

Формат RGBA, принятый в CSS 3, добавляет к rgb четвертый параметр – альфа-канал (прозрачность). Альфа-канал определяется с использованием десятичных дробей значениями от 0 до 1, или процентов, где ноль означает полную прозрачность, а единица (100%) — отсутствие таковой, к примеру: цвет с параметром 0.5 (50%) будет непрозрачным наполовину. Прозрачность указывается после написания цвета: в целочисленном диапазоне от 0 до 255 – ; в процентах – . Возможно сокращение кода, допустимо использовать в качестве разделителя запятую:, пробел и косую черту: удалить ноль перед десятичной дробью: .

Указание прозрачности в шестнадцатеричном коде, к примеру: (RRGGBB + альфа-канал), в данный момент не является нормативным, хотя и поддерживается современными браузерами. Также прозрачность в CSS может быть задана при помощи свойства opacity: , в SVG для определения прозрачности используем атрибуты и .

LAB

Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.

HEX в RGB
HEX в RGBA
HEX в RGB(%)
HEX в RGBA(%)
HEX в HSL
HEX в HSLA
HEX в CMYK
HEX в HSB/HSV
HEX в XYZ
HEX в LAB
RGB в HEX
RGB в RGBA
RGB в RGB(%)
RGB в RGBA(%)
RGB в HSL
RGB в HSLA
RGB в CMYK
RGB в HSB/HSV
RGB в XYZ
RGB в LAB
RGBA в HEX
RGBA в RGB
RGBA в RGB(%)
RGBA в RGBA(%)
RGBA в HSL
RGBA в HSLA
RGBA в CMYK
RGBA в HSB/HSV
RGBA в XYZ
RGBA в LAB
RGB(%) в HEX
RGB(%) в RGB
RGB(%) в RGBA
RGB(%) в RGBA(%)
RGB(%) в HSL
RGB(%) в HSLA
RGB(%) в CMYK
RGB(%) в HSB/HSV
RGB(%) в XYZ
RGB(%) в LAB
RGBA(%) в HEX
RGBA(%) в RGB
RGBA(%) в RGBA
RGBA(%) в RGB(%)
RGBA(%) в HSL
RGBA(%) в HSLA
RGBA(%) в CMYK
RGBA(%) в HSB/HSV
RGBA(%) в XYZ
RGBA(%) в LAB
HSL в HEX
HSL в RGB
HSL в RGBA
HSL в RGB(%)
HSL в RGBA(%)
HSL в HSLA
HSL в CMYK
HSL в HSB/HSV
HSL в XYZ
HSL в LAB
HSLA в HEX
HSLA в RGB
HSLA в RGBA
HSLA в RGB(%)
HSLA в RGBA(%)
HSLA в HSL
HSLA в CMYK
HSLA в HSB/HSV
HSLA в XYZ
HSLA в LAB
CMYK в HEX
CMYK в RGB
CMYK в RGBA
CMYK в RGB(%)
CMYK в RGBA(%)
CMYK в HSL
CMYK в HSLA
CMYK в HSB/HSV
CMYK в XYZ
CMYK в LAB
HSB/HSV в HEX
HSB/HSV в RGB
HSB/HSV в RGBA
HSB/HSV в RGB(%)
HSB/HSV в RGBA(%)
HSB/HSV в HSL
HSB/HSV в HSLA
HSB/HSV в CMYK
HSB/HSV в XYZ
HSB/HSV в LAB
XYZ в HEX
XYZ в RGB
XYZ в RGBA
XYZ в RGB(%)
XYZ в RGBA(%)
XYZ в HSL
XYZ в HSLA
XYZ в CMYK
XYZ в HSB/HSV
XYZ в LAB
LAB в HEX
LAB в RGB
LAB в RGBA
LAB в RGB(%)
LAB в RGBA(%)
LAB в HSL
LAB в HSLA
LAB в CMYK
LAB в HSB/HSV
LAB в XYZ

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

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

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

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

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

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

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

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

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

Новые цвета получаются путём наложения трёх основных друг на друга в разных пропорциях

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

• Красители, созданные с помощью химических веществ, не идеальны. На практике смешение трёх красок обычно даёт грязно-коричневый цвет.
• Цветные краски дороже. Например, если нам нужен тёмно-красный цвет, можно составить его из красного, синего и зелёного, а можно — из красного и чёрного. Второй вариант обойдётся дешевле при печати.
• У бумаги ограничена впитывающая способность. Чтобы получить максимально близкий к чёрному цвет, используя голубой, розовый и жёлтый, на лист нанесут 300% краски — газетная бумага такого не выдержит. А чистый чёрный цвет — это всего лишь 100% процентов краски.

RGBA

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

Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

1. h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
2. h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
3. h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
4. h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
5. h5 { color: rgba(0, 0, 255, 0); } /* полностью прозрачный */

RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.

Система CMYK

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

Противоположный пример — асфальт. Только что положенный хороший асфальт (без примесей гальки) — идеально чёрный. То есть на самом деле цвет его нам не известен, но он таков, что поглощает все цвета света, который на него падает и потому он нам кажется чёрным. Со временем, когда по асфальту начинают ходить пешеходы или ездить машины, он становится «грязным» — то есть на его поверхность попадают вещества, которые начинают отражать видимый свет (песок, пыль, галька). Асфальт перестаёт быть чёрным и становится «серым». Если бы нам удалось «отмыть» асфальт от грязи — он снова стал бы чёрным.

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

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

Соответственно, существуют комбинации цветов, смешивая которые мы можем полностью поглотить все цвета, отражаемые бумагой, и сделать её чёрной. Опытным путём была выведена комбинация «циан-маджента-жёлтый» (CMY) — cyan/magenta/yellow.

В идеале, смешивая эти цвета, мы должны были бы получить чёрный цвет. Однако на практике так не получается из-за технических качеств красителя. В лучшем случае, что мы можем получить, — это темно-бурый цвет, который лишь отдалённо напоминает чёрный. Более того весьма неразумно было бы использовать все три дорогие краски только для того, чтобы получить элементарный чёрный цвет. Поэтому в тех местах, где нужен чёрный, вместо комбинации трёх красок наносится обычный более дешёвый чёрный краситель. И потому к комбинации CMY обычно добавляется буква K (Key — «ключевой», или blacK) — обозначающая чёрный цвет.

Белый цвет в схеме отсутствует, так как его мы и так имеем — это цвет бумаги. В тех местах, где нужен белый цвет, краска просто не наносится. Значит отсутствие цвета в схеме CMYK соответствует белому цвету.

Эта система цветов называется субтрактивной (subtractive), что в грубом переводе означает «вычитающая/исключающая». Иными словами, мы берём белый цвет (присутствие всех цветов) и, нанося и смешивая краски, удаляем из белого определённые цвета вплоть до полного удаления всех цветов — то есть получаем чёрный.

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

HSL цвета

К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:

• Hue — тон.
• Saturation — насыщенность.
• Lightness — осветленность.

При этом используется следующий синтаксис:

hsl(от 0° до 360°, от до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков, изображенном ниже:

Красный цвет соответствует значениям — 0° и 360°, желтый — 60°, зеленый — 120°, голубой — 180°, синий — 240°, фиолетовый — 300° и т. д.

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

Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Например:

<p style = color: hsl(0,100%,50%)">Я абзац красного цвета</p> <!-- задаем цвет текста значением hsl --> 

Ниже приведено изображение, где для каждого блока задано свое значение hsl:

Рис. 16б Пример использования значений hsl

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

Кодирование цвета в формате HEX — это, по сути, шестнадцатеричное представление рассмотренной выше модели RGB.

Все коды цветов этой модели представляются в комбинированном виде из триады цифр в шестнадцатеричной системе счисления, в которой каждая из трёх групп отвечает за свой составляющий цвет. Длина группы фиксированная – 2 символа. Такой подход позволяет всё так же указать 256 состояний нужного цветового коэффициента. Значения каждого из групп коэффициентов должны быть между 00 и FF.

Для браузеров возможна и упрощённая форма записи цвета в HEX-формате, где указываются всего три символа кода вместо 6. В таком случае, подразумевается что каждая из трёх групп состоит из одинаковых символов. Например, AAFF11, можно сократить до AF1.

Примеры передачи цвета в WEB при помощи HEX-модели для CSS-стилей элементов:

Помимо указанных особенностей, HEX-модель поддерживает и alpha-канал для управления прозрачностью, в таком случае добавляется четвертый коэффициента в диапазоне от 00 и FF (256 значений). В таком случае использование сокращённой формы записи уже недопустимо.

Пример передачи цвета в WEB при помощи HEXA-модели для CSS-стилей элементов:

Выбрать текст цвета #fff, фон цвета #fff

Как выглядит текст цвета #fff на светлом и тёмном фонах, светлый и тёмный текст на фоне цвета #fff. Сравните выбранный цвет #fff шрифта с его размером (заголовок и обычный текст).

Текст #fff на светлом
На светлом фоне (#f9faf0) текст цвета #fff. Сравните читаемость текста выбранного цвета на тёмном фоне.

Текст #fff на тёмном
На тёмном фоне (#00181f) текст цвета #fff. Тёмная тема приятна для глаз ближе к ночи.

Фон #fff с белым текстом
На фоне #fff текст белого цвета (#ffffff) при достаточном контрасте приятно выделяется.

Фон #fff с чёрным текстом
Текст чёрного цвета привычнее смотреть на белом, светлых тонах. На фоне #fff текст чёрного цвета (#000000).

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

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

• L — Lightness, яркость объекта;
• а — ось, по которой отложены градации от красного к зелёному;
• b — ось с градациями от жёлтого к синему.

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

Каждый цвет можно описать тремя координатами

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

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

Так можно визуально представить модель Lab