Учебник по цветам
Цвета отображаются комбинацией КРАСНОГО, ЗЕЛЕНОГО и СИНЕГО света.
Названия цветов
С помощью CSS цвета можно задавать с помощью имен цветов:
Пример
Color | Name |
---|---|
Red | |
Yellow | |
Cyan | |
Blue | |
Magenta |
Значения цвета CSS
С помощью CSS цвета можно задавать разными способами:
- По названиям цветов
- Как значения RGB
- Как шестнадцатеричные значения
- Как значения HSL (CSS3)
- Как значения HWB (CSS4)
- С
currentcolor
ключевым словом
Цвета RGB
Цветовые значения RGB поддерживаются во всех браузерах.
Значение цвета RGB указывается с помощью: rgb( КРАСНЫЙ , ЗЕЛЕНЫЙ , СИНИЙ ).
Каждый параметр определяет интенсивность цвета как целое число от 0 до 255.
Например, rgb(0,0,255) отображается как синий, потому что для синего параметра установлено максимальное значение (255), а для остальных установлено значение 0.
Пример
Color | RGB | Color |
---|---|---|
rgb(255,0,0) | Red | |
rgb(0,255,0) | Green | |
rgb(0,0,255) | Blue |
Оттенки серого часто определяются с использованием одинаковых значений для всех трех источников света:
Пример
Color | RGB | Color |
---|---|---|
rgb(0,0,0) | Black | |
rgb(128,128,128) | Gray | |
rgb(255,255,255) | White |
Шестнадцатеричные цвета
Шестнадцатеричные значения цвета также поддерживаются во всех браузерах.
Шестнадцатеричный цвет указывается с помощью: # RR GG BB .
RR (красный), GG (зеленый) и BB (синий) — шестнадцатеричные целые числа от 00 до FF, определяющие интенсивность цвета.
Например, #0000FF отображается синим цветом, потому что для синего компонента установлено максимальное значение (FF), а для остальных установлено значение 00.
Пример
Color | HEX | RGB | Color |
---|---|---|---|
#FF0000 | rgb(255,0,0) | Red | |
#00FF00 | rgb(0,255,0) | Green | |
#0000FF | rgb(0,0,255) | Blue |
Оттенки серого часто определяются с использованием одинаковых значений для всех трех источников света:
Пример
Color | HEX | RGB | Color |
---|---|---|---|
#000000 | rgb(0,0,0) | Black | |
#808080 | rgb(128,128,128) | Gray | |
#FFFFFF | rgb(255,255,255) | White |
Верхний регистр или нижний регистр?
Вы можете использовать прописные или строчные буквы для указания шестнадцатеричных значений.
Нижний регистр легче писать. Верхний регистр легче читать.
Названия цветов
CSS поддерживает 140 стандартных названий цветов.
В следующей главе вы найдете полный алфавитный список названий цветов с шестнадцатеричными значениями:
Color Name | Hex | Color |
---|---|---|
AliceBlue | #F0F8FF | |
AntiqueWhite | #FAEBD7 | |
Aqua | #00FFFF | |
Aquamarine | #7FFFD4 | |
Azure | #F0FFFF | |
Beige | #F5F5DC | |
Bisque | #FFE4C4 |
Ключевое слово текущего цвета
Ключевое currentcolor
слово относится к значению свойства цвета элемента.
Пример
Цвет границы следующего элемента <div> будет синим, потому что цвет текста элемента <div> синий:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}