Веб-цвета - Web colors

HTML
Сравнения

Веб-цвета находятся цвета используется в отображение веб-страниц на Всемирная паутина, а также методы описания и указания этих цветов. Цвета могут быть указаны как RGB тройка или в шестнадцатеричный формат (a шестнадцатеричный триплет) или в некоторых случаях согласно их общеупотребительным английским именам. А инструмент цвета или другой графическое программное обеспечение часто используется для генерации значений цвета. В некоторых случаях шестнадцатеричные цветовые коды указываются с обозначением с использованием ведущего числовой знак (#).[1][2] Цвет определяется в соответствии с интенсивностью его красного, зеленого и синего компонентов, каждый из которых представлен восемью биты. Таким образом, 24 бита используются для указания веб-цвета в пределах sRGB гамма и 16 777 216 цветов, которые могут быть указаны таким образом.

Цвета вне диапазона sRGB можно указать в Каскадные таблицы стилей сделав один или несколько из красного, зеленого и синего компонентов отрицательными или более 100%, поэтому цветовое пространство теоретически является неограниченной экстраполяцией sRGB, аналогичной scRGB.[3] Для указания цвета, отличного от sRGB, требуется вызов функции RGB (); это невозможно с шестнадцатеричным синтаксисом (и, следовательно, невозможно в устаревших HTML документы, не использующие CSS).

Первые версии Мозаика и Netscape Navigator использовал Названия цветов X11 в качестве основы для своих списков цветов, поскольку оба начинали как X Window System Веб-цвета имеют однозначное колориметрическое определение, sRGB, что связывает цветности конкретного люминофор заданная, заданная кривая передачи, адаптивная точка белого и условия просмотра.[4] Они были выбраны, чтобы быть похожими на многие из реальных мониторы и условия просмотра, чтобы рендеринг был достаточно близок к указанным значениям даже без Управление цветом. Пользовательские агенты различаются по точности, с которой они представляют указанные цвета. Более продвинутые пользовательские агенты используют управление цветом для обеспечения лучшей цветопередачи; это особенно важно для Интернет-печать Приложения.

Шестнадцатеричный триплет

А шестнадцатеричный триплет это шестизначный, трехзначныйбайт шестнадцатеричный число, используемое в HTML, CSS, SVG и другие компьютерные приложения для представления цветов. Байты представляют красный, зеленый и синий компоненты цвета. Один байт представляет собой число в диапазоне от 00 до FF (в шестнадцатеричном представлении) или от 0 до 255 в десятичном представлении. Это представляет от наименьшей (0) до наибольшей (255) интенсивности каждого из цветовых компонентов. Таким образом, веб-цвета определяют цвета в 24-битная цветовая схема RGB. Шестнадцатеричный триплет формируется путем объединения трех байтов в шестнадцатеричной системе счисления в следующем порядке:

  • Байт 1: значение красного цвета (тип цвета красный)
  • Байт 2: значение зеленого цвета (тип цвета зеленый)
  • Байт 3: значение синего цвета (тип цвета синий)

Например, рассмотрим цвет, в котором значения красного / зеленого / синего являются десятичными числами: красный = 36, зеленый = 104, синий = 160 (серовато-синий цвет). Десятичные числа 36, 104 и 160 эквивалентны шестнадцатеричным числам 24, 68 и A0 соответственно. Шестнадцатеричный триплет получается объединением шести шестнадцатеричных цифр вместе, в данном примере 2468A0.

Если любое из трех значений цвета меньше 10 шестнадцатеричных (16 десятичных), оно должно быть представлено с начальным нулем, чтобы триплет всегда имел ровно шесть цифр. Например, десятичная тройка 4, 8, 16 будет представлена ​​шестнадцатеричными цифрами 04, 08, 10, образуя шестнадцатеричную тройку 040810.

Количество цветов, которые могут быть представлены этой системой - 16.6 или 2563 или 224 = 16,777,216.

Сокращенная шестнадцатеричная форма

Используется сокращенная трехзначная (шестнадцатеричная) форма.[5] Расширить эту форму до шестизначной формы так же просто, как удвоить каждую цифру: 09C становится 0099CC, как показано на следующем рисунке. CSS пример:

.трехзначный { цвет: # 09C;    }.шестизначный   { цвет: # 0099CC; } / * того же цвета, что и выше * /

Эта сокращенная форма сокращает палитру до 4096 цветов, что эквивалентно 12-битному цвету, в отличие от 24-битного цвета с использованием всей шестизначной формы (16 777 216 цветов). Этого ограничения достаточно для многих текстовых документов.

Преобразование RGB в шестнадцатеричный

Смотрите также: Шестнадцатеричный § Преобразование

Значения RGB обычно задаются в диапазоне 0–255; если они находятся в диапазоне 0–1, перед преобразованием значения умножаются на 255. Это число, разделенное на шестнадцать (целочисленное деление; игнорирование остатка), дает первую шестнадцатеричную цифру (от 0 до F, где буквы от A до F представляют числа от 10 до 15. См. шестнадцатеричный Больше подробностей). Остаток дает вторую шестнадцатеричную цифру. Например, значение 201 RGB делится на 12 групп по 16, таким образом, первая цифра - C. Остаток от девяти дает шестнадцатеричное число C9. Этот процесс повторяется для каждого из трех значений цвета.

Преобразование между основами счисления - обычная функция калькуляторов, включая как портативные модели, так и программные калькуляторы, входящие в состав большинства современных калькуляторов. операционные системы. Также доступны веб-инструменты, специально предназначенные для преобразования значений цвета.

Названия цветов HTML

Недавний W3C спецификации названий цветов различают базовый и расширенный цвета.[6]

Основные цвета

Основные цвета - это 16 цветов, определенных в HTML Спецификация 4.01, ратифицирована в 1999 г.,[7] следующим образом (имена определены в этом контексте без учета регистра):

Названия цветов CSS 1–2.0, HTML 3.2–4 и VGA.
ИмяШестигранник
(RGB)		красный
(RGB)		Зеленый
(RGB)		Синий
(RGB)		Оттенок
(HSL / HSV)		Суббота.
(HSL)		Свет
(HSL)		Суббота.
(HSV)		Ценить
(HSV)		Номер CGA (название); псевдоним
белый#FFFFFF100%100%100%0°0%100%0%100%15 (белый)
Серебро# C0C0C075%75%75%0°0%75%0%75%07 (светло-серый)
серый#80808050%50%50%0°0%50%0%50%08 (темно-серый)
Чернить#0000000%0%0%0°0%0%0%0%00 (черный)
красный# FF0000100%0%0%0°100%50%100%100%12 (высокий красный)
Бордовый#80000050%0%0%0°100%25%100%50%04 (низкий красный)
Желтый# FFFF00100%100%0%60°100%50%100%100%14 (желтый)
Оливковое#80800050%50%0%60°100%25%100%50%06 (коричневый)
Лайм# 00FF000%100%0%120°100%50%100%100%10 (ярко-зеленый); зеленый
Зеленый#0080000%50%0%120°100%25%100%50%02 (низкий зеленый)
Аква# 00FFFF0%100%100%180°100%50%100%100%11 (высокий голубой); голубой
Бирюзовый#0080800%50%50%180°100%25%100%50%03 (низкий голубой)
Синий# 0000FF0%0%100%240°100%50%100%100%09 (ярко-синий)
военно-морской#0000800%0%50%240°100%25%100%50%01 (низкий синий)
Фуксия# FF00FF100%0%100%300°100%50%100%100%13 (насыщенный пурпурный); пурпурный
Фиолетовый#80008050%0%50%300°100%25%100%50%05 (слабый пурпурный)

Эти 16 были помечены как sRGB и включены в спецификацию HTML 3.0, в которой отмечалось, что они являются «стандартными 16 цветами, поддерживаемыми Windows. VGA палитра ".[8]

Расширенные цвета

Версия SVG названий цветов X11

Расширенные цвета являются результатом объединения спецификаций пользовательских интерфейсов HTML 4.01, CSS 2.0, SVG 1.0 и CSS3 (CSS3 UI).[6]

Количество цветов определяется веб-браузеры. Определенный браузер может распознавать не все эти цвета, но с 2005 года все современные графические браузеры общего назначения поддерживают полный список цветов. Многие из этих цветов входят в список Названия цветов X11 распространяется с X Window System. Эти цвета были стандартизированы SVG 1.0, и принимаются SVG Полный пользовательские агенты. Они не являются частью SVG Tiny.

Список цветов, поставляемых с продуктом X11, варьируется в зависимости от реализации и конфликтует с некоторыми именами HTML, такими как зеленый. Цвета X11 определяются как простые RGB (следовательно, нет определенного цветового пространства), а не sRGB. Это означает, что список цветов в X11 (например, в /usr/lib/X11/rgb.txt) не должен использоваться напрямую для выбора цветов для Интернета.[9]

Список веб-"цветов X11" из спецификации CSS3 вместе с их шестнадцатеричными и десятичными эквивалентами показан ниже. Сравните алфавитные списки в стандартах W3C. Сюда входят общие синонимы: голубой (стандартное имя HTML4 / CSS 1.0) и голубой (общее имя sRGB), пурпурный (обычное имя sRGB) и фуксия (стандартное имя HTML4 / CSS 1.0), серый (стандартное имя HTML4 / CSS 1.0) и серый.[10][11]

HTML имяR G B
ШестигранникДесятичный
Розовые цвета
Средний фиолетовый красныйC7 15 85199  21 133
Темно-розовыйFF 14 93255  20 147
Бледно-фиолетовыйКрасныйDB 70 93219 112 147
Ярко-розовыйFF 69 B4255 105 180
Светло-розовыйFF B6 C1255 182 193
РозовыйFF C0 CB255 192 203
Красные цвета
Темно-красный8B 00 00139   0   0
красныйFF 00 00255   0   0
Огнеупорный кирпичB2 22 22178  34  34
малиновый цветDC 14 3C220  20  60
ИндийскийКрасныйCD 5C 5C205  92  92
LightCoralF0 80 80240 128 128
ЛососьFA 80 72250 128 114
Темный лососьE9 96 7A233 150 122
Светлый лососьFF A0 7A255 160 122
Оранжевые цвета
Оранжево-красныйFF 45 00255  69   0
ПомидорFF 63 47255  99  71
Темно-оранжевыйFF 8C 00255 140   0
КоралловыйFF 7F 50255 127  80
апельсинFF A5 00255 165   0
Желтые цвета
Темный хакиBD B7 6B189 183 107
ЗолотоFF D7 00255 215   0
Цвет хакиF0 E6 8C240 230 140
ПерсикпаффFF DA B9255 218 185
ЖелтыйFF FF 00255 255   0
БледныйEE E8 AA238 232 170
МокасиныFF E4 B5255 228 181
ПапайяFF EF D5255 239 213
СветЗолотоходЖелтыйFA FA D2250 250 210
Лимонный шифонFF FA CD255 250 205
Светло-желтыйFF FF E0255 255 224
Коричневые цвета
Бордовый80 00 00128   0   0
коричневыйA5 2A 2A165  42  42
СедлоКоричневый8B 45 13139  69  19
СиеннаA0 52 2D160  82  45
ШоколадD2 69 1E210 105  30
ТемныйB8 86 0B184 134  11
ПеруCD 85 3F205 133  63
Розово-коричневыйBC 8F 8F188 143 143
ЗолотарникDA A5 20218 165  32
SandyBrownF4 A4 60244 164  96
ЗагарD2 B4 8C210 180 140
BurlywoodDE B8 87222 184 135
ПшеницаF5 DE B3245 222 179
НавахоБелыйFF DE AD255 222 173
БискFF E4 C4255 228 196
БланшированныйFF EB CD255 235 205
Кукурузные рыльцаFF F8 DC255 248 220
HTML имяR G B
ШестигранникДесятичный
Зеленые цвета
Темно-зеленый00 64 00  0 100   0
Зеленый00 80 00  0 128   0
Темно-оливковый55 6Б 2Ф 85 107  47
Зеленый лес22 8Б 22 34 139  34
Цвет морской волны2Э 8Б 57 46 139  87
Оливковое80 80 00128 128   0
OliveDrab6B 8E 23107 142  35
СреднийМореЗеленый3C B3 71 60 179 113
LimeGreen32 CD 32 50 205  50
Лайм00 FF 00  0 255   0
ВеснаЗеленый00 FF 7F  0 255 127
СреднийВеснаЗеленый00 FA 9A  0 250 154
ТемноМореЗеленый8F BC 8F143 188 143
СреднийАквамарин66 CD AA102 205 170
Желто-зеленый9А КД 32154 205  50
ГазонЗеленый7C FC 00124 252   0
Шартрез7F FF 00127 255   0
Светло-зеленый90 EE 90144 238 144
Желто-зеленыйAD FF 2F173 255  47
Бледно-зеленый98 FB 98152 251 152
Голубые цвета
Бирюзовый00 80 80  0 128 128
DarkCyan00 8B 8B  0 139 139
СветМореЗеленый20 B2 AA 32 178 170
КадетСиний5F 9E A0 95 158 160
Темно-бирюзовый00 CE D1  0 206 209
СреднийБирюзовый48 D1 CC 72 209 204
Бирюзовый40 E0 D0 64 224 208
Аква00 FF FF  0 255 255
Голубой00 FF FF  0 255 255
Аквамарин7F FF D4127 255 212
Бледно-бирюзовыйAF EE EE175 238 238
LightCyanE0 FF FF224 255 255
Синие цвета
военно-морской00 00 80  0   0 128
Темно-синий00 00 8B  0   0 139
СреднийСиний00 00 CD  0   0 205
Синий00 00 FF  0   0 255
Темно-синий19 19 70 25  25 112
Королевский синий41 69 E1 65 105 225
Стальной синий46 82 B4 70 130 180
ДоджерСиний1E 90 FF 30 144 255
DeepSkyBlue00 BF FF  0 191 255
ВасилекСиний64 95 ED100 149 237
Голубое небо87 CE EB135 206 235
СветНебоСиний87 CE FA135 206 250
СветСтальСинийB0 C4 DE176 196 222
Светло-синийAD D8 E6173 216 230
ПорошокСинийB0 E0 E6176 224 230
HTML имяR G B
ШестигранникДесятичный
Фиолетовый, фиолетовый и пурпурный цвета
Индиго4B 00 82 75   0 130
Фиолетовый80 00 80128   0 128
Темно-пурпурный8B 00 8B139   0 139
Темно-фиолетовый94 00 D3148   0 211
ТемныйПланшетСиний48 3Д 8Б 72  61 139
Сине-фиолетовый8A 2B E2138  43 226
Темная Орхидея99 32 CC153  50 204
ФуксияFF 00 FF255   0 255
ПурпурныйFF 00 FF255   0 255
SlateBlue6A 5A CD106  90 205
СреднийSlateBlue7B 68 EE123 104 238
Средняя ОрхидеяBA 55 D3186  85 211
СреднийФиолетовый93 70 ДБ147 112 219
ОрхидеяDA 70 D6218 112 214
фиолетовыйEE 82 EE238 130 238
сливаDD A0 DD221 160 221
ЧертополохD8 BF D8216 191 216
ЛавандаE6 E6 FA230 230 250
Белые цвета
MistyRoseFF E4 E1255 228 225
АнтичныйБелыйFA EB D7250 235 215
ШерстьFA F0 E6250 240 230
БежевыйF5 F5 DC245 245 220
Белый дымF5 F5 F5245 245 245
ЛавандаFF F0 F5255 240 245
OldLaceFD F5 E6253 245 230
АлисаСинийF0 F8 FF240 248 255
Морская ракушкаFF F5 EE255 245 238
ПризракБелыйF8 F8 FF248 248 255
НектарF0 FF F0240 255 240
ЦветочныйБелыйFF FA F0255 250 240
ЛазурьF0 FF FF240 255 255
MintCreamF5 FF FA245 255 250
СнегFF FA FA255 250 250
Слоновая костьFF FF F0255 255 240
белыйFF FF FF255 255 255
Серый и черный цвета
Чернить00 00 00  0   0   0
ТемныйПланшетСерый2 этаж 4 этаж 4 этаж 47  79  79
DimGray69 69 69105 105 105
Шифер серый70 80 90112 128 144
серый80 80 80128 128 128
СветПланшетСерый77 88 99119 136 153
Темно-серыйA9 A9 A9169 169 169
СереброC0 C0 C0192 192 192
Светло-серыйD3 D3 D3211 211 211
GainsboroПостоянный ток постоянный ток постоянный ток220 220 220

Безопасные для Интернета цвета

Глубина цвета
Связанный

В середине 1990-х годов многие дисплеи могли отображать только 256 цветов.[12] Они могут быть продиктованы аппаратным обеспечением или изменяться с помощью «таблицы цветов». Когда обнаруживается (например, на изображении) цвет, которого нет в наличии, необходимо было использовать другой цвет. Это можно сделать либо используя ближайший цвет, либо используя дизеринг.

Были разные попытки сделать «стандартную» цветовую палитру. Требовался набор цветов, который можно было отображать без размытия на 256-цветных дисплеях; число 216 было выбрано отчасти потому, что компьютерные операционные системы обычно оставляли от шестнадцати до двадцати цветов для собственного использования; он также был выбран, потому что он позволяет точно шесть равномерно распределенных оттенков красного, зеленого и синего (6 × 6 × 6 = 216), каждый от 00 до FF (включая оба предела).

Список цветов представлен так, как если бы он обладал особыми свойствами, которые делают их невосприимчивыми к сглаживанию, но на 256-цветных дисплеях приложения могут фактически устанавливать палитру любого набора цветов, который они выбирают, сглаживая остальные. Эти цвета были выбраны специально потому, что они соответствовали палитрам, выбранным различными браузерами. В разных браузерах не было очень разных палитр.[нужна цитата ]

"Веб-безопасные" цвета имели недостаток в таких системах, как X11 там, где палитра разделяется между приложениями, браузеры выделяют меньшие цветные кубы (5 × 5 × 5 или 4 × 4 × 4) - «безопасные для Интернета» цвета в таких системах будут размываться. Разные результаты были получены за счет предоставления изображения с большим диапазоном цветов и разрешения браузеру квантовать цветового пространства, если необходимо, вместо того, чтобы страдать от потери качества двойного квантования.

В течение 2000-х годов использование 256-цветных дисплеев в персональных компьютерах резко упало в пользу 24-битных (Истинный цвет ) отображает,[13] и использование "безопасных для Интернета" цветов вышло из употребления.

Не все "веб-безопасные" цвета имеют стандартные имена, но каждый может быть определен RGB триплет: каждый компонент (красный, зеленый и синий) принимает одно из шести значений из следующей таблицы (из 256 возможных значений, доступных для каждого компонента в полном 24-битном цвете).

6 оттенков каждого цвета
КлючШестигранникДесятичныйДробная часть
00000
333510.2
6661020.4
9991530.6
C или (12)CC2040.8
F или (15)FF2551

В следующей таблице показаны все "веб-безопасные" цвета. Одним из недостатков веб-палитры является небольшой диапазон светлых цветов для фона веб-страницы, в то время как интенсивности в нижней части диапазона, например, два самых темных, похожи друг на друга, что затрудняет их различение. Значения, отмеченные знаком «*» (звездочка), являются частью «действительно безопасной палитры»; видеть Самые безопасные веб-цвета, ниже.

Таблица цветов

216 веб-безопасных цветов
*000*300600900C00* F00 *
*003*303603903C03* F03 *
006306606906C06F06
009309609909C09F09
00C30C60C90CC0CF0C
* 00F *30F60F90FC0F* F0F *
030330630930C30F30
033333633933C33F33
036336636936C36F36
039339639939C39F39
03C33C63C93CC3CF3C
03F33F63F93FC3FF3F
060360660960C60F60
063363663963C63F63
066366666966C66F66
069369669969C69F69
06C36C66C96CC6CF6C
06F36F66F96FC6FF6F
090390690990C90F90
093393693993C93F93
096396696996C96F96
099399699999C99F99
09C39C69C99CC9CF9C
09F39F69F99FC9FF9F
0C03C06C09C0CC0FC0
0C33C36C39C3CC3FC3
0C63C66C69C6CC6FC6
0C93C96C99C9CC9FC9
0CC3CC6CC9CCCCCFCC
0CF3CF6CF9CFCCFFCF
* 0F0 *3F0* 6F0 *9F0CF0* FF0 *
0F3* 3F3 ** 6F3 *9F3CF3* FF3 *
* 0F6 ** 3F6 *6F69F6* CF6 ** FF6 *
0F93F96F99F9CF9FF9
* 0FC ** 3FC *6FC9FCCFCFFC
* 0FF ** 3FF ** 6FF *9FFCFF* FFF *

каждый перечисленный цветовой код является сокращением для значения RGB; например, код 609 эквивалентен коду RGB 102-0-153 или HEX-коду # 660099


Самые безопасные веб-цвета

Дизайнерам было рекомендовано придерживаться этих 216 «безопасных для Интернета» цветов на своих веб-сайтах, потому что при разработке 216-цветовой палитры было много 8-битных цветных дисплеев. Дэвид Лен и Хэдли Стерн обнаружили, что только 22 из 216 цветов в веб-палитре надежно отображаются без непоследовательного переназначения на 16-битные компьютерные дисплеи. Они назвали эти 22 цвета «действительно безопасной палитрой»; он состоит в основном из оттенков зеленого, желтого и синего, как показано в таблице ниже.[14]

Самые безопасные веб-цвета
0369CF
00*000** F00 *
03*003** F03 *
06
0C
0F* 00F ** F0F *
F0* 0F0 ** 6F0 ** FF0 *
F3* 3F3 ** 6F3 ** FF3 *
F6* 0F6 ** 3F6 ** CF6 ** FF6 *[15]
FC* 0FC ** 3FC *
FF* 0FF ** 3FF ** 6FF ** FFF *

CSS цвета

В Каскадные таблицы стилей спецификация определяет то же количество названных цветов, что и спецификация HTML 4, а именно 16 html цвета и 124 цвета из Netscape X11 цвет Всего 140 имен, которые были распознаны Internet Explorer (IE) 3.0 и Netscape Navigator 3.0.[16] Blooberry.com отмечает, что Opera 2.1 и Safari 1 также включали расширенный список Netscape из 140 названий цветов, но позже обнаружил 14 названий, не включенных в Opera 3.5 в Windows 98.[17]

В CSS 2.1 оранжевый цвет (один из 140) был добавлен в раздел с 16 цветами HTML4 в качестве 17-го цвета.[18] Спецификация CSS3.0 не включала апельсин в разделе «Ключевые слова цвета HTML4», который был переименован в «Ключевые слова основного цвета».[19] В том же справочнике раздел «Ключевые слова цвета SVG» был переименован в «Ключевые слова расширенного цвета» после того, как в предыдущем рабочем проекте он начинался как «Ключевые слова цвета X11».[20] Рабочий черновик цветового модуля CSS4 объединяет основные и расширенные разделы вместе в простой раздел «Именованные цвета».[21]

Цвет добавлен в CSS 2.1
ИмяШестигранник
(RGB)		красный
(RGB)		Зеленый
(RGB)		Синий
(RGB)		Оттенок
(HSL / HSV)		Суббота.
(HSL)		Свет
(HSL)		Суббота.
(HSV)		Ценить
(HSV)		Псевдоним
апельсин# FFA500100%65%0%39°100%50%100%100%

CSS 2, SVG и CSS 2.1 позволяют веб-авторам использовать системные цвета, которые представляют собой названия цветов, значения которых взяты из Операционная система, выбирая цвет выделенного текста операционной системы или цвет фона для элементов управления всплывающей подсказки. Это позволяет веб-авторам стилизовать свой контент в соответствии с операционной системой пользовательского агента.[22] В CSS3 цветной модуль имеет устарел использование системных цветов в пользу свойства CSS3 UI System Appearance,[23][24] который впоследствии был исключен из CSS3.[25]

В разрабатываемой спецификации CSS3 также представлены Цветовое пространство HSL значения в таблицы стилей:[26]

 / * Модель RGB * / п { цвет: # F00 } / * #rgb * / п { цвет: # FF0000 } / * #rrggbb * / п { цвет: rgb(255, 0, 0) } / * целочисленный диапазон 0-255 * / п { цвет: rgb(100%, 0%, 0%) } / * диапазон значений 0,0% - 100,0% * / / * RGB с альфа-каналом, добавленный в CSS3 * / п { цвет: rgba(255, 0, 0, 0.5) } / * Непрозрачность 0,5, полупрозрачный * / / * Модель HSL, добавленная в CSS3 * / п { цвет: HSL(0, 100%, 50%) } /* красный */ п { цвет: HSL(120, 100%, 50%) } /* зеленый */ п { цвет: HSL(120, 100%, 25%) } /* темно-зеленый */ п { цвет: HSL(120, 100%, 75%) } /* светло-зеленый */ п { цвет: HSL(120, 50%, 50%) } / * пастельно-зеленый * / / * Модель HSL с альфа-каналом * / п { цвет: hsla(120, 100%, 50%, 1) } /* зеленый */ п { цвет: hsla(120, 100%, 50%, 0.5) } / * полупрозрачный зеленый * / п { цвет: hsla(120, 100%, 50%, 0.1) } / * очень прозрачный зеленый * /

21 июня 2014 г. CSS WG добавила цвет RebeccaPurple в редакционный проект CSS4 Модуль цветов, чтобы отметить Эрик Мейер дочь Ребекка, умершая 7 июня 2014 года, когда ей исполнилось шесть лет.[27]

Цвет добавлен в модуль цветов CSS4
ИмяШестигранник
(RGB)		красный
(RGB)		Зеленый
(RGB)		Синий
(RGB)		Оттенок
(HSL / HSV)		Суббота.
(HSL)		Свет
(HSL)		Суббота.
(HSV)		Ценить
(HSV)		Псевдоним
РебеккаФиолетовый#66339940%20%60%270°50%40%67%60%

CSS также поддерживает специальный цвет прозрачный, который представляет значение альфа, равное нулю; по умолчанию, прозрачный отображается как невидимый номинальный черный цвет: rgba (0, 0, 0, 0).[21]

Доступность

Выбор цвета

Немного браузеры и устройства не поддерживают цвета. Для этих дисплеев или для слепых и дальтоников веб-контент, зависящий от цветов, может быть непригодным или трудным в использовании.

Либо не следует указывать цвета (чтобы вызвать цвета браузера по умолчанию), либо следует указать и фон, и все цвета переднего плана (например, цвета простого текста, непосещенных ссылок, зависших ссылок, активных ссылок и посещенных ссылок), чтобы избежать черный на черном или же белый на белом последствия.[28]

Цветовой контраст

В Рекомендации по доступности веб-контента рекомендуется коэффициент контрастности не менее 4,5: 1 между относительная яркость текста и его цвет фона[29] или как минимум 3: 1 для крупного текста. Для повышения доступности требуется коэффициент контрастности более 7: 1.

Однако решение проблем доступности - это не просто вопрос увеличения контрастности. В качестве отчета Инициатива веб-доступности указывает,[30] Читателям с дислексией лучше подходит коэффициент контрастности ниже максимального. Рекомендации, к которым они относятся: не совсем черный (0x0A0A0A) и не совсем белый (0xFFFFE5) и черный (0x000000) крем (0xFAFAC8) имеют коэффициент контрастности 11,7: 1 и 20,3: 1 соответственно. Среди других цветовых пар коричневый (0x282800) на темно-зеленом (0xA0A000) имеет коэффициент контрастности 3,24: 1, что меньше, чем у WCAG рекомендация: темно-коричневый (0x1E1E00) на светло-зеленом (0xB9B900) имеет коэффициент контрастности 4,54: 1, а синий (0x00007D) на желтом (0xFFFF00) имеет коэффициент контрастности 11,4: 1. Обратите внимание, что для цветов, названных в отчете, используются значения цвета, отличные от одноименных веб-цветов.

Смотрите также

Рекомендации

  1. ^ Нидерст Роббинс, Дженнифер (февраль 2006 г.). «Приложение D: Определение цвета». Веб-дизайн в двух словах. О'Рейли. п. 830. ISBN  978-0-596-00987-8.
  2. ^ Йорк, Ричард. Начиная с CSSС. 71–72.
  3. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). "Цветовой модуль CSS, уровень 3". W3C. раздел 4.2.1. Цветовые значения RGB.
  4. ^ Справочник по цифровым цветным изображениям Гаурав Шарма. ISBN  0-8493-0900-X
  5. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.1. Цветовые значения RGB». Цветовой модуль CSS, уровень 3. W3C. Получено 19 марта 2013.
  6. ^ а б "Цветовой модуль CSS, уровень 3". W3c. Получено 19 июля 2020.
  7. ^ «HTML 4.01, раздел 6.5 спецификации» Цвета"". W3.org. Получено 8 июля 2013.
  8. ^ «Спецификация HTML 3.2» Элемент BODY"". W3.org. Получено 8 июля 2013.
  9. ^ "Публичное обсуждение в списке рассылки SVG Re: названия цветов в SVG-1.0 конфликтуют с /usr/lib/X11/rgb.txt". Lists.w3.org. Получено 8 июля 2013.
  10. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.3. Расширенные цветные ключевые слова». Цветовой модуль CSS, уровень 3. W3C. Получено 19 марта 2013.
  11. ^ "W3C TR SVG 1.0, распознанные названия ключевых слов цвета". W3.org. 16 августа 2011 г.. Получено 1 февраля 2019.
  12. ^ Дженкинс, Сью (27 декабря 2012 г.). МФУ для веб-дизайна для чайников. Джон Вили и сыновья. ISBN  9781118404119.
  13. ^ «Статистика отображения браузера». W3schools.com. Получено 8 июля 2013.
  14. ^ "Смерть цветовой палитры Websafe?". Physics.ohio-state.edu. Получено 8 июля 2013.
  15. ^ "Цветная веб-справка - HTML со стилем | 4 | Веб-ссылка". www.webreference.com. Получено 5 января 2016.
  16. ^ "Набор цветов X11". Получено 6 июля 2014.
  17. ^ Брайан Уилсон. «Цвета в HTML и CSS». Получено 6 июля 2014.
  18. ^ «Спецификация CSS 2.1: синтаксис и основные типы данных: цвета». 8 сентября 2009 г.. Получено 21 декабря 2009.
  19. ^ «CSS Color Module Level 3 - Предлагаемая рекомендация - 11. Изменения». 28 октября 2010 г.. Получено 6 июля 2014.
  20. ^ "Цветовой модуль CSS, уровень 3 - Рабочий проект". 18 апреля 2002 г.. Получено 6 июля 2014.
  21. ^ а б Цветовой модуль CSS, уровень 4 - черновик редактора, 26 июня 2014 г.
  22. ^ «Пользовательский интерфейс - Системные цвета». W3.org. Получено 8 июля 2013.
  23. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.5.1. Системные цвета CSS2». Цветовой модуль CSS, уровень 3. W3C. Получено 19 марта 2013.
  24. ^ «Модуль базового интерфейса пользователя CSS3, кандидат в рекомендации W3C от 11 мая 2004 г .: Внешний вид системы». W3.org. Получено 8 июля 2013.
  25. ^ Челик, Тантек, изд. (17 января 2012 г.). «Список существенных изменений». Модуль базового пользовательского интерфейса CSS, уровень 3. W3C. Получено 19 марта 2013. Системный внешний вид был удален, включая значения внешнего вида и свойства, а также системные шрифты / расширение сокращения свойства font.
  26. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.4. Цветовые значения HSL». Цветовой модуль CSS, уровень 3. W3C. Получено 19 марта 2013.
  27. ^ Глазман, Даниэль (21 июня 2014 г.). "Re: [CfC] добавление 'rebeccapurple' в CSS Color Level 4". Отправить в список рассылки в стиле www. W3C. Получено 24 июн 2014.
  28. ^ «Если вы выберете один цвет, выберите их все». W3.org. Получено 8 июля 2013.
  29. ^ Руководство WCAG 2.0 1.4
  30. ^ Оптимальные цвета для улучшения читаемости для людей с дислексией

внешняя ссылка