Работа с цветами в CSS
Цвета играют важную роль для веб страниц, и при использовании CSS можно указать цвета разными способами. Наиболее простым способом является использование одного из предопределенных названий цветов или использование десятичного или шестнадцатеричного значения для каждого из красного, зеленого и синего компонентов. Десятичные значения разделены запятыми, а шестнадцатеричные значения, как правило, начинаются с #, например #ffffff, что обозначает белый цвет. Вы можете увидеть некоторые из предопределенных названий цветов и их десятичные и шестнадцатеричные эквиваленты в таблице 4-3.
Таблица 4-3: Выбранные CSS цвета
| Название цвета | Шестнадцатеричное значение | Десятичное значение |
| Черный | #000000 |
0,0,0 |
| Серебряный | #C0C0C0 |
192,192,192 |
| Серый | #808080 |
128,128,128 |
| Оливковый | #808000 |
128,128,0 |
| Белый | #FFFFFF |
255,255,255 |
| Желтый | #FFFF00 |
255,255,0 |
| Красно-коричневый | #800000 |
128,0,0 |
| Глубокий синий | #000080 |
0,0,128 |
| Красный | #FF0000 |
255,0,0 |
| Синий | #0000FF |
0,0,255 |
| Фиолетовый | #800080 |
128,0,128 |
| Темно-бирюзовый | #008080 |
0,128,128 |
| Темно-фиолетовый | #FF00FF |
255,0,255 |
| Морской волны | #00FFFF |
0,255,255 |
Эти цвета известны как основные, также CSS определяет дополнительные цвета. Существует слишком много названий цветов, чтобы их здесь перечислить, но полный список можно найти на www.w3.org/TR/css3-color. Есть много новых оттенков, определяющих дополнительные цвета, в том числе небольшие вариации для цветов основного списка. Например, в таблице 4-4 показан используемый расширенный набор оттенков серого цвета.
Таблица 4-4: Выбранные CSS цвета
| Название цвета | Шестнадцатеричное значение | Десятичное значение |
| темно-серый | #a9a9a9 |
169,169,169 |
| темно-синевато-серый | #2f4f4f |
47,79,79 |
| тускло-серый | #696969 |
105,105,105 |
| серый | #808080 |
128,128,128 |
| светло-серый | #d3d3d3 |
211,211,211 |
| светло-синевато-серый | #778899 |
119,136,153 |
| аспидно-серый (сине-серый) | #708090 |
112,128,144 |
Определение более сложных цветов
Названия цветов и простые шестнадцатеричные значения не являются единственным способом определения цвета. Есть целый ряд функций, которые позволяют вам выбрать цвет. В таблице 4-5 описана каждая из доступных функций.
Таблица 4-5: Функции для определения CSS цветов
| Функция | Описание | Пример |
rgb(r, g, b) |
Указывает цвет при помощи RGB модели. | color: rgb(112, 128, 144) |
rgba(r, g, b, a) |
Определяет цвет при помощи RGB модели с дополнительным альфа-значением для указания непрозрачности. Значение 0 обозначает полную прозрачность, а значение 1 – полную непрозрачность. | color: rgba(112, 128, 144, 0.4) |
hsl(h, s, l) |
Определяет цвет при помощи HSL (тон, насыщенность и светлота) модели. | color: hsl(120, 100%, 22%) |
hsla(h, s, l, a) |
То же самое, что и HSL, но с дополнительным альфа-значением для указания непрозрачности. | color: hsla(120, 100%, 22%, 0.4) |
