1 0 желто синий цвет. Коды цветов. Цветовая модель RGBA
Цвета широко используются в CSS для изменения цвета текста, цвет фона, градиентов, теней, границ и др. Есть несколько способов задать цвета в CSS, каждый со своими плюсами и минусами.
Свойство color определяет цвет текста . Это довольно просто. Что более важно - есть разные доступные типы единиц цвета.
Названия цветов
CSS предлагает 145 названий цветов , от самых простых (black, white, orange, yellow, blue и др.) до более специфичных (lawngreen, orchid, crimson и др.).
Body { color: black; } a { color: orange; }
Поскольку названия цветов трудно запомнить и вы, вероятно, хотите весьма конкретные цвета, названия цветов используется не часто.
rgb()
Компьютерные мониторы, телевизоры, мобильные телефоны, все они используют цветовую модель RGB для отображения цветов. В основном, каждый цвет определяется сочетанием красного, зелёного и синего. Есть 256 возможных значений для красного, зелёного или синего цвета. Поскольку компьютеры начинают считать с нуля, максимальное значение равно 255.
Принимая во внимание, что цвет является результатом сочетания красного, зелёного и синего, а также потому что у каждого из этих трёх цветов есть 256 возможных значений, существует 256 * 256 * 256 = 16777216 возможных цветов.
Поскольку модель RGB напрямую связана с тем, как цвета физически визуализируются, она стала единицей цвета в CSS.
Например, красный цвет на сайте Marksheet.io - это 219 красного, 78 зелёного и 68 синего:
A { color: rgb(219, 78, 68); }
Чёрный цвет получается, когда нет никакого количество красного, зелёного или синего цвета:
Body { color: rgb(0, 0, 0); }
С другой стороны спектра, белый - это полное количество каждого красного, зелёного и синего:
Body { color: rgb(255, 255, 255); }
rgba()
Единица цвета rgba() - это rgb() , к которому мы добавляем значение альфа (в диапазоне от 0 до 1 в десятичном значении), она определяет прозрачность цвета:
Body { color: rgba(0, 0, 0, 0.8); }
Слегка прозрачный чёрный цвет.
Задавать цвет прозрачным требуется для смешивания с фоном, в результате цвет будет выглядеть по разному в зависимости от контекста. Это особенно полезно для цвета фона .
hsl() и hsla()
HSL - это ещё один способ задать цвет. Думайте об этом как о цветовом круге .
Вместо комбинации красного, зелёного и синего цветов, вы указываете:
- оттенок - значение в диапазоне от 0 до 360; определяет, какой цвет вы хотите;
- насыщенность - в диапазоне от 0% до 100%; определяет, сколько этого цвета вы хотите;
- яркость - в диапазоне от 0% до 100%; определяет, насколько ярким вы желаете цвет.
Опять же, красный цвет на сайте Marksheet.io в hsl():
A { color: hsl(4, 68%, 56%); }
4 указывает на то, что это красный; 68% указывает что красный довольно заметный; 56% указывает половину между чёрным и белым.
Цвет в hsl() легче для понимания чем rgb() , потому что ожидаемый результат очевиднее. Вы в основном определяете цвет за три разных шага и можете играть с каждым значением для получения желаемого цвета. Если вы хотите жёлтый оттенок, то можете начать со значения hsl(50, 68%, 56%) и поменять значения насыщенности и яркости, чтобы найти конкретный оттенок, который вы ищете.
Я считаю, что hsl() более удобен для восприятия человеком, тогда как rgb() более ориентирован на компьютеры .
hsla() является таким же, что и hsl() , к которому добавляется значение альфа:
Body { color: hsla(4, 68%, 56%, 0.5); }
Полупрозрачный красный цвет.
Шестнадцатеричное
Цвета в CSS могут быть также определены через шестнадцатеричные значения , вроде #db4e44 .
Для понимания, что такое шестнадцатеричные значения, давайте посмотрим, как работают двоичные и десятичные:
| двоичные, 2 возможных значения | 0 | 1 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| десятичные, 10 возможных значений | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ||||||
| шестнадцатеричные, 16 возможных значений | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Принимаются во внимание цифры 0-9 и буквы A-F в виде символов .
Люди используют десятичную систему. У нас есть 10 символов для формирования чисел.
В шестнадцатеричной системе у нас есть 16 символов для формирования чисел. Поскольку 0-9 недостаточно, мы также используем A-F. И всё начинается с нуля. Итак:
- цифра 4 в шестнадцатеричной системе - это 4;
- число 12 в шестнадцатеричной системе - это C;
- число 16 в шестнадцатеричной системе - это 10, потому что после того как закончатся символы (последний из которых F), вы добавляете второй символ слева и повышаете на единицу (0 становится 1), а правая часть начинается снова (от F до 0).
Должен ли я помнить об этом?
Ни за что! Здесь я объяснил, как работают шестнадцатеричные значения. Самое главное, это помнить о том, что есть 16 шестнадцатеричных символов.
Подобно RGB, шестнадцатеричное значение цвета представляет собой сочетание красного, зелёного и синего, причём каждый из них представляют в шестнадцатеричном значении, например DB для красного, 4E для зелёного и 44 для синего.
Поскольку красный, зелёный или синий может содержать только два символа, их возможные значения 16 *16 = 256, что отражает цвет в RGB!
Почему бы тогда не использовать RGB?
Как правило, при выборе цвета вы не пишете его напрямую. Вы либо используете палитру цветов или копируете/вставляете его из Photoshop или выбираете
Использование встроенных значений цвета, определение пользовательских цветов и альфа-смешивание.
Описание
Функция для обозначения цвета Color - это простой способ получить доступ к цветам на языке CSS для HTML. Например, Color.Red возвращает красный цвет. Список доступных цветов приведен в конце статьи.
Функция ColorValue возвращает цвет на основе строки цвета CSS. Вы можете использовать двойные названия цветов CSS (например, "RosyBrown") и шестнадцатеричное значения (например, "#bc8f8f").
Функция RGBA возвращает цвета, основанные на компонентах красного, зеленого и синего цветов. Она также включает компонент "альфа" цвета, используемый для смешивания цветов объектов, наложенных друг на друга. Показатели "альфа" варьируются от 0 или 0 % до 1 или 100 %. При 0 % цвет является полностью прозрачным и невидимым. При 100 % он полностью непрозрачен и перекрывает нижние слои цветов.
Функция ColorFade позволяет сделать цвет более светлым или темным. Показатель прозрачности колеблется от -1, когда цвет становится полностью черным, до 0, когда цвет не изменяется, или же до 1, когда цвет становится белым.
Синтаксис
Color .ColorName
- *ColorName* - обязательный аргумент. Имя цвета на языке CSS. Ниже приведен список возможных значений.
ColorValue (CSSColor )
- *CSSColor* - обязательный аргумент. Определение цвета на языке CSS. Вы можете использовать двойные названия цветов CSS (например, "OliveDrab") и шестнадцатеричные значения (например, "#6b8e23").
RGBA (Red , Green , Blue , Alpha )
- Red , Green , *Blue* - обязательны. Значения компонентов цветов варьируются от 0 (насыщенность отсутствует) до 255 (полная насыщенность).
- *Alpha* - обязательный компонент. Альфа-компонент варьируется от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Вы также можете использовать проценты: от 0 % до 100 %.
ColorFade (Color , FadeAmount )
- *Color* - обязательный аргумент. Значение цвета (например, Color.Red ) или выходное значение ColorValue или RGBA .
- *FadeAmount* - обязательный аргумент. Значение варьируется от -1 до 1. При значении -1 цвет становится полностью черным. При значении 0 - изменения цвета не наблюдается, а при значении 1 цвет становится белым.
Встроенные цвета
| Обозначение цвета | ColorValue и шестнадцатеричный код | RGBA | Палитры цветов |
| Color.AliceBlue | ColorValue("#f0f8ff") | RGBA(240, 248, 255, 1) | |
| Color.AntiqueWhite | ColorValue("#faebd7") | RGBA(7, "250, 235,215, 1) |  |
| Color.Aqua | ColorValue("#00ffff") | RGBA(0, 255, 255, 1) |  |
| Color.Aquamarine | ColorValue("#7fffd4") | RGBA(127, 255, 212, 1) |  |
| Color.Azure | ColorValue("#f0ffff") | RGBA(240, 255, 255, 1) |  |
| Color.Beige | ColorValue("#f5f5dc") | RGBA(245, 245, 220, 1) |  |
| Color.Bisque | ColorValue("#ffe4c4") | RGBA(255, 228, 196, 1) |  |
| Color.Black | ColorValue("#000000") | RGBA(0, 0, 0, 1) |  |
| Color.BlanchedAlmond | ColorValue("#ffebcd") | RGBA(255, 235, 205, 1) |  |
| Color.Blue | ColorValue("#0000ff") | RGBA(0, 0, 255, 1) |  |
| Color.BlueViolet | ColorValue("#8a2be2") | RGBA(138, 43, 226, 1) |  |
| Color.Brown | ColorValue("#a52a2a") | RGBA(165, 42, 42, 1) |  |
| Color.Burlywood | ColorValue("#deb887") | RGBA(222, 184, 135, 1) | |
| Color.CadetBlue | ColorValue("#5f9ea0") | RGBA(95, 158, 160, 1) |  |
| Color.Chartreuse | ColorValue("#7fff00") | RGBA(127, 255, 0, 1) |  |
| Color.Chocolate | ColorValue("#d2691e") | RGBA(210, 105, 30, 1) |  |
| Color.Coral | ColorValue("#ff7f50") | RGBA(255, 127, 80, 1) |  |
| Color.CornflowerBlue | ColorValue("#6495ed") | RGBA(100, 149, 237, 1) |  |
| Color.Cornsilk | ColorValue("#fff8dc") | RGBA(255, 248, 220, 1) |  |
| Color.Crimson | ColorValue("#dc143c") | RGBA(220, 20, 60, 1) |  |
| Color.Cyan | ColorValue("#00ffff") | RGBA(0, 255, 255, 1) | |
| Color.DarkBlue | ColorValue("#00008b") | RGBA(0, 0, 139, 1) |  |
| Color.DarkCyan | ColorValue("#008b8b") | RGBA(0, 139, 139, 1) |  |
| Color.DarkGoldenRod | ColorValue("#b8860b") | RGBA(184, 134, 11, 1) |  |
| Color.DarkGray | ColorValue("#a9a9a9") | RGBA(169, 169, 169, 1) |  |
| Color.DarkGreen | ColorValue("#006400") | RGBA(0, 100, 0, 1) |  |
| Color.DarkGrey | ColorValue("#a9a9a9") | RGBA(169, 169, 169, 1) | |
| Color.DarkKhaki | ColorValue("#bdb76b") | RGBA(189, 183, 107, 1) |  |
| Color.DarkMagenta | ColorValue("#8b008b") | RGBA(139, 0, 139, 1) |  |
| Color.DarkOliveGreen | ColorValue("#556b2f") | RGBA(85, 107, 47, 1) |  |
| Color.DarkOrange | ColorValue("#ff8c00") | RGBA(255, 140, 0, 1) |  |
| Color.DarkOrchid | ColorValue("#9932cc") | RGBA(153, 50, 204, 1) |  |
| Color.DarkRed | ColorValue("#8b0000") | RGBA(139, 0, 0, 1) |  |
| Color.DarkSalmon | ColorValue("#e9967a") | RGBA(233, 150, 122, 1) |  |
| Color.DarkSeaGreen | ColorValue("#8fbc8f") | RGBA(143, 188, 143, 1) |  |
| Color.DarkSlateBlue | ColorValue("#483d8b") | RGBA(72, 61, 139, 1) |  |
| Color.DarkSlateGray | ColorValue("#2f4f4f") | RGBA(47, 79, 79, 1) |  |
| Color.DarkSlateGrey | ColorValue("#2f4f4f") | RGBA(47, 79, 79, 1) | |
| Color.DarkTurquoise | ColorValue("#00ced1") | RGBA(0, 206, 209, 1) |  |
| Color.DarkViolet | ColorValue("#9400d3") | RGBA(148, 0, 211, 1) |  |
| Color.DeepPink | ColorValue("#ff1493") | RGBA(255, 20, 147, 1) |  |
| Color.DeepSkyBlue | ColorValue("#00bfff") | RGBA(0, 191, 255, 1) |  |
| Color.DimGray | ColorValue("#696969") | RGBA(105, 105, 105, 1) |  |
| Color.DimGrey | ColorValue("#696969") | RGBA(105, 105, 105, 1) | |
| Color.DodgerBlue | ColorValue("#1e90ff") | RGBA(30, 144, 255, 1) |  |
| Color.FireBrick | ColorValue("#b22222") | RGBA(178, 34, 34, 1) |  |
| Color.FloralWhite | ColorValue("#fffaf0") | RGBA(255, 250, 240, 1) |  |
| Color.ForestGreen | ColorValue("#228b22") | RGBA(34, 139, 34, 1) |  |
| Color.Fuchsia | ColorValue("#ff00ff") | RGBA(255, 0, 255, 1) |  |
| Color.Gainsboro | ColorValue("#dcdcdc") | RGBA(220, 220, 220, 1) |  |
| Color.GhostWhite | ColorValue("#f8f8ff") | RGBA(248, 248, 255, 1) |  |
| Color.Gold | ColorValue("#ffd700") | RGBA(255, 215, 0, 1) |  |
| Color.GoldenRod | ColorValue("#daa520") | RGBA(218, 165, 32, 1) |  |
| Color.Gray | ColorValue("#808080") | RGBA(128, 128, 128, 1) |  |
| Color.Green | ColorValue("#008000") | RGBA(0, 128, 0, 1) |  |
| Color.GreenYellow | ColorValue("#adff2f") | RGBA(173, 255, 47, 1) |  |
| Color.Grey | ColorValue("#808080") | RGBA(128, 128, 128, 1) | |
| Color.Honeydew | ColorValue("#f0fff0") | RGBA(240, 255, 240, 1) |  |
| Color.HotPink | ColorValue("#ff69b4") | RGBA(255, 105, 180, 1) |  |
| Color.IndianRed | ColorValue("#cd5c5c") | RGBA(205, 92, 92, 1) |  |
| Color.Indigo | ColorValue("#4b0082") | RGBA(75, 0, 130, 1) |  |
| Color.Ivory | ColorValue("#fffff0") | RGBA(255, 255, 240, 1) |  |
| Color.Khaki | ColorValue("#f0e68c") | RGBA(240, 230, 140, 1) |  |
| Color.Lavender | ColorValue("#e6e6fa") | RGBA(230, 230, 250, 1) |  |
| Color.LavenderBlush | ColorValue("#fff0f5") | RGBA(255, 240, 245, 1) |  |
| Color.LawnGreen | ColorValue("#7cfc00") | RGBA(124, 252, 0, 1) |  |
| Color.LemonChiffon | ColorValue("#fffacd") | RGBA(255, 250, 205, 1) |  |
| Color.LightBlue | ColorValue("#add8e6") | RGBA(173, 216, 230, 1) |  |
| Color.LightCoral | ColorValue("#f08080") | RGBA(240, 128, 128, 1) |  |
| Color.LightCyan | ColorValue("#e0ffff") | RGBA(224, 255, 255, 1) |  |
| Color.LightGoldenRodYellow | ColorValue("#fafad2") | RGBA(250, 250, 210, 1) |  |
| Color.LightGray | ColorValue("#d3d3d3") | RGBA(211, 211, 211, 1) |  |
| Color.LightGreen | ColorValue("#90ee90") | RGBA(144, 238, 144, 1) |  |
| Color.LightGrey | ColorValue("#d3d3d3") | RGBA(211, 211, 211, 1) | |
| Color.LightPink | ColorValue("#ffb6c1") | RGBA(255, 182, 193, 1) |  |
| Color.LightSalmon | ColorValue("#ffa07a") | RGBA(255, 160, 122, 1) | |
| Color.LightSeaGreen | ColorValue("#20b2aa") | RGBA(32, 178, 170, 1) | |
| Color.LightSkyBlue | ColorValue("#87cefa") | RGBA(135, 206, 250, 1) |  |
| Color.LightSlateGray | ColorValue("#778899") | RGBA(119, 136, 153, 1) | |
| Color.LightSlateGrey | ColorValue("#778899") | RGBA(119, 136, 153, 1) |  |
| Color.LightSteelBlue | ColorValue("#b0c4de") | RGBA(176, 196, 222, 1) |  |
| Color.LightYellow | ColorValue("#ffffe0") | RGBA(255, 255, 224, 1) |  |
| Color.Lime | ColorValue("#00ff00") | RGBA(0, 255, 0, 1) |  |
| Color.LimeGreen | ColorValue("#32cd32") | RGBA(50, 205, 50, 1) |  |
| Color.Linen | ColorValue("#faf0e6") | RGBA(250, 240, 230, 1) |  |
| Color.Magenta | ColorValue("#ff00ff") | RGBA(255, 0, 255, 1) | |
| Color.Maroon | ColorValue("#800000") | RGBA(128, 0, 0, 1) | |
| Color.MediumAquamarine | ColorValue("#66cdaa") | RGBA(102, 205, 170, 1) |  |
| Color.MediumBlue | ColorValue("#0000cd") | RGBA(0, 0, 205, 1) |  |
| Color.MediumOrchid | ColorValue("#ba55d3") | RGBA(186, 85, 211, 1) |  |
| Color.MediumPurple | ColorValue("#9370db") | RGBA(147, 112, 219, 1) |  |
| Color.MediumSeaGreen | ColorValue("#3cb371") | RGBA(60, 179, 113, 1) |  |
| Color.MediumSlateBlue | ColorValue("#7b68ee") | RGBA(123, 104, 238, 1) |  |
| Color.MediumSpringGreen | ColorValue("#00fa9a") | RGBA(0, 250, 154, 1) |  |
| Color.MediumTurquoise | ColorValue("#48d1cc") | RGBA(72, 209, 204, 1) |  |
| Color.MediumVioletRed | ColorValue("#c71585") | RGBA(199, 21, 133, 1) |  |
| Color.MidnightBlue | ColorValue("#191970") | RGBA(25, 25, 112, 1) |  |
| Color.MintCream | ColorValue("#f5fffa") | RGBA(245, 255, 250, 1) |  |
| Color.MistyRose | ColorValue("#ffe4e1") | RGBA(255, 228, 225, 1) |  |
| Color.Moccasin | ColorValue("#ffe4b5") | RGBA(255, 228, 181, 1) |  |
| Color.NavajoWhite | ColorValue("#ffdead") | RGBA(255, 222, 173, 1) |  |
| Color.Navy | ColorValue("#000080") | RGBA(0, 0, 128, 1) |  |
| Color.OldLace | ColorValue("#fdf5e6") | RGBA(253, 245, 230, 1) |  |
| Color.Olive | ColorValue("#808000") | RGBA(128, 128, 0, 1) |  |
| Color.OliveDrab | ColorValue("#6b8e23") | RGBA(107, 142, 35, 1) |  |
| Color.Orange | ColorValue("#ffa500") | RGBA(255, 165, 0, 1) | |
| Color.OrangeRed | ColorValue("#ff4500") | RGBA(255, 69, 0, 1) |  |
| Color.Orchid | ColorValue("#da70d6") | RGBA(218, 112, 214, 1) |  |
| Color.PaleGoldenRod | ColorValue("#eee8aa") | RGBA(238, 232, 170, 1) |  |
| Color.PaleGreen | ColorValue("#98fb98") | RGBA(152, 251, 152, 1) |  |
| Color.PaleTurquoise | ColorValue("#afeeee") | RGBA(175, 238, 238, 1) |
Ранее в ходе обучения HTML и CSS 2.1 мы с Вами уяснили что цвет того или иного элемента сайта может быть определён следующими способами:
- Именным значением, например: red - красный.
- Значением цвета RGB , например: RGB(255,0,0) - опять таки красный.
- Шестнадцатеричным значением цвета RGB , например: #ff0000 - всё тот же красный.
Об этих методах определения цвета я писал в главе " " учебника CSS поэтому повторятся не стану а расскажу о ещё одном способе определения цвета, который предлагает спецификация CSS 3.
HSL
В CSS 3 вошёл ещё один способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). - это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:
Оттенок.
Для того чтобы определить тон (H ue) нужно указать градус поворота (от 0° до 360°) цветового спектра замкнутого в цветовой круг - во сказанул!!)) В общем, смотрите на рисунок там наглядно показано откуда берётся этот угол.. Имеется, значит, радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам (ну и 360° тоже), 120 градусов это зелёный, 240° синий - это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый.. Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.
Насыщенность.
Второе значение (S aturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и "сочно" и наоборот если насыщенность стремится к 0% то цвет "линяет" и становится серым.
Светлота.
Светлота или яркость (L ightness) это третий параметр HSL . Точно так же как и насыщенность указывается в процентах.. чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.
Такая вот теория.. теперь к практике..
Как обычно покажу на примере:
Альфа каналы.
RGBA
На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.
Так у уже знакомого нам способа определения цвета RGB (Red, Green, Blue) появляется четвёртое значение RGBA (Red, Green, Blue, Alpha) это и есть пресловутый альфа канал который определяет степень прозрачности. Степень прозрачности, точно так же как и для свойства opacity определяется значением от 0 до 1 где 0 полностью прозрачный а 1 непрозрачный вовсе.
HSLA
Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA , поэтому повторятся, не буду просто покажу пример:
Считается, что преимуществом цветовой схемы HSL перед RGB являются более природные естественные цвета так как формат RGB был создан специально для электроннолучевых трубок.. ну не знаю.. во первых лично у меня не столь придирчивый глаз, а во вторых какая разница ведь всё равно в итоге цвет на странице будет показан с помощью электроннолучевой трубки - ну или её аналога!? то есть в определённом сочетании красного, зелёного и синего цвета т.е. по сути цвет HSL будет в итоге переконвертирован в RGB .
А вот что мне нравится в HSL так это то, что цвет заданный таким способом интуитивно понятен, то есть, взглянув на цифры, допустим hsl(60,100%,50%) можно сразу же представить каким приблизительно в итоге будет цвет достаточно просто держать в голове цветовой круг (радугу) и знать теорию, о которой мы говорили выше. А вот с RGB цветом ничего, как правило, непонятно до тех пор, пока в фотошопе или ещё где-нибудь не посмотришь на цифры сочетания красного, зелёного и синего.
Форматы HSL , HSLA и RGBA воспринимают версии браузеров начиная с: IE 9.0, Opera 10.0 Firefox 3.0 … А как быть со старыми версиями браузеров решать уже Вам. Однако хочу отметить, что одному и тому же элементу цвет можно задать несколькими способами.
Ну например:
Blok {
background-color:rgb(255,0,0)
background-color:rgba(255,0,0,0.5)
}
При таком раскладе цвет в старых браузерах хоть и не будет полупрозрачным, но зато будет правильным.. конкретно в этом случае красным.
В первой части книги, в некоторых примерах мы уже демонстрировали, как установить цвет текста в CSS. Здесь нет ничего сложного: вам понадобится свойство color и значение того цвета, которым вы желаете окрасить текст.
P { color: #211C18; }
В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.
Шестнадцатеричные цвета (hex)
Шестнадцатеричная система счисления (hexadecimal, hex ) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.
Сокращенная запись hex-цветов
Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.
Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.
Примеры сокращенной записи hex-цветов:
| HEX-код | Сокращенная запись |
|---|---|
| #FFDD66 | #FD6 |
| #8833FF | #83F |
| #333333 | #333 |
| #cccccc | #ccc |
Цветовая модель RGB
Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:
P { color: rgb(0, 255, 0); }
А вот желтовато-горчичный оттенок имеет такое значение:
Color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;
Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:
Color: rgb(100%, 100%, 100%);
Где искать значения цветов
Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC .
Цветовая модель RGBA
Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:
P { color: rgba(94, 81, 3, .9); }
Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:
P { color: rgb(94, 81, 3); color: rgba(94, 81, 3, .9); }
Первое свойство в примере предназначено для браузера IE8, который отобразит текст нужным цветом, но без прозрачности. А те браузеры, которые понимают RGBA, применят к элементу второе свойство, с прозрачностью.
Цветовые модели HSL (HSLA)
Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:
P { color: hsl(165, 100%, 50%); }
Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:
Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.
Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:
P { color: hsla(165, 100%, 50%, .6); }
HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.
Стандартные цвета HTML
Еще один способ представления цветов в веб – это ключевые слова, при помощи которых можно указать цвет для элемента. Пример:
P { color: black; }
Существует 16 стандартных цветов, которые можно записать в значении свойства color:
| Ключевое слово цвета | HEX-код | RGB |
|---|---|---|
| red | #FF0000 | 255, 0, 0 |
| maroon | #800000 | 128, 0, 0 |
| yellow | #FFFF00 | 255, 255, 0 |
| olive | #808000 | 128, 128, 0 |
| lime | #00FF00 | 0, 255, 0 |
| green | #008000 | 0, 128, 0 |
| aqua | #00FFFF | 0, 255, 255 |
| teal | #008080 | 0, 128, 128 |
| blue | #0000FF | 0, 0, 255 |
| navy | #000080 | 0, 0, 128 |
| fuchsia | #FF00FF | 255, 0, 255 |
| purple | #800080 | 128, 0, 128 |
| white | #FFFFFF | 255, 255, 255 |
| silver | #C0C0C0 | 192, 192, 192 |
| gray | #808080 | 128, 128, 128 |
| black | #000000 | 0, 0, 0 |
Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C .
Использование таких ключевых слов допустимо, но есть риск, что какое-нибудь слово не воспримется браузером. Поэтому рекомендуется вместо ключевых слов записывать шестнадцатеричный код цвета.
Итоги
В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.
Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.
Для того, чтобы разрабатывать максимально унифицированные less-файлы, нужно автоматизировать свой код. Например, если ваше веб-приложение поддерживает темы, которые, как ни странно, могут менять свой цвет. В этом случае необходимо максимально возможно автоматизировать получение оттенков основного цвета темы. И это только самый базовый пример того, где могут понадобиться манипуляции с цветом.
Препроцессор Less предоставляет широкий спектр функций, позволяющих работать с цветами настолько тесно, насколько это вообще возможно.
Функции определения цвета
При определении цветов Less заменяет некоторые стандартные объявления, принятые в CSS. Так, например, работает функция rgb() , возвращающая вместо традиционной записи цвет в формате HEX.
Если функции rgb() и rgba() в особых комментариях не нуждаются, то прочие требуют к себе особого внимания и понимания. Однако, сначала посмотрим на синтаксис для первых двух:
Rgb(red, green, blue) rgba(red, green, blue, alpha)
Параметры функции полностью совместимы с синтаксисом, принятым в CSS. Разница лишь в том, что функция rgb() преобразует RGB-формат записи цвета в HEX-формат. Также можно использовать не только стандартные значения из диапазона 0..255, но и процентную запись (0..100%).
Замечание
Функция rgba() не производит никаких манипуляций, так как HEX-формат не поддерживает альфа-канал, задающий прозрачность.
Еще одним представителем семейства RGB является функция argb() , которая преобразует RGB-формат записи цвета в модифицированный HEX-формат, используемый в браузерах Internet Explorer и некоторых платформах (.NET, Android). Эта функция принимает на вход цвет в формате RGBA:
Argb(rgba(red, green, blue, alpha))
Важно отметить, что после компиляции HEX-код цвета имеет формат #AARRGGBB , а не привычный для нас #RRGGBBAA .
Семейство HSL
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Синтаксис функции имеет вид:
Hsl(hue, saturation, lightness)
Оттенок задаётся с помощью градусной меры и может иметь значение от 0 до 359. Эти значения соответствуют градусам на цветовом круге.
Второе и третье числа в скобках означают насыщенность и светлоту соответственно и задаётся в процентах. Чем ниже значение насыщенности, тем более приглушённым становится цвет. Значение saturation , равное нулю, приведёт к серому цвету, при этом неважно, какое значение имеет hue . Третье значение позволяет указать яркость цвета. Чем значение ниже, тем более тёмный получается оттенок цвета, чем выше, тем светлее. При значении 100% у lightness получается белый цвет, соответственно, если 0% – чёрный.
HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer ниже 8 версии. Однако, нам не нужно заботиться о поддержке браузерами, так как препроцессор Less преобразует запись функций hsl() и hsla() , соответственно в HEX и RGBA форматы.
Hsl(60, 100%, 50%) // #ffff00 hsla(60, 100%, 50%, .5) // rgba(255, 255, 0, 0.5)
Замечание
Помимо процентного определения значения насыщенности и светлоты можно использовать значение в диапазоне от 0 до 1.
Семейство HSV (HSB)
Аббревиатура HSV расшифровывается как: Hue (тон), Saturation (насыщенность), Value (значение). Иногда эту модель называют HSB, где последняя буква означает Brightness (яркость). Следует отметить, что HSV и HSL — две разные цветовые модели (Lightness — светлота, что отличается от яркости, которую задаёт параметр value).
Синтаксис данных функций имеет вид:
Hsv(hue, saturation, value) hsva(hue, saturation, value, alpha)
Также как и в случае с HSL препроцессор преобразует получаемые значения в hex и RGBA:
Hsv(60, 100%, 50%) // #808000 hsva(60, 100%, 50%, .5) // rgba(128, 128, 0, 0.3)
Замечание
Помимо процентного определения значения насыщенности и яркости можно использовать значение в диапазоне от 0 до 1.
Функции цветового канала
Как уже отмечалось выше, в Less используются функции для работы с форматами RGB, HSL и HSV, а также их аналогами с возможностью указания альфа-канала, задающего прозрачность. Чтобы получить значения каналов этих форматов, можно использовать встроенные функции.
- red()
- green()
- blue()
- hue()
- saturation()
- lightness()
- hsvhue()
- hsvsaturation()
- hsvvalue()
Общие функции для RGB, HSL и HSV:
- aplha()
- luma()
- luminance()
Функции luma() и luminance() вычисляют, соответственно, яркость (яркость по восприятию или свечение) и яркость по восприятию (свечение) без коррекции гаммы.
Замечание
Функция liminance() устарела и, начиная с версии 1.7.0, функция luma() вычисляет яркость по восприятию без коррекции гаммы.
Функции операций с цветами
В Less встроены функции для операций с цветами, основанные на работе с каналами. Все представленные функции работают с форматом HSL, и перед вычислением, если используется формат HEX, происходит его преобразование в HSL.
Манипулирование насыщенностью цвета (Saturate и Desaturate)
Функция saturate() позволяет увеличить насыщенность цвета, заданного в формате HSL. Так, например, чтобы увеличить насыщенность цвета, параметры которого имеют значения 60, 40%, 50% на 20%, нужно:
@hsl: hsl(60 , 40% , 50% ) // #b2b34d saturate(@hsl , 20% ) // #cccc33Функция desaturate() является обратной функцией saturate() и уменьшает значение насыщенности цвета. Например, вручную увеличим насыщенность цвета, который использовался ранее и проверим работу функции saturate() :
@hsl: hsl(60 , 60% , 50% ) // #cccc33 desaturate(@hsl , 20% ) // #b3b34cОбратите внимание на то, что значение полученное в ходе выполнения функции desaturate() отличается от того, что было задано в первом примере.
Осветление и затемнение цвета (Lighten и Darken)
Функция lighten() (осветление) увеличивает значение параметра светлоты (Lightness) на указанное значение, тогда как функция darken() , обратная ей, уменьшает его.
Это две самые часто используемые функции, которые позволяют быстро получить цвета, например, для активного состояния пунктов меню или других элементов.
Работа с прозрачностью (Fade, Fadein, Fadeout)
Функция fade() устанавливает значение альфа-канала, задающего прозрачность, в формате HSL, тем самым преобразуя формат из HSL в HSLA.
Соответственно, функция fadein() увеличивает значение альфа-канала, а функция fadeout() , обратная ей, уменьшает его.
Управление тоном (Spin)
Эта функция, в отличие от предыдущих, не имеет пары и на её использование накладываются некоторые ограничения.
Функция spin() позволяет задавать значение, на которое отклоняется угол тона (Hue) на цветовом круге. На вход, как и другие функции, она принимает цвет в удобном для вас формате и положительное или отрицательное значение, на которое будет отклоняться угол тона. Например, если значение угла тона соответствует 245 и передать в функцию значение -45, то новое значение будет 200:
Spin(hsl(245, 50%, 50%), -45) // #4095bf hsl(200, 50%, 50%) // #4095bf
Обратите внимание, что если вы передаёте в функцию spin() значение в формате RGB, то оно преобразуется в формат HSL и не сохраняет оттенок серого, так как оттенок не имеет смысла, если нет никакого насыщения.
Таким образом, если в функцию передать оттенок серого, то результат будет равен исходному, за исключением того, что Less может преобразовать короткую запись цвета в полную:
Spin(#ccc, 40%) // #cccccc spin(#aaaaaa, 10%) // #aaaaaa
Смешивание цветов в пропорциях (Mix)
Функция позволяет смешивать цвета в заданной пропорции, при этом учитывая значения альфа-канала. Попытаемся смешать два белых цвета с указанной прозрачностью и пропорциями:
Mix(rgba(255, 255, 255, 1), rgba(255, 255, 255, .5), 50%) // rgba(255, 255, 255, 0.75) mix(rgba(255, 255, 255, .8), rgba(255, 255, 255, .2), 60%) // rgba(255, 255, 255, 0.56)
Если не углубляться в вычисление значений красного, зелёного и синего, то показать правильность работы этой функции можно на основе расчёта значения прозрачности:
1 * 50 / 100 + 0.5 * (1 - 50 / 100) // 0.75 0.8 * 60 / 100 + 0.2 * (1 - 60 / 100) // 0.56
Обесцвечивание цвета (Grayscale)
Функция grayscale() позволяет обесцветить цвет, что соответствует удалению его насыщенности. По сути своей, представляет собой обёртку над функцией desaturate() .
Нахождение контрастного цвета (Contrast)
Функция contrast() находит цвет, контрастный на фоне другого. Позволяет автоматизировать подбор контрастного цвета, в зависимости от цвета на входе. Так, например, контрастный цвет для белого — чёрный:
Contrast(#fff) // #000
Функция принимает на вход до четырёх параметров:
- color — основной цвет для сравнения
- dark — тёмный цвет (опционально, изначально чёрный).
- ligth — светлый цвет (опционально, изначально белый).
- threshold — порог, позволяющий задать преобладание тёмного или светлого цвета при определении контрастного цвета (опционально, изначально 43%).
Посмотрим на работу порогового значения на примере:
Contrast(green, black, white, 30%) // #000 contrast(green, black, white, 43%) // #fff contrast(green, black, white, 80%) // #fff
Функции смешивания цветов
При необходимости цвета можно смешивать, используя встроенные в препроцессор функции. По принципу работы они похожи на аналоги в графическом пакете Adobe Photoshop или любом другом, имеющем этот функционал. Для вычислений используются цвета в формате RGB, поэтому, перед тем как начать работу, происходит автоматические преобразование любых других форматов в формат RGB.
Режим наложения цветов (Multiply и Screen)
Функция Multiply (Умножение) накладывает один цвет на другой. При этом происходит перемножение значений каналов RGB. В результате цвет становится темнее.
Функция Screen (Экран) является противоположной для первой функции и при вычислениях использует инвертированные значения каналов RGB. Эта функция осветляет цвет.
Управление контрастностью (Overlay, Soft light и Hard light)
Все эти функции входят в группу функций контрастности, которые увеличивают контрастность цвета.
Функция Overlay (Перекрытие) основана на работе функций Multiply и Screen , которые были рассмотрены ранее. Эта функция равномерно смешивает два цвета и делает их светлее или темнее, в зависимости от определяющего цвета, передаваемого как первый параметр.
Функция Soft light (Мягкий свет) делает результирующий цвет более тёмным или светлым в зависимости от совмещенного цвета. Если вносимый цвет (второй параметр) светлее 50-процентного серого, исходный цвет становится светлее. Иначе, если вносимый цвет темнее 50-процентного серого, исходный цвет затемняется.
Функция Hard light (Жёсткий свет) работает так же, как и функция Overlay . Разница лишь в том, что передаваемые параметры меняются местами при вызове функции Overlay .
Функции разницы и исключения (Difference и Exlusion)
Функция Difference (Разница) вычисляет математический модуль между двумя цветами, что соответствует вычитанию одного цвета из другого. Смешивание с белым цветом приводит к инвертированию значений основного цвета, смешивание с чёрным цветом не влечёт за собой каких-либо изменений и возвращает исходный цвет.
Функция Exlusion (Исключение) аналогична работе функции Difference , но применяется для цветов с низкой контрастностью.
Функция среднего и отрицания (Average и Negation)
Все предыдущие функции смешивания цветов основывались на рекомендациях консорциума всемирной сети (W3C). Функции Average и Negation были разработаны для удобства создателями препроцессора.
Функция Average (Среднее) находит среднее между двумя цветами. Работа этой функции основана на принципах школьной математики, где слагаемыми выступают числа. Так как мы работаем с RGB-форматом, то здесь происходит нахождение среднего для каждого канала между двумя цветами.
Функция Negation (Отрицания) основана на работе функции Difference с той лишь разницей, что результат вычитается из 1. В результате получается цвет, который ярче исходного.
Выводы и мысли
Если сайт имеет различные цветовые палитры для тем, то возможно автоматически манипулировать цветами. При этом, если изменить одну единственную переменную, в которой указан основной цвет темы, может полностью смениться палитра сайта, причём без ручного изменения значения цвета у каждой переменной. Удобный и логичный функционал, но на деле он используется крайне редко, так как быстрее и проще определить цвет по предоставленному дизайнером изображению, нежели чем строить конструкции из функций для манипуляции цветом.