Просмотр кода страницы HTML-цвета

<noinclude>{{к удалению|2023-01-08}}
</noinclude>{{Глубина цвета}}
{{HTML}}
'''Веб-цвета''' — [[цвет]]а, используемые при отображении [[Веб-страница|веб-страниц]], а также методы описания и определения этих цветов.

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

# В виде #123ABC. Представление в виде трёх пар [[Шестнадцатеричная система счисления|шестнадцатеричных цифр]], где каждая пара отвечает за свой цвет:
## Две первые цифры — [[красный цвет|красный]]
## Две в середине — [[зелёный цвет|зелёный]]
## Две последние цифры — [[синий цвет|синий]]<br>Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.
# Представление [[Ключевое слово|ключевыми]] словами, например ''green'', ''black''. Во избежание случаев, когда указанное ключевое слово «не понимается» [[браузер]]ом, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
# В виде [[RGB]](*,*,*), где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.
# Возможен и [[Альфа-канал|RGBA]](*,*,*,*), где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255, а последняя «*» — уровень непрозрачности ([[альфа-канал]]), задающийся рациональными числами от 0 до 1.

== Имена цветов в [[HTML]] ==
В спецификации HTML 4.01<ref>{{Cite web |url=http://www.w3.org/TR/html401/types.html#h-6.5 |title=HTML 4.01 Specification section 6.5 «Colors» |access-date=2016-11-09 |archive-date=2016-11-14 |archive-url=https://web.archive.org/web/20161114162625/http://www.w3.org/TR/html401/types.html#h-6.5 |deadlink=no }}</ref> определены следующие 16 ключевых цветов (в данном контексте можно использовать как заглавные, так и строчные буквы):

{| class="wikitable"
!Цвет
!Код
!Название
!Цвет
!Код
!Название
!Цвет
!Код
!Название
!Цвет
!Код
!Название
|-
|style="background:#00ffff; color:#000000; font-family:monospace;" |#00ffff
|[[Цвет морской волны|aqua]]
|[[Цвет морской волны|морская волна, cyan]]
| style="background:#000000; color:#ffffff; font-family:monospace;" |#000000
|[[Чёрный цвет|black]] 
|[[Чёрный цвет|чёрный]]
| style="background:#0000ff; color:#ffffff; font-family:monospace;" |#0000ff
|[[Синий цвет|blue]]
|[[Синий цвет|синий]]
| style="background:#ff00ff; color:#000000; font-family:monospace;" |#ff00ff
|[[Фуксия (цвет)|fuchsia]] 
|[[Фуксия (цвет)|фуксия]]
|-
|style="background:#808080; color:#ffffff; font-family:monospace;"|#808080
|[[Серый цвет|gray]]
| [[Серый цвет|серый]]
| style="background:#008000; color:#ffffff; font-family:monospace;" |#008000
|[[зелёный цвет|green]] 
|[[зелёный цвет|зелёный]]
| style="background:#00ff00; color:#000000; font-family:monospace;" |#00ff00
|[[Лайм (цвет)|lime]] 
|[[Лайм (цвет)|ярко-зелёный]]
| style="background:#800000; color:#ffffff; font-family:monospace;" |#800000
|[[тёмно-бордовый цвет|maroon]]
|[[тёмно-бордовый цвет|тёмно-бордовый]]
|-
|style="background:#000080; color:#ffffff; font-family:monospace;"|#000080
|[[Тёмно-синий цвет|navy]]
|[[Тёмно-синий цвет|тёмно-синий]]
| style="background:#808000; color:#ffffff; font-family:monospace;" |#808000
|[[Оливковый цвет|olive]] 
|[[Оливковый цвет|оливковый]]
| style="background:#800080; color:#ffffff; font-family:monospace;" |#800080
|[[пурпурный цвет|purple]]
|[[пурпурный цвет|пурпурный]]
| style="background:#ff0000; color:#ffffff; font-family:monospace;" |#ff0000
|[[Красный цвет|red]]
|[[Красный цвет|красный]]
|-
|style="background:#c0c0c0; color:#000000; font-family:monospace;"|#c0c0c0
|[[Серебряный цвет|silver]] 
|[[Серебряный цвет|серебряный]]
| style="background:#008080; color:#ffffff; font-family:monospace;" |#008080
|[[Сине-зелёный цвет|teal]] 
|[[Сине-зелёный цвет|сине-зелёный]]
| style="background:#ffffff; color:#000000; font-family:monospace;" |#ffffff
|[[Белый цвет|white]] 
|[[Белый цвет|белый]]
| style="background:#ffff00; color:#000000; font-family:monospace;" |#ffff00
|[[Жёлтый цвет|yellow]]
|[[Жёлтый цвет|жёлтый]]
|}
<small>{{fnb|*}}В спецификации используются английские названия цветов.</small>
<!-- These 16 were also specified as sRGB and included in the HTML 3.0 specification which noted «These colors were originally picked as being the standard 16 colors supported with the Windows VGA palette.» It should be noted that [[fuchsia]] is exactly the same as [[magenta]] (in the list below) and similarly [[aqua]] is exactly the same as [[cyan]].<ref>[http://www.w3.org/TR/REC-html32#body HTML 3.2 Specification «The BODY element»]</ref>

It should be mentioned that all color values from #000000 — #FFFFFF (16,777,215 colors) are valid.-->

== Безопасная палитра [[Netscape Communications|Netscape]] ==
В эпоху 256-цветных [[Видеокарта|видеокарт]] широко применялась так называемая «безопасная [[Палитра (компьютерная графика)|палитра]] Netscape» — однородная палитра 6×6×6. В [[truecolor]] у безопасных цветов все три компонента — R, G и B — равняются <code>00</code>, <code>33</code>, <code>66</code>, <code>99</code>, <code>CC</code> и <code>FF</code>. Браузер [[Netscape Navigator|Netscape]] гарантировал, что эти цвета будут отображены без приближения или [[Растр (полиграфия)|растрирования]].

Другими словами, 216 цветов стандартной 16-цветовой палитры и палитры 6×6×6 были наиболее предпочтительными для цвета изображения и фона.

К концу [[1990-е годы|1990-х годов]], с полным исчезновением 8-битного цвета с рабочих столов [[Операционная система|ОС]], это требование исчезло. Тем не менее, [[Adobe Photoshop]] и поныне оснащён опцией «Только Web-цвета» ({{lang-en|Only Web Colors}}).

== Названия цветов в [[X Window System|X11]] ==
{{main|Список цветов в X11}}
<!-- In addition, a number of colors are defined by [[web browser]]s. A particular browser may not recognize all of these colors, but as of [[2005]] all modern general-use browsers support the full list. Many of these colors are from the list of [[X11 color names]] distributed with the [[X Window System]]. These colors were standardized by [[Scalable Vector Graphics|SVG 1.0]], and are accepted by [[Scalable Vector Graphics|SVG Full]] user agents. They are not part of [[Scalable Vector Graphics|SVG Tiny]].

Almost the exact same color names are used in [[.NET Framework]], in the KnownColor and Color enumerations. The only color difference is DarkSeaGreen which is defined as 8F,BC,8B (instead of 8F,BC,8F).

The list of colors actually shipped with the X11 product varies between implementations, and clashes with certain of the HTML names such as green. Furthermore, X11 colors are defined as simple RGB (hence, no particular color), rather than sRGB. This means that the list of colors found in X11 (e.g. in /usr/lib/X11/rgb.txt) should not directly be used to choose colors for the web.<ref>[http://lists.w3.org/Archives/Public/www-svg/2002Apr/0052.html Public discussion on SVG mailing list ''Re: color names in SVG-1.0 conflict with /usr/lib/X11/rgb.txt'']</ref>

The list of web «X11 colors» from the CSS3 specification, along with their hexadecimal and decimal equivalents,
is shown below, compare the alphabetical lists in the W3C standards.
<ref>[http://www.w3.org/TR/css3-color#svg-color W3C TR CSS3 Color Module, SVG color keywords]</ref><ref>[http://www.w3.org/TR/SVG/types.html#ColorKeywords W3C TR SVG 1.0, recognized color keyword names]</ref>-->
{| style="font-size:90%;" cellpadding="4"
|- valign="top"
|
{|border="0"
!style="background:lightgrey;" | [[HTML]] имя
!colspan=1 style="background:lightgrey;"| К З С<sub>16</sub>
!colspan=1 style="background:lightgrey;"| К З С<sub>10</sub>
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Красные
|- style="background:indianred; color:white"
|IndianRed ||CD 5C 5C|| 205 92 92
|- style="background:lightred; color:black;"
|LightRed ||FF 4C 5B||255 76 91
|- style="background:lightcoral; color:black;"
|LightCoral ||F0 80 80||240 128 128
|- style="background:salmon; color:black;"
|Salmon ||FA 80 72||250 128 114
|- style="background:darksalmon; color:black;"
|DarkSalmon ||E9 96 7A||233 150 122
|- style="background:lightsalmon; color:black;"
|LightSalmon ||FF A0 7A||255 160 122
|- style="background:crimson; color:white; color:white;"
|Crimson ||DC 14 3C||220 20 60
|- style="background:red; color:white;"
|Red ||FF 00 00||255 0 0
|- style="background:firebrick; color:white;"
|FireBrick ||B2 22 22||178 34 34
|- style="background:darkred; color:white;"
|DarkRed ||8B 00 00||139 0 0
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Розовые
|- style="background:pink; color:black;"
|Pink ||FF C0 CB||255 192 203
|- style="background:lightpink; color:black;"
|LightPink ||FF B6 C1||255 182 193
|- style="background:hotpink; color:white;"
|HotPink ||FF 69 B4||255 105 180
|- style="background:deeppink; color:white;"
|DeepPink ||FF 14 93||255 20 147
|- style="background:mediumvioletred; color:white;"
|MediumVioletRed||C7 15 85||199 21 133
|- style="background:palevioletred; color:white;"
|PaleVioletRed ||DB 70 93||219 112 147
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Оранжевые
|- style="background:coral; color:white;"
|Coral ||FF 7F 50||255 127 80
|- style="background:tomato; color:white;"
|Tomato ||FF 63 47||255 99 71
|- style="background:orangered; color:white;"
|OrangeRed ||FF 45 00||255 69 0
|- style="background:darkorange; color:white;"
|DarkOrange ||FF 8C 00||255 140 0
|- style="background:orange; color:white;"
|Orange ||FF A5 00||255 165 0
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Жёлтые
|- style="background:gold; color:black;"
|Gold ||FF D7 00||255 215 0
|- style="background:yellow; color:black;"
|Yellow ||FF FF 00||255 255 0
|- style="background:lightyellow; color:black;"
|LightYellow ||FF FF E0||255 255 224
|- style="background:lemonchiffon; color:black;"
|LemonChiffon ||FF FA CD||255 250 205
|- style="background:lightgoldenrodyellow; color:black;"
|LightGoldenrodYellow||FA FA D2||250 250 210
|- style="background:papayawhip; color:black;"
|PapayaWhip ||FF EF D5||255 239 213
|- style="background:moccasin; color:black;"
|Moccasin ||FF E4 B5||255 228 181
|- style="background:peachpuff; color:black;"
|PeachPuff ||FF DA B9||255 218 185
|- style="background:palegoldenrod; color:black;"
|PaleGoldenrod ||EE E8 AA||238 232 170
|- style="background:khaki; color:black;"
|Khaki ||F0 E6 8C||240 230 140
|- style="background:darkkhaki; color:white;"
|DarkKhaki ||BD B7 6B||189 183 107
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Фиолетовые
|- style="background:lavender; color:black;"
|Lavender ||E6 E6 FA||230 230 250
|- style="background:thistle; color:white;"
|Thistle ||D8 BF D8||216 191 216
|- style="background:plum; color:white;"
|Plum ||DD A0 DD||221 160 221
|- style="background:violet; color:white;"
|Violet ||EE 82 EE||238 130 238
|- style="background:orchid; color:white;"
|Orchid ||DA 70 D6||218 112 214
|- style="background:fuchsia; color:white;"
|Fuchsia(Magenta) ||FF 00 FF||255 0 255
|- style="background:mediumorchid; color:white;"
|MediumOrchid ||BA 55 D3||186 85 211
|- style="background:mediumpurple; color:white;"
|MediumPurple ||93 70 DB||147 112 219
|- style="background:blueviolet; color:white;"
|BlueViolet ||8A 2B E2||138 43 226
|- style="background:darkviolet; color:white;"
|DarkViolet ||94 00 D3||148 0 211
|- style="background:darkorchid; color:white;"
|DarkOrchid ||99 32 CC||153 50 204
|- style="background:darkmagenta; color:white;"
|DarkMagenta ||8B 00 8B||139 0 139
|- style="background:purple; color:white;"
|Purple ||80 00 80||128 0 128
|- style="background:indigo; color:white;"
|Indigo ||4B 00 82|| 75 0 130
|- style="background:slateblue; color:white;"
|SlateBlue ||6A 5A CD||106 90 205
|- style="background:darkslateblue; color:white;"
|DarkSlateBlue ||48 3D 8B|| 72 61 139
|-
|}
|
{|
!style="background:lightgrey;" | [[HTML]] имя
!colspan=1 style="background:lightgrey;"| К З С<sub>16</sub>
!colspan=1 style="background:lightgrey;"| К З С<sub>10</sub>
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Зелёные
|- style="background:greenyellow; color:black;"
|GreenYellow ||AD FF 2F||173 255 47
|- style="background:chartreuse; color:black;"
|Chartreuse ||7F FF 00||127 255 0
|- style="background:lawngreen; color:black;"
|LawnGreen ||7C FC 00||124 252 0
|- style="background:lime; color:black;"
|Lime ||00 FF 00|| 0 255 0
|- style="background:limegreen; color:black;"
|LimeGreen ||32 CD 32|| 50 205 50
|- style="background:palegreen; color:black;"
|PaleGreen ||98 FB 98||152 251 152
|- style="background:lightgreen; color:black;"
|LightGreen ||90 EE 90||144 238 144
|- style="background:mediumspringgreen; color:black;"
|MediumSpringGreen||00 FA 9A|| 0 250 154
|- style="background:springgreen; color:black;"
|SpringGreen ||00 FF 7F|| 0 255 127
|- style="background:mediumseagreen; color:white;"
|MediumSeaGreen ||3C B3 71|| 60 179 113
|- style="background:seagreen; color:white;"
|SeaGreen ||2E 8B 57|| 46 139 87
|- style="background:forestgreen; color:white;"
|ForestGreen ||22 8B 22|| 34 139 34
|- style="background:green; color:white;"
|Green ||00 80 00|| 0 128 0
|- style="background:darkgreen; color:white;"
|DarkGreen ||00 64 00|| 0 100 0
|- style="background:yellowgreen; color:white;"
|YellowGreen ||9A CD 32||154 205 50
|- style="background:olivedrab; color:white;"
|OliveDrab ||6B 8E 23||107 142 35
|- style="background:olive; color:white;"
|Olive ||80 80 00||128 128 0
|- style="background:darkolivegreen; color:white;"
|DarkOliveGreen ||55 6B 2F|| 85 107 47
|- style="background:mediumaquamarine; color:black;"
|MediumAquamarine||66 CD AA||102 205 170
|- style="background:darkseagreen; color:white;"
|DarkSeaGreen ||8F BC 8F||143 188 143
|- style="background:lightseagreen; color:white;"
|LightSeaGreen ||20 B2 AA|| 32 178 170
|- style="background:darkcyan; color:white;"
|DarkCyan ||00 8B 8B|| 0 139 139
|- style="background:teal; color:white;"
|Teal ||00 80 80|| 0 128 128
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Синие
|- style="background:aqua; color:black;"
|Aqua(Cyan) ||00 FF FF|| 0 255 255
|- style="background:lightcyan; color:black;"
|LightCyan ||E0 FF FF||224 255 255
|- style="background:paleturquoise; color:black;"
|PaleTurquoise ||AF EE EE||175 238 238
|- style="background:aquamarine; color:black;"
|Aquamarine ||7F FF D4||127 255 212
|- style="background:turquoise; color:black;"
|Turquoise ||40 E0 D0|| 64 224 208
|- style="background:mediumturquoise; color:white;"
|MediumTurquoise ||48 D1 CC|| 72 209 204
|- style="background:darkturquoise; color:white;"
|DarkTurquoise||00 CE D1|| 0 206 209
|- style="background:cadetblue; color:white;"
|CadetBlue ||5F 9E A0|| 95 158 160
|- style="background:steelblue; color:white;"
|SteelBlue ||46 82 B4|| 70 130 180
|- style="background:lightsteelblue; color:black;"
|LightSteelBlue ||B0 C4 DE||176 196 222
|- style="background:powderblue; color:black;"
|PowderBlue ||B0 E0 E6||176 224 230
|- style="background:lightblue; color:black;"
|LightBlue ||AD D8 E6||173 216 230
|- style="background:skyblue; color:black;"
|SkyBlue ||87 CE EB||135 206 235
|- style="background:lightskyblue; color:black;"
|LightSkyBlue||87 CE FA||135 206 250
|- style="background:deepskyblue; color:white;"
|DeepSkyBlue ||00 BF FF|| 0 191 255
|- style="background:dodgerblue; color:white;"
|DodgerBlue ||1E 90 FF|| 30 144 255
|- style="background:cornflowerblue; color:white;"
|CornflowerBlue||64 95 ED||100 149 237
|- style="background:mediumslateblue; color:white;"
|MediumSlateBlue||7B 68 EE||123 104 238
|- style="background:royalblue; color:white;"
|RoyalBlue ||41 69 E1|| 65 105 225
|- style="background:blue; color:white;"
|Blue ||00 00 FF|| 0 0 255
|- style="background:mediumblue; color:white;"
|MediumBlue ||00 00 CD|| 0 0 205
|- style="background:darkblue; color:white;"
|DarkBlue ||00 00 8B|| 0 0 139
|- style="background:navy; color:white;"
|Navy ||00 00 80|| 0 0 128
|- style="background:midnightblue; color:white;"
|MidnightBlue ||19 19 70|| 25 25 112
|-
|}
|
{|
!style="background:lightgrey;" | [[HTML]] имя
!colspan=1 style="background:lightgrey;"| К З С<sub>16</sub>
!colspan=1 style="background:lightgrey;"| К З С<sub>10</sub>
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Коричневые
|- style="background:cornsilk; color:black;"
|Cornsilk ||FF F8 DC||255 248 220
|- style="background:blanchedalmond; color:black;"
|BlanchedAlmond ||FF EB CD||255 235 205
|- style="background:bisque; color:black;"
|Bisque ||FF E4 C4||255 228 196
|- style="background:navajowhite; color:black;"
|NavajoWhite ||FF DE AD||255 222 173
|- style="background:wheat; color:black;"
|Wheat ||F5 DE B3||245 222 179
|- style="background:burlywood; color:white;"
|BurlyWood ||DE B8 87||222 184 135
|- style="background:tan; color:white;"
|Tan ||D2 B4 8C||210 180 140
|- style="background:rosybrown; color:white;"
|RosyBrown ||BC 8F 8F||188 143 143
|- style="background:sandybrown; color:white;"
|SandyBrown ||F4 A4 60||244 164 96
|- style="background:goldenrod; color:white;"
|Goldenrod ||DA A5 20||218 165 32
|- style="background:darkgoldenrod; color:white;"
|DarkGoldenrod ||B8 86 0B||184 134 11
|- style="background:peru; color:white;"
|Peru ||CD 85 3F||205 133 63
|- style="background:chocolate; color:white;"
|Chocolate ||D2 69 1E||210 105 30
|- style="background:saddlebrown; color:white;"
|SaddleBrown ||8B 45 13||139 69 19
|- style="background:sienna; color:white;"
|Sienna ||A0 52 2D||160 82 45
|- style="background:brown; color:white;"
|Brown ||A5 2A 2A||165 42 42
|- style="background:maroon; color:white;"
|Maroon ||80 00 00||128 0 0
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Белые
|- style="background:white; color:black;"
|White ||FF FF FF||255 255 255
|- style="background:snow; color:black;"
|Snow ||FF FA FA||255 250 250
|- style="background:honeydew; color:black;"
|Honeydew ||F0 FF F0||240 255 240
|- style="background:mintcream; color:black;"
|MintCream ||F5 FF FA||245 255 250
|- style="background:azure; color:black;"
|Azure ||F0 FF FF||240 255 255
|- style="background:aliceblue; color:black;"
|AliceBlue ||F0 F8 FF||240 248 255
|- style="background:ghostwhite; color:black;"
|GhostWhite ||F8 F8 FF||248 248 255
|- style="background:whitesmoke; color:black;"
|WhiteSmoke ||F5 F5 F5||245 245 245
|- style="background:seashell; color:black;"
|Seashell ||FF F5 EE||255 245 238
|- style="background:beige; color:black;"
|Beige ||F5 F5 DC||245 245 220
|- style="background:oldlace; color:black;"
|OldLace ||FD F5 E6||253 245 230
|- style="background:floralwhite; color:black;"
|FloralWhite ||FF FA F0||255 250 240
|- style="background:ivory; color:black;"
|Ivory ||FF FF F0||255 255 240
|- style="background:antiquewhite; color:black;"
|AntiqueWhite ||FA EB D7||250 235 215
|- style="background:linen; color:black;"
|Linen ||FA F0 E6||250 240 230
|- style="background:lavenderblush; color:black;"
|LavenderBlush ||FF F0 F5||255 240 245
|- style="background:mistyrose; color:black;"
|MistyRose ||FF E4 E1||255 228 225
|-
!colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|Серые *
|- style="background:gainsboro; color:black;"
|Gainsboro ||DC DC DC||220 220 220
|- style="background:lightgray; color:black;"
|LightGray ||D3 D3 D3||211 211 211
|- style="background:silver; color:black;"
|Silver ||C0 C0 C0||192 192 192
|- style="background:darkgray; color:black;"
|DarkGray ||A9 A9 A9||169 169 169
|- style="background:gray; color:white;"
|Gray ||80 80 80||128 128 128
|- style="background:dimgray; color:white;"
|DimGray ||69 69 69||105 105 105
|- style="background:lightslategray; color:white;"
|LightSlateGray ||77 88 99||119 136 153
|- style="background:slategray; color:white;"
|SlateGray ||70 80 90||112 128 144
|- style="background:darkslategray; color:white;"
|DarkSlateGray ||2F 4F 4F|| 47 79 79
|- style="background:black; color:white;"
|Black ||00 00 00|| 0 0 0
|}
|}

* Слово «Gray» в названиях серых цветов не нужно писать как «Grey», так как ряд браузеров интерпретируют это как «Green»{{нет АИ|14|06|2021}}

== Цвета [[CSS]] ==
Язык [[Cascading Style Sheets]] определяет все цвета HTML4 и X11, а также такие<ref>{{cite web|url=http://www.w3.org/TR/CSS21/syndata.html#color-units|title=CSS 2.1 Specification: Syntax and basic data types: Colors|date=2009-09-08|accessdate=2009-12-21|archiveurl=https://www.webcitation.org/6EFK1MlUh?url=http://www.w3.org/TR/CSS21/syndata.html#color-units|archivedate=2013-02-07|deadlink=no}}</ref>:

{{Colort|width=auto|htmlcolor=|alias=Alias|caption=Цвета, добавленные в CSS 2.1}}
{{Colort/Color|name=[[Оранжевый цвет|orange]]|r=255|g=165|b=0}}
|}

{{Colort|width=auto|htmlcolor=|alias=Alias|caption=Цвета, добавленные в CSS 4}}
{{Colort/Color|name=RebeccaPurple|r=102|g=51|b=153}}
|}

Цвет назван в честь Ребекки, дочери [[Эрик А. Мейер|Эрика Мейера]], пропагандиста и одного из разработчиков CSS. Она умерла от опухоли мозга в возрасте 6 лет.

CSS 2, [[Scalable Vector Graphics|SVG]] и CSS 2.1 также позволяют использование ''системных цветов'' — имён цветов, значения которых определяются [[операционная система|операционной системой]], например, использование системного цвета для подсвеченного текста или фона для управляющих элементов. Это позволяет web-разработчикам адаптировать контент страницы к стилю операционной системы пользователя.<ref>{{Cite web |url=http://www.w3.org/TR/CSS21/ui.html#system-colors |title=User interface — System colors |access-date=2013-01-27 |archive-date=2008-03-28 |archive-url=https://web.archive.org/web/20080328053200/http://www.w3.org/TR/CSS21/ui.html#system-colors |deadlink=no }}</ref> В модуле работы с цветом [[Cascading Style Sheets#CSS 3|CSS3]] использование системных цветов объявлено [[deprecation|нежелательным]] и заменено на
CSS3 UI System Appearance property,<ref>{{Cite web |url=http://www.w3.org/TR/css3-color/#css-system |title=CSS3 Color Module — CSS2 System Colors |access-date=2013-01-27 |archive-date=2017-11-29 |archive-url=https://web.archive.org/web/20171129235005/http://www.w3.org/TR/css3-color/#css-system |deadlink=no }}</ref><ref>{{Cite web |url=http://www.w3.org/TR/2004/CR-css3-ui-20040511/#system |title=CSS3Basic User Interface Module, W3C Candidate Recommendation 11 May 2004: System Appearance |access-date=2013-01-27 |archive-date=2013-01-26 |archive-url=https://web.archive.org/web/20130126201854/http://www.w3.org/TR/2004/CR-css3-ui-20040511/#system |deadlink=no }}</ref> который впоследствии был удален из CSS3.<ref>[http://www.w3.org/TR/css3-ui/#changes-list CSS Basic User Interface Module Level 3 (CSS3 UI), W3C Working Draft 17 January 2012: List of substantial changes] {{Wayback|url=http://www.w3.org/TR/css3-ui/#changes-list |date=20101201143323 }}, «System Appearance has been dropped, including appearance values & property, and system fonts / extension of the ‘font’ property shorthand.»</ref>

Спецификация CSS3 также вводит цветовую модель [[HSL]]:
<syntaxhighlight lang="CSS">
 /* имя цвета */
 p { color: red } /* Базовый список цветов */
 p { color: blanchedalmond } /* Расширенный список цветов (X11) */

 /* модель RGB */
 p { color: #F00}/* #rgb */
 p { color: #FF0000 } /* #rrggbb */
 p { color: rgb(255,0,0)} /* целое в диапазоне 0 — 255 */
 p { color: rgb(100%,0%, 0%) } /* число с плавающей точкой 0.0% — 100.0% */

 /* модель RGB с альфа-каналом, введена в CSS3 */
 p { color: rgba(255, 0, 0, 0.5) } /* 0.5 прозрачность, полупрозрачность */

 /* модель HSL, введена в CSS3 */
 p { color: hsl(0, 100%, 50%) } /* красный (red) */
 p { color: hsl(120, 100%, 50%) } /* зелёный (green) */
 p { color: hsl(120, 100%, 25%) } /* тёмно-зелёный (dark green) */
 p { color: hsl(120, 100%, 75%) } /* светло-зелёный (light green) */
 p { color: hsl(120, 50%, 50%) } /* пастельный зелёный (pastel green) */

 /* модель HSL с альфа-каналом */
 p { color: hsla(120, 100%, 50%, 1) } /* зелёный (green) */
 p { color: hsla(120, 100%, 50%, 0.5) } /* полупрозрачный зелёный */
 p { color: hsla(120, 100%, 50%, 0.1) } /* очень прозрачный зелёный */
</syntaxhighlight>

== Примечания ==
{{примечания}}

== Ссылки ==
Список цветов, правильно отображаемых браузерами:
* [https://www.artlebedev.ru/tools/colors/ Таблица безопасных цветов]
* [http://colorscheme.ru/web-safe-colors.html Безопасные цвета для Веб. Таблица из 216 цветов]
* [https://web.archive.org/web/20161123191645/http://www.webreference.com/html/reference/color/websafe.html Web Color Reference The Websafe and Reallysafe Palettes]{{ref-en}}{{Недоступная ссылка|число=30|месяц=08|год=2018}}

{{Цветовые модели}}

[[Категория:Цвет]]
[[Категория:HTML]]
[[Категория:Веб-дизайн]]