HTML5. Учебник цветов
Курс по основам HTML | CSS. W3Schools на русском языке. Уроки для начинающих
Цвета отображаются, сочетая КРАСНЫЙ (RED), ЗЕЛЁНЫЙ (GREEN) и СИНИЙ (BLUE) свет.
Названия цветов
В каскадной таблице стилей CSS цвета можно установить с помощью названий цветов:
Пример:
| Цвет | Название |
|---|---|
| Red (красный) | |
| Yellow (жёлтый) | |
| Cyan (бирюзовый) | |
| Blue (синий) | |
| Magenta (пурпурный) |
CSS значения цветов
С помощью CSS цвета могут быть указаны разными способами:
- По названию цветов
- Как RGB значение
- Как шестнадцятеричные значения (HEX)
- Как HSL значение (CSS3)
- Как HWB значение (CSS4)
RGB Цвета
RGB значения цветов поддерживаются во всех браузерах.
Значение цвета RGB задаётся с помощью: rgb (RED, GREEN, BLUE).
Каждый параметр определяет интенсивность цвета как целое число от 0 до 255.
Например, rgb (0,0,255) отображается как синий, потому что синий параметр установлен на его самое высокое значение (255), а другие - на 0.
Пример:
Цвет
RGB
Цвет
rgb(255,0,0)
Красный
rgb(0,255,0)
Зелёний
rgb(0,0,255)
Синий
Попробуйте сами »
Оттенки серого наиболее часто определяются с использованием равных значений для всех трёх источников света:
Пример:
Цвет
RGB
Цвет
rgb(0,0,0)
Чёрный
rgb(128,128,128)
Серый
rgb(255,255,255)
Белый
Попробуйте сами »
Шестнадцатеричные цвета (HEX)
Шестнадцатеричные значения цветов также поддерживаются во всех браузерах.
Шестнадцатеричный цвет задаётся с помощью: #RRGGBB.
RR (красный), GG (зелёний) и BB (синий) это шестнадцатеричные целые числа между 00 и FF, что определяют интенсивность цвета.
Например, #0000FF отображается в виде синего цвета, потому что синий компонент установлен на его самое высокое значение (FF), а другие - на 00.
Пример:
Цвет
HEX
RGB
Цвет
#FF0000
rgb(255,0,0)
Красный
#00FF00
rgb(0,255,0)
Зелёний
#0000FF
rgb(0,0,255)
Синий
Попробуйте сами »
Оттенки серого часто определяются с использованием равных значений для всех трёх источников света:
Пример:
Цвет
HEX
RGB
Цвет
#000000
rgb(0,0,0)
Чёрный
#808080
rgb(128,128,128)
Серый
#FFFFFF
rgb(255,255,255)
Белый
Попробуйте сами »
Верхний или нижний регистр?
Для задания шестнадцатеричных значений (HEX) можно использовать буквы как верхнего регистра, так и буквы нижнего регистра.
Нижний регистр легче писать. Верхний регистр легче читать.
Названия цветов
CSS поддерживает 140 стандартных названия цветов.
В следующем разделе вы найдёте полный алфавитный список названий цветов с шестнадцатеричнымы значениями:
| Название цвета | Hex | Цвет |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Не выкладывайте свой код непосредственно в комментариях, он отображается некорректно. Воспользуйтесь такими сервисами, как jsfiddle.net, codepen.io, liveweave.com, jsbin.com, сохраните код на любом из этих сервисов и в комментариях дайте на него ссылку. Так будет виден и код, и результат.