2.13. CSS-цвета

Опубликовано: 15 мая 2014 Обновлено: 2 января 2020 0 комментариев

Модуль CSS color подробно описывает значения, которые позволяют авторам определять цвета и непрозрачность html-элементов, а также значения свойства color.

Свойство color

Содержание:
1. Приоритетные цвета: свойство color
2. Значения цвета
2.1. Основные ключевые слова
2.2. Числовые значения цвета
2.2.1. Цвета модели RGB
2.2.2. Цвета модели RGBA
2.2.3. Ключевое слово transparent
2.2.4. HSL-цвета
2.2.5. HSLA-значения цвета
2.3. Расширенные ключевые слова цвета
2.4. Ключевое слово currentColor

1. Приоритетные цвета: свойство color

Свойство задаёт цвет шрифта с помощью различных систем цветопередачи. Свойство описывает цвет текстового содержимого элемента. Кроме того, оно используется для предоставления потенциального косвенного значения (currentColor) для любых других свойств, которые принимают значения цвета.

Свойство наследуется.

color
Значения:
цвет	Задаётся с помощью значений цвета.
`inherit`	Наследует значение свойства от родительского элемента.

2. Значения цвета

2.1. Основные ключевые слова

Список основных ключевых слов включает в себя следующие значения:

Название	HEX	RGB
`black`	#000000	0,0,0
`silver`	#C0C0C0	192,192,192
`gray`	#808080	128,128,128
`white`	#FFFFFF	255,255,255
`maroon`	#800000	128,0,0
`red`	#FF0000	255,0,0
`purple`	#800080	128,0,128
`fuchsia`	#FF00FF	255,0,255
`green`	#008000	0,128,0
`lime`	#00FF00	0,255,0
`olive`	#808000	128,128,0
`yellow`	#FFFF00	255,255,0
`navy`	#000080	0,0,128
`blue`	#0000FF	0,0,255
`teal`	#008080	0,128,128
`aqua`	#00FFFF	0,255,255

Названия цветов не чувствительны к регистру.

Синтаксис

color: teal;

2.2. Числовые значения цвета

2.2.1. Цвета модели RGB

Формат значения RGB в шестнадцатеричном формате — это знак #, за которым сразу следуют три или шесть шестнадцатеричных символов. Трехзначная запись RGB #rgb преобразуется в шестизначную форму #rrggbb путем копирования цифр, а не путем добавления нулей. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый #ffffff может быть указан в короткой записи #fff, и удаляет любые зависимости от глубины цвета дисплея.

Формат значения RGB в функциональной нотации — rgb(, за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует символ ). Целочисленное значение 255 соответствует 100% и F или FF в шестнадцатеричной записи:

rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF

Символы пробела допускаются вокруг числовых значений.

Все цвета RGB указываются в цветовом пространстве sRGB. Пользовательские агенты могут различаться в точности, с которой они представляют эти цвета, но использование sRGB дает однозначное и объективно измеримое определение того, каким должен быть цвет.

Значения за пределами диапазона устройства должны быть обрезаны или отображены в известном диапазоне: значения красного, зеленого и синего необходимо изменить, чтобы они попадали в диапазон, поддерживаемый устройством. Некоторые устройства, например принтеры, имеют диапазоны, отличные от sRGB, поэтому некоторые цвета за пределами диапазона 0..255 sRGB будут представимы (внутри диапазона устройства) и будут отображаться.

Синтаксис

color: #fb0;
color: #ffbb00;
color: rgb(255,0,0);
color: rgb(100%, 0%, 0%);

2.2.2. Цвета модели RGBA

Цветовая модель RGB расширена в этой спецификации, чтобы включить alpha, которая управляющая непрозрачностью цвета. В отличие от значений RGB, для значения RGBA нет шестнадцатеричной записи.

Формат значения RGBA в функциональной нотации — rgba( за которым следует разделенный запятыми список из трех числовых значений (либо трех целочисленных значений, либо трех процентных значений), за которыми следует значение непрозрачности, а затем ). Целочисленное значение 255 соответствует 100%, rgba (255,255,255,0.8) = rgba (100%,100%,100%,0.8). Символы пробела допускаются вокруг числовых значений.

Параметр непрозрачности применяется ко всему объекту. Любые значения за пределами диапазона от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) будут ограничены этим диапазоном.

Синтаксис

color: rgba(0,0,255,0.5);     
color: rgba(100%, 50%, 0%, 0.1);

2.2.3. Ключевое слово transparent

Это ключевое слово можно считать сокращением для прозрачного черного цвета rgba (0,0,0,0), которое является его вычисленным значением.

Синтаксис

color: transparent;

2.2.4. HSL-цвета

Цвета RGB не интуитивно понятны. CSS3 добавляет числовые цвета hue-saturation-lightness (HSL) в дополнение к числовым цветам RGB. HSL-цвета симметричны свету и темноте, и преобразование HSL в RGB максимально просто.

Цвета HSL кодируются как тройка (оттенок, насыщенность, яркость). Оттенок представлен как угол цветного круга (то есть радуга, представленная в круге). Этот угол обычно измеряется в градусах, так что эта единица измерения неявна в CSS; синтаксически дается только число. По определению красный = 0 = 360, а остальные цвета распределены по кругу, поэтому зеленый = 120, синий = 240 и т.д. Насыщенность и яркость представлены в процентах. 100% — это полное насыщение, а 0% — это оттенок серого. Яркость 0% — черная, 100% — белая, а 50% — нормальная.

Синтаксис

color: hsl(0, 100%, 50%);  
color: hsl(120, 100%, 50%);

2.2.5. HSLA-значения цвета

Так же, как функциональная нотация rgb() имеет альфа-аналог rgba(), функциональная нотация hsl() имеет альфа-аналог hsla().

Формат значения цвета HSLA в функциональной нотации — hsla(, за которым следуют оттенок в градусах, насыщенность и яркость в процентах, и значение непрозрачности, после которого следует символ ). Символы пробела допускаются вокруг числовых значений.

Синтаксис

color: hsla(240, 100%, 50%, 0.5); 
color: hsla(30, 100%, 50%, 0.1);

2.3. Расширенные ключевые слова цвета

В таблице ниже представлен список цветов, поддерживаемых популярными браузерами.

Название	HEX	RGB
`aliceblue`	#F0F8FF	240,248,255
`antiquewhite`	#FAEBD7	250,235,215
`aqua`	#00FFFF	0,255,255
`aquamarine`	#7FFFD4	127,255,212
`azure`	#F0FFFF	240,255,255
`beige`	#F5F5DC	245,245,220
`bisque`	#FFE4C4	255,228,196
`black`	#000000	0,0,0
`blanchedalmond`	#FFEBCD	255,235,205
`blue`	#0000FF	0,0,255
`blueviolet`	#8A2BE2	138,43,226
`brown`	#A52A2A	165,42,42
`burlywood`	#DEB887	222,184,135
`cadetblue`	#5F9EA0	95,158,160
`chartreuse`	#7FFF00	127,255,0
`chocolate`	#D2691E	210,105,30
`coral`	#FF7F50	255,127,80
`cornflowerblue`	#6495ED	100,149,237
`cornsilk`	#FFF8DC	255,248,220
`crimson`	#DC143C	220,20,60
`cyan`	#00FFFF	0,255,255
`darkblue`	#00008B	0,0,139
`darkcyan`	#008B8B	0,139,139
`darkgoldenrod`	#B8860B	184,134,11
`darkgray`	#A9A9A9	169,169,169
`darkgreen`	#006400	0,100,0
`darkkhaki`	#BDB76B	189,183,107
`darkmagenta`	#8B008B	139,0,139
`darkolivegreen`	#556B2F	85,107,47
`darkorange`	#FF8C00	255,140,0
`darkorchid`	#9932CC	153,50,204
`darkred`	#8B0000	139,0,0
`darksalmon`	#E9967A	233,150,122
`darkseagreen`	#8FBC8F	143,188,143
`darkslateblue`	#483D8B	72,61,139
`darkslategray`	#2F4F4F	47,79,79
`darkturquoise`	#00CED1	0,206,209
`darkviolet`	#9400D3	148,0,211
`deeppink`	#FF1493	255,20,147
`deepskyblue`	#00BFFF	0,191,255
`dimgray`	#696969	105,105,105
`dodgerblue`	#1E90FF	30,144,255
`firebrick`	#B22222	178,34,34
`floralwhite`	#FFFAF0	255,250,240
`forestgreen`	#228B22	34,139,34
`fuchsia`	#FF00FF	255,0,255
`gainsboro`	#DCDCDC	220,220,220
`ghostwhite`	#F8F8FF	248,248,255
`gold`	#FFD700	255,215,0
`goldenrod`	#DAA520	218,165,32
`gray`	#808080	128,128,128
`green`	#008000	0,128,0
`greenyellow`	#ADFF2F	173,255,47
`honeydew`	#F0FFF0	240,255,240
`hotpink`	#FF69B4	255,105,180
`indianred`	#CD5C5C	205,92,92
`indigo`	#4B0082	75,0,130
`ivory`	#FFFFF0	255,255,240
`khaki`	#F0E68C	240,230,140
`lavender`	#E6E6FA	230,230,250
`lavenderblush`	#FFF0F5	255,240,245
`lawngreen`	#7CFC00	124,252,0
`lemonchiffon`	#FFFACD	255,250,205
`lightblue`	#ADD8E6	173,216,230
`lightcoral`	#F08080	240,128,128
`lightcyan`	#E0FFFF	224,255,255
`lightgoldenrodyellow`	#FAFAD2	250,250,210
`lightgray`	#D3D3D3	211,211,211
`lightgreen`	#90EE90	144,238,144
`lightpink`	#FFB6C1	255,182,193
`lightsalmon`	#FFA07A	255,160,122
`lightseagreen`	#20B2AA	32,178,170
`lightskyblue`	#87CEFA	135,206,250
`lightslategray`	#778899	119,136,153
`lightsteelblue`	#B0C4DE	176,196,222
`lightyellow`	#FFFFE0	255,255,224
`lime`	#00FF00	0,255,0
`limegreen`	#32CD32	50,205,50
`linen`	#FAF0E6	250,240,230
`magenta`	#FF00FF	255,0,255
`maroon`	#800000	128,0,0
`mediumaquamarine`	#66CDAA	102,205,170
`mediumblue`	#0000CD	0,0,205
`mediumorchid`	#BA55D3	186,85,211
`mediumpurple`	#9370DB	147,112,219
`mediumseagreen`	#3CB371	60,179,113
`mediumslateblue`	#7B68EE	123,104,238
`mediumspringgreen`	#00FA9A	0,250,154
`mediumturquoise`	#48D1CC	72,209,204
`mediumvioletred`	#C71585	199,21,133
`midnightblue`	#191970	25,25,112
`mintcream`	#F5FFFA	245,255,250
`mistyrose`	#FFE4E1	255,228,225
`moccasin`	#FFE4B5	255,228,181
`navajowhite`	#FFDEAD	255,222,173
`navy`	#000080	0,0,128
`oldlace`	#FDF5E6	253,245,230
`olive`	#808000	128,128,0
`olivedrab`	#6B8E23	107,142,35
`orange`	#FFA500	255,165,0
`orangered`	#FF4500	255,69,0
`orchid`	#DA70D6	218,112,214
`palegoldenrod`	#EEE8AA	238,232,170
`palegreen`	#98FB98	152,251,152
`paleturquoise`	#AFEEEE	175,238,238
`palevioletred`	#DB7093	219,112,147
`papayawhip`	#FFEFD5	255,239,213
`peachpuff`	#FFDAB9	255,218,185
`peru`	#CD853F	205,133,63
`pink`	#FFC0CB	255,192,203
`plum`	#DDA0DD	221,160,221
`powderblue`	#B0E0E6	176,224,230
`purple`	#800080	128,0,128
`red`	#FF0000	255,0,0
`rosybrown`	#BC8F8F	188,143,143
`royalblue`	#4169E1	65,105,225
`saddlebrown`	#8B4513	139,69,19
`salmon`	#FA8072	250,128,114
`sandybrown`	#F4A460	244,164,96
`seagreen`	#2E8B57	46,139,87
`seashell`	#FFF5EE	255,245,238
`sienna`	#A0522D	160,82,45
`silver`	#C0C0C0	192,192,192
`skyblue`	#87CEEB	135,206,235
`slateblue`	#6A5ACD	106,90,205
`slategray`	#708090	112,128,144
`snow`	#FFFAFA	255,250,250
`springgreen`	#00FF7F	0,255,127
`steelblue`	#4682B4	70,130,180
`tan`	#D2B48C	210,180,140
`teal`	#008080	0,128,128
`thistle`	#D8BFD8	216,191,216
`tomato`	#FF6347	255,99,71
`turquoise`	#40E0D0	64,224,208
`violet`	#EE82EE	238,130,238
`wheat`	#F5DEB3	245,222,179
`white`	#FFFFFF	255,255,255
`whitesmoke`	#F5F5F5	245,245,245
`yellow`	#FFFF00	255,255,0
`yellowgreen`	#9ACD32	154,205,50

Синтаксис

color: gold;

2.4. Ключевое слово currentColor

CSS1 и CSS2 определили начальное значение свойства border-color как значение свойства color, но не определили соответствующее ключевое слово. Это упущение было распознано SVG, поэтому SVG 1.0 ввел значение currentColor для свойств fill, stroke, stop-color, flood-color и lighting-color. CSS3 расширяет значение цвета, добавляя ключевое слово currentColor, чтобы разрешить его использование со всеми свойствами, которые принимают значение color. Это упрощает определение этих свойств в CSS3.

Используемое значение ключевого слова currentColor — это вычисленное значение свойства color. Если ключевое слово установлено в самом свойстве color, оно рассматривается как color: inherit.

Пример

body {color: grey;}
div {border: 1px solid currentColor;}

По материалам CSS Color Module Level 3

CSS content

CSS-генераторы

2.13. CSS-цвета

Свойство color

1. Приоритетные цвета: свойство color

2. Значения цвета

2.1. Основные ключевые слова

2.2. Числовые значения цвета

2.2.1. Цвета модели RGB

2.2.2. Цвета модели RGBA

2.2.3. Ключевое слово transparent

2.2.4. HSL-цвета

2.2.5. HSLA-значения цвета

2.3. Расширенные ключевые слова цвета

2.4. Ключевое слово currentColor

Поделиться: