Послание № 10
Цвет
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию (в спецификации CSS определены 140 имен цветов, из них 17 стандартных цветов плюс 123 доп.), в формате RGB, RGBA, HSL, HSLA.
По шестнадцатеричному значению
Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. (Цифры от 10 до 15 заменены латинскими буквами).
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например: #666999.
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
По названию
Браузеры поддерживают некоторые цвета по их названию. В таблице приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
| Названия цветов | |||||
| Имя | Цвет | Код | RGB | HSL | Описание |
| White | #ffffff или #fff | rgb(255,255,255) | hsl(0,0%,100%) | Белый | |
| Silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,75%) | Серый | |
| Gray | #808080 | rgb(128,128,128) | hsl(0,0%,50%) | Темно-серый | |
| Black | #000000 или #000 | rgb(0,0,0) | hsl(0,0%,0%) | Черный | |
| maroon | #800000 | rgb(128,0,0) | hsl(0,100%,25%) | Темно-красный | |
| Red | #ff0000 или #f00 | rgb(255,0,0) | hsl(0,100%,50%) | Красный | |
| Orange | #ffa500 | rgb(255,165,0) | hsl(38.8,100%,50%) | Оранжевый | |
| Yellow | #ffff00 или #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Желтый | |
| Olive | #808000 | rgb(128,128,0) | hsl(60,100%,25%) | Оливковый | |
| Lime | #00ff00 или #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Светло-зеленый | |
| Green | #008000 | rgb(0,128,0) | hsl(120,100%,25%) | Зеленый | |
| Aqua | #00ffff или #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Голубой | |
| Blue | #0000ff или #00f | rgb(0,0,255) | hsl(240,100%,50%) | Синий | |
| Navy | #000080 | rgb(0,0,128) | hsl(240,100%,25%) | Темно-синий |
С помощью RGB
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255.
Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
RGBA
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
HSL
Название формата HSL образовано от сочетания первых букв Hue, Saturate и Lightness.
Оттенок (Hue) — это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0 — соответствует красному цвету, 120 — зелёному, а 240 — синему. Значение оттенка может изменяться от 0 до 359.
Насыщенность (Saturate) — интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение.
| Рис. 1. Цветовой круг |
HSLA
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Градиенты
Градиент — вид заливки в компьютерной графике, которая по заданным параметрам цвета в ключевых точках рассчитывает промежуточные цвета остальных точек. При этом создаются плавные переходы из одного цвета в другой.
В WEB выделяют два вида градиентов:
1. Линейный градиент;
2. Радиальный градиент.
Линейный градиент
Линейный градиент создается с помощью двух и более цветов, для которых задано направление.
Если направление не указано, используется значение по умолчанию: сверху-вниз.
Форма записи:
background: linear-gradient (угол наклона / сторона или угол наклона с помощью ключевого слова, первый цвет, второй цвет и т.д.);
Цвета градиента по умолчанию распределяются равномерно в направлении, перпендикулярном линии градиента.
Направление градиента может быть задано двумя способами:
1. С помощью угла наклона в градусах deg, значение которого определяет угол наклона линии внутри элемента.
div {
height: 200px;
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
}
2. С помощью ключевых слов to top, to right, to bottom, to left, которые соответствуют углу градиента, равному 0deg, 90deg, 180deg и 270deg соответственно. Если направление задано парой ключевых слов, например, to top left, то начальная точка градиента будет расположена в противоположном направлении, в данном случае справа внизу.
div {
height: 200px;
background: linear-gradient(to top left, powderblue, pink);
}
Неравномерное распределение цвета
Для неравномерного распределения цветов, указывается начальная позиция каждого цвета через точки остановки градиента, так называемые color stops. Точки остановки задаются в %, где 0% — начальная точка, 100% — конечная точка, например:
div {
height: 200px;
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
}
Для чёткого распределения цветных полос каждый последующий цвет нужно начинать с точки остановки предыдущего цвета:
div {
height: 200px;
background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);
}
Радиальный градиент
Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.
Форма записи:
background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);
Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.
div {
height: 200px;
background: radial-gradient(white, #FFA9A1);
}
Позиция градиента
Позиция центра задаётся с помощью ключевых слов или единиц измерения, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.
div {
height: 200px;
background: radial-gradient(at top, #FEFFFF, #A7CECC);
}
Размер градиента
Размером эллипсообразного градиента можно управлять с помощью пары значений, указанных в единицах длины %, em или px. Первое значение задает ширину эллипса, второе — высоту.
div {
height: 200px;
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
}
С помощью ключевых слов задаем размер градиента. Значение по умолчанию farthest-corner (к дальнему углу).
| Значение | Описание |
| closest-side | Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по Удля ellipse. |
| farthest-side | Размер рассчитывается из расстояния до дальних сторон. |
| closest-corner | Размер рассчитывается из расстояния до ближних углов. |
| farthest-corner | Размер рассчитывается из расстояния до дальних углов. |
Повтор градиента
В добавление к линейному и радиальному градиентам существует повтор градиента, который задается с помощью функций repeating-linear-gradient() и repeating-radial-gradient() соответственно.
Фон из повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать следующий цвет с точки остановки предыдущего, создавая таким образом полосатые узоры.
div { /* Градиент расположенный слева */
height: 200px;
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}
div { /* Градиент расположенный справа */
height: 200px;
background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF 10px, #82DDFF 20px);
}
