- Цвет
- По шестнадцатеричному значению
- По названию
- С помощью RGB
- RGBA
- HSL
- HSLA
- Черные цвета и оттенки
- HTML Цвета
- Пример: задание цвета по его названию
- Заголовок на красном фоне
- Заголовок на оранжевом фоне
- Заголовок на фоне лайм
- Белый текст на синем фоне
- Задание цвета с помощью RGB
- Пример: Задание цвета с помощью RGB
- rgb(127, 255, 127)
- rgb(50%, 100%, 50%)
- Задание цвета по шестнадцатеричному значению
- Пример: Цвет HEX
- красный: #FF0000
- зеленый: #00FF00
- синий: #0000FF
- красный+зеленый=желтый: #FFFF00
- красный+синий=фиолетовый: #FF00FF
- зеленый+синий=голубой: #00FFFF
- Задачи
- Задание цвета по его названию
- Задача HTML:
Цвет
Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.
По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
По названию
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате 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%) | Темно-синий | |
teal | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Сине-зеленый | |
fuchsia | #ff00ff или #f0f | rgb(255,0,255) | hsl(300,100%,50%) | Розовый | |
purple | #800080 | rgb(128,0,128) | hsl(300,100%,25%) | Фиолетовый |
С помощью RGB
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb , а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
RGBA
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
HSL
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
HSLA
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
body < background-color: #F9F2E3; >h2 < background-color: rgb(214,86,43); color: rgba(255,255,255,.9); padding: 10px; >p < color: green; >div Предупреждение
Все перечисленные на сайте методы ловли льва являются теоретическими и базируются на вычислительных методах. Авторы не гарантируют вашей безопасности при их использовании и снимают с себя всякую ответственность за результат. Помните, лев это хищник и опасное животное!
Арррргх!
Результат данного примера показан на рис. 2.
Рис. 2. Цвета на веб-странице
Черные цвета и оттенки
Здесь представлены разновидности черных и очень темных цветов и оттенков, список интересных, необычных тонов и их названий, а также коды HEX и RGB. На каждый цвет можно перейти по ссылке и скачать его.
- Графитно-черный
HEX: #1C1C1C, RGB: 28,28,28 - Зеленовато-черный
HEX: #181513, RGB: 24,21,19 - Коричневато-черный
HEX: #140F0B, RGB: 20,15,11 - Красновато-черный
HEX: #1E1112, RGB: 30,17,18 - Оливково-черный
HEX: #121910, RGB: 18,25,16 - Очень темно-пурпурный
HEX: #230D21, RGB: 35,13,33 - Очень темный зеленовато-синий
HEX: #022027, RGB: 2,32,39 - Очень темный зеленый
HEX: #16251C, RGB: 22,37,28 - Очень темный красно-пурпурный
HEX: #270A1F, RGB: 39,10,31 - Очень темный красный
HEX: #320A18, RGB: 50,10,24 - Почти черный
HEX: #131313, RGB: 19,19,19 - Пурпурно-черный
HEX: #1B1116, RGB: 27,17,22 - Сапфирово-синий
HEX: #1D1E33, RGB: 29,30,51 - Сигнальный черный
HEX: #282828, RGB: 40,40,40 - Синевато-черный
HEX: #151719, RGB: 21,23,25 - Темно-синий
HEX: #002137, RGB: 0,33,55
- Темный коричневый
HEX: #35170C, RGB: 53,23,12 - Темный красно-коричневый
HEX: #321011, RGB: 50,16,17 - Темный оливково-зеленый
HEX: #232C16, RGB: 35,44,22 - Темный оливково-коричневый
HEX: #302112, RGB: 48,33,18 - Темный пурпурно-синий
HEX: #1A162A, RGB: 26,22,42 - Темный серо-коричневый
HEX: #32221A, RGB: 50,34,26 - Темный синевато-черный
HEX: #464544, RGB: 70,69,68 - Темный черновато-пурпурный
HEX: #452D35, RGB: 69,45,53 - Транспортный черный
HEX: #1E1E1E, RGB: 30,30,30 - Черно-зеленый
HEX: #343E40, RGB: 52,62,64 - Черно-коричневый
HEX: #212121, RGB: 33,33,33 - Черно-красный
HEX: #412227, RGB: 65,34,39 - Черно-оливковый
HEX: #3B3C36, RGB: 59,60,54 - Черно-серый
HEX: #23282B, RGB: 35,40,43 - Черно-синий
HEX: #18171C, RGB: 24,23,28 - Черновато-зеленый
HEX: #141613, RGB: 20,22,19 - Черновато-красный
HEX: #1F0E11, RGB: 31,14,17 - Черновато-пурпурный
HEX: #1D1018, RGB: 29,16,24 - Черновато-синий
HEX: #161A1E, RGB: 22,26,30 - Черный янтарь
HEX: #0A0A0A, RGB: 10,10,10
HTML Цвета
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:
Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):
Цвет | Название | Цвет | Название | Цвет | Название | Цвет | Название |
---|---|---|---|---|---|---|---|
Black | Gray | Silver | White | ||||
Yellow | Lime | Aqua | Fuchsia | ||||
Red | Green | Blue | Purple | ||||
Maroon | Olive | Navy | Teal |
Пример использования различных цветовых названий:
Пример: задание цвета по его названию
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
Задание цвета с помощью RGB
При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red), G — зеленый (green), В — синий (blue). Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255. Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:
Пример: Задание цвета с помощью RGB
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Задание цвета по шестнадцатеричному значению
Значения R G B также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки #, например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки # можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.
Пример: Цвет HEX
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный+зеленый=желтый: #FFFF00
красный+синий=фиолетовый: #FF00FF
зеленый+синий=голубой: #00FFFF
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный+зеленый=желтый: #FFFF00
красный+синий=фиолетовый: #FF00FF
зеленый+синий=голубой: #00FFFF
Список широко распространённых цветов (название, HEX и RGB):
Английское название | Русское название | Образец | HEX | RGB | ||
---|---|---|---|---|---|---|
Amaranth | Амарантовый | #E52B50 | 229 | 43 | 80 | |
Amber | Янтарный | #FFBF00 | 255 | 191 | 0 | |
Aqua | Сине-зеленый | #00FFFF | 0 | 255 | 255 | |
Azure | Лазурный | #007FFF | 0 | 127 | 255 | |
Black | Черный | #000000 | 0 | 0 | 0 | |
Blue | Синий | #0000FF | 0 | 0 | 255 | |
Bondi Blue | Вода пляжа Бонди | #0095B6 | 0 | 149 | 182 | |
Brass | Латунный | #B5A642 | 181 | 166 | 66 | |
Brown | Коричневый | #964B00 | 150 | 75 | 0 | |
Cerulean | Лазурный | #007BA7 | 0 | 123 | 167 | |
Dark spring green | Тёмный весенне-зелёный | #177245 | 23 | 114 | 69 | |
Emerald | Изумрудный | #50C878 | 80 | 200 | 120 | |
Eggplant | Баклажановый | #990066 | 153 | 0 | 102 | |
Fuchsia | Фуксия | #FF00FF | 255 | 0 | 255 | |
Gold | Золотой | #FFD700 | 250 | 215 | 0 | |
Gray | Серый | #808080 | 128 | 128 | 128 | |
Green | Зелёный | #00FF00 | 0 | 255 | 0 | |
Indigo | Индиго | #4B0082 | 75 | 0 | 130 | |
Jade | Нефритовый | #00A86B | 0 | 168 | 107 | |
Lime | Лайм | #CCFF00 | 204 | 255 | 0 | |
Malachite | Малахитовый | #0BDA51 | 11 | 218 | 81 | |
Navy | Тёмно-синий | #000080 | 0 | 0 | 128 | |
Ochre | Охра | #CC7722 | 204 | 119 | 34 | |
Olive | Оливковый | #808000 | 128 | 128 | 0 | |
Orange | Оранжевый | #FFA500 | 255 | 165 | 0 | |
Peach | Персиковый | #FFE5B4 | 255 | 229 | 180 | |
Pumpkin | Тыква | #FF7518 | 255 | 117 | 24 | |
Purple | Фиолетовый | #800080 | 128 | 0 | 128 | |
Red | Красный | #FF0000 | 255 | 0 | 0 | |
Saffron | Шафрановый | #F4C430 | 244 | 196 | 48 | |
Sea Green | Зелёное море | #2E8B57 | 46 | 139 | 87 | |
Swamp green | Болотный | #ACB78E | 172 | 183 | 142 | |
Teal | Сине-зелёный | #008080 | 0 | 128 | 128 | |
Ultramarine | Ультрамариновый | #120A8F | 18 | 10 | 143 | |
Violet | Фиолетовый | #8B00FF | 139 | 0 | 255 | |
Yellow | Жёлтый | #FFFF00 | 255 | 255 | 0 |
Коды цветов (фон) по насыщенности и оттенку: HTML Таблица цветов
Задачи
Задание цвета по его названию
Установите для заголовка второго уровня фон красного цвета, используя в качестве значения название цвета на английском языке.
Задача HTML:
Заголовок второго уровня