Здравствуйте! В этом видео я расскажу вам о некоторых существующих цветовых моделях. Итак, цветовая модель – это математическая модель описания представления цветов в виде набора чисел, обычно трех, реже четырех значений. Также цветовую модель можно представить себе как пространство цветов. И каждый цвет имеет свою координату. Первая цветовая модель называется RGB. Она кодирует любой цвет, представляя его в виде комбинации трех цветов: красного, зеленого и синего. Эту цветовую модель можно увидеть, если посмотреть как работают мониторы. Есть три светодиода: красный, зеленый и синий. Если они все три включены на максимум, то получается белый цвет. Если играть с интенсивностью, то получатся другие цвета. Интенсивность каждого из трех цветов – это 1 байт. И представлены следующим образом: белый цвет получается, если мы устанавливаем все значения – 255, 255, 255. Красный – если только первая компонента установлена в 255. Если не установлен ни один из них, то получается черный цвет. Также можно цветовую модель представить в виде куба, где координата каждого из них представляет какой-то цвет. И если значение максимальное, то получается белый цвет. Если значение минимальное, то черный цвет. В CSS цвета можно указывать в цветовой модели RGB, где первым аргументом передается интенсивность красного цвета, вторым – зеленого, третьим – синего. Значение также можно указывать в процентах. Также можно вместо десятичных значений указывать значения в 16-ричной системе. Для этого нужно установить знак «#» и указывать числа. То есть 255 соответствует числу ff. Число 00 в 16-ричной системе соответствует числу 0 в 10-ричной. Можно сделать более короткую запись. В этом случае если повторяются буквы, например ff, 00, 00, можно сократить до f, 0, 0. Также можно указать цвет при помощи функции rgba с альфа-каналом, то есть четвертым аргументом передается значение альфа-каналом, которое указывает непрозрачность элемента. То есть если значение 0, то цвет полностью прозрачный, если значение 1, то цвет непрозрачный. Например, у нас есть box, мы задаем ему фон: rgba (255, 0, 0), то есть красный с полупрозрачностью при наведении. Наводим, и цвет у нас получается полупрозрачный. При этом буквы остаются непрозрачными. В CSS существует примерно 140 зафиксированных имен цветов. Один из них, самый популярный, наверное, это red. Также есть black, green и так далее. Названий очень много. И каждый имеет свой оттенок. Один из самых интересных – это transparent, который указывает, что цвет полностью прозрачный. Следующая цветовая модель называется CMYK. Эта модель является вычитающей, поскольку цвета в ней образуют путем вычитания из черного цвета базовых цветов: голубого, пурпурного и желтого. При смешении всех трех цветов получается черный цвет. Данная цветовая модель используется при печати. «А откуда тогда взялась буква K?» – вы спросите. На самом деле, при смешении всех трех цветов, у принтера получается не чисто черный цвет. Поэтому устанавливается отдельный картридж черного цвета. Именно отсюда и взялась буква K – от слова black. Следующая цветовая модель называется HSV (Hue, Saturation, Value). Компонент Hue означает цветовой тон, то есть оттенок цвета задается от 0 до 360. Saturation обозначает насыщенность. Чем больше этот параметр, тем более чище будет цвет, чем ниже, тем он больше будет к такому серому цвету. Value обозначает яркость цвета. Чем выше это значение, тем ярче будет цвет, чем ниже, тем он будет темнее. В значении 0 это будет черный цвет. Данная цветовая модель чаще всего используется в простой обработке изображений. Следующая цветовая модель – HSL (Hue, Saturation, Lightness). Первая компонента обозначает цветовой тон, по аналогии с HSV. Saturation обозначает насыщенность. Чем выше параметр, тем чище будет цвет. Lightness – это светлота цвета, но не нужно путать его со значением Value в цветовой модели HSV. Поскольку Lightness – это светлота, чем выше значение, тем оно ближе к белому. Также можно представить в виде цилиндра, но уже в верхней части будет располагаться белый цвет, внизу – черный, а где-то посередине будет тот самый насыщенный яркий цвет. Преимущества HSL перед RGB заключается в том, что он гораздо более понятен для человека. Кроме того, с помощью него легче создавать палитры подходящих цветов, сохраняя оттенок, и меняя только яркость и насыщенность. HSL также можно задавать в CSS при помощи функции hsl, у него есть три параметра: h, s и l соответственно. Первый параметр принимает значение от 0 до 360, а остальные два – от 0 до 100 %. Если мы посмотрим на код, то сходу даже непонятно, какие это цвета. Ну на самом деле первый – это белый; второй – красный текст, зеленый фон; и третий – черный текст и белый фон. По аналогии с функцией rgba существует функция hsla. Четвертым аргументом передается значение альфа-канала, задающее непрозрачность элемента. Ну вот, при наведении, фон стал полупрозрачным. И последняя цветовая модель называется LAB. Ее цветовой охват максимально близок к восприятию человеком с нормальным зрением. Она состоит из трех компонентов, где A и B – это один из компонентов цвета. L (Luminance) обозначает освещенность – это совокупность яркости и интенсивности цвета. Пространство цветовой модели LAB можно представить в виде сферы. Посередине получается самый чистый и яркий цвет. Но, к сожалению, этой цветовой модели нет в CSS. В этой лекции вы узнали про некоторые существующие цветовые модели. Некоторые из них есть в CSS, а некоторых нет. В следующей лекции я расскажу вам о таком формате изображения, как SVG.
