Этот курс продолжает обучение тех, кто уже познакомился с основами HTML и CSS. На очереди всякие изыски: отображение сложных элементов, изучение различий между браузерами и графика. В конечном итоге вы сможете сами сверстать страницу любой сложности. Авторы курса — разработчики из Яндекса.
Цветовые модели
Loading...
來自 Moscow Institute of Physics and Technology 的課程
Тонкости верстки
45 個評分
Moscow Institute of Physics and Technology
45 個評分
課程 3（共 5 門，Specialization Разработка интерфейсов: вёрстка и JavaScript）
從本節課中
Фотошоп и графика
Вы научитесь работать с изображениями и графикой. Узнаете о цветовых моделях, форматах изображений в вебе и как их оптимихировать. Итоговая практическая работа — сверстать с нуля макет.
與講師見面
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
Здравствуйте!
В этом видео я расскажу вам о некоторых существующих цветовых моделях.
Итак, цветовая модель – это математическая модель описания представления цветов в
виде набора чисел, обычно трех, реже четырех значений.
Также цветовую модель можно представить себе как пространство цветов.
И каждый цвет имеет свою координату.
Первая цветовая модель называется 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.
