✖


Jump to content

Веб-цвета

(Перенаправлено из шестнадцатеричного цвета )

HTML
Сравнения

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

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

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

Шестнадцатеричный тройник

[ редактировать ]

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

  • Байт 1: значение красного цвета (тип цвета красный)
  • Байт 2: значение зеленого цвета (тип цвета зеленый)
  • Байт 3: значение синего цвета (тип цвета синий)
  • Байт 4 (необязательный): альфа-значение.

Например, рассмотрим цвет, в котором значения красного/зеленого/синего представляют собой десятичные числа: красный = 123, зеленый = 58, синий = 30 (коричневый цвет твердой древесины). Десятичные числа 123, 58 и 30 эквивалентны шестнадцатеричным числам 7B, 3A и 1E соответственно. Шестнадцатеричный триплет получается путем объединения шести шестнадцатеричных цифр, в этом примере 7B3A1E.

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

Число цветов, которые можно представить в этой системе, равно 16. 6 или 256 3 или 2 24 = 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. см. в разделе «Шестнадцатеричные Дополнительные сведения числа»). Остаток дает вторую шестнадцатеричную цифру. Например, значение RGB 58 (как показано в предыдущем примере шестнадцатеричных троек) делится на 3 группы по 16, таким образом, первая цифра равна 3. Остаток десяти дает шестнадцатеричное число 3A. Аналогично, значение RGB 201 делится на 12 групп по 16, поэтому первая цифра — это C. Остаток девять дает шестнадцатеричное число C9. Этот процесс повторяется для каждого из трех значений цвета.

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

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

[ редактировать ]

В последних спецификациях названий цветов W3C различаются базовые и расширенные цвета. [6] В HTML и XHTML цвета могут использоваться для текста, цвета фона, границ фреймов, таблиц и отдельных ячеек таблиц. [7]

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

[ редактировать ]

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

Названия цветов CSS 1–2.0, HTML 3.2–4 и VGA.
Имя Шестигранник
(РГБ) 		Красный
(РГБ) 		Зеленый
(РГБ) 		Синий
(РГБ) 		Хюэ
(ХСЛ/ХСВ) 		Содержит.
(ХСЛ) 		Свет
(ХСЛ) 		Содержит.
(ВПГ) 		Ценить
(ВПГ) 		номер CGA (имя); псевдоним
Белый #FFFFFF 100% 100% 100% 0 ° 0% 100% 0% 100% 15 (белый)
Серебро #C0C0C0 75% 75% 75% 0 ° 0% 75% 0% 75% 07 (светло-серый)
Серый #808080 50% 50% 50% 0 ° 0% 50% 0% 50% 08 (темно-серый)
Черный #000000 0% 0% 0% 0 ° 0% 0% 0% 0% 00 (черный)
Красный #FF0000 100% 0% 0% 0 ° 100% 50% 100% 100% 12 (ярко-красный)
Бордовый #800000 50% 0% 0% 0 ° 100% 25% 100% 50% 04 (низкий красный)
Желтый #FFFF00 100% 100% 0% 60 ° 100% 50% 100% 100% 14 (желтый)
Оливковое #808000 50% 50% 0% 60 ° 100% 25% 100% 50% 06 (коричневый)
Лайм #00FF00 0% 100% 0% 120 ° 100% 50% 100% 100% 10 (высоко-зеленый); зеленый
Зеленый #008000 0% 50% 0% 120 ° 100% 25% 100% 50% 02 (низкий зеленый)
Аква #00FFFF 0% 100% 100% 180 ° 100% 50% 100% 100% 11 (ярко-голубой); голубой
Бирюзовый #008080 0% 50% 50% 180 ° 100% 25% 100% 50% 03 (низкий голубой)
Синий #0000FF 0% 0% 100% 240 ° 100% 50% 100% 100% 09 (ярко-синий)
Военно-морской #000080 0% 0% 50% 240 ° 100% 25% 100% 50% 01 (низкий синий)
Фуксия #FF00FF 100% 0% 100% 300 ° 100% 50% 100% 100% 13 (ярко-пурпурный); пурпурный
Фиолетовый #800080 50% 0% 50% 300 ° 100% 25% 100% 50% 05 (низкий пурпурный)

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

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

[ редактировать ]
SVG-версия названий цветов X11
Именованные цвета SVG1.1 с шестнадцатеричными/десятеричными кодами sRGB и HSL с разрешением UHD (4K).

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

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

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

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

HTML- имя RGB
Шестигранник Десятичный
Розовые цвета
СреднийФиолетовыйКрасный C71585 199, 21, 133
Диппинк FF1493 255, 20, 147
БледныйФиолетовыйКрасный ДБ7093 219, 112, 147
ХотПинк FF69B4 255, 105, 180
Светло-Розовый FFB6C1 255, 182, 193
Розовый FFC0CB 255, 192, 203
Красные цвета
Темно-красный 8B0000 139, 0, 0
Красный FF0000 255, 0, 0
огнеупорный кирпич Б22222 178, 34, 34
малиновый DC143C 220, 20, 60
ИндийскийКрасный CD5C5C 205, 92, 92
СветКоралловый F08080 240, 128, 128
Лосось FA8072 250, 128, 114
ДаркСалмон E9967A 233, 150, 122
СветлыйЛосось FFA07A 255, 160, 122
Оранжевые цвета
ОранжевыйКрасный ФФ4500 255, 69, 0
Помидор FF6347 255, 99, 71
Темно-оранжевый FF8C00 255, 140, 0
Коралл FF7F50 255, 127, 80
Апельсин ФФА500 255, 165, 0
Желтые цвета
ТемныйХаки БДБ76Б 189, 183, 107
Золото ФФД700 255, 215, 0
Хаки F0E68C 240, 230, 140
ПерсикСлоеное FFDAB9 255, 218, 185
Желтый ФФФФ00 255, 255, 0
БледныйЗолотарник ЕЕЕ8АА 238, 232, 170
Мокасины ФФЭ4Б5 255, 228, 181
ПапайяКнут ДФО5 255, 239, 213
СветЗолотарникЖелтый ШИРОКИЙ 2 250, 250, 210
ЛимонШифон ФФФАКД 255, 250, 205
СветлыйЖелтый ФФФФЕ0 255, 255, 224
Коричневые цвета
Бордовый 800000 128, 0, 0
Коричневый А52А2А 165, 42, 42
СедлоКоричневый 8Б4513 139, 69, 19
Сиенна A0522D 160, 82, 45
Шоколад D2691E 210, 105, 30
ТемныйЗолотарник B8860B 184, 134, 11
Перу CD853F 205, 133, 63
РозиБраун BC8F8F 188, 143, 143
Золотарник ДАА520 218, 165, 32
СэндиБраун F4A460 244, 164, 96
Тан D2B48C 210, 180, 140
Берливуд ДЕБ887 222, 184, 135
Пшеница F5DEB3 245, 222, 179
НавахоБелый ФДЕАД 255, 222, 173
Бисквит FFE4C4 255, 228, 196
БланшированныйМиндаль ФФЕБКД 255, 235, 205
кукурузный шёлк FFF8DC 255, 248, 220
HTML- имя RGB
Шестигранник Десятичный
Фиолетовый, фиолетовый и пурпурный цвета
Индиго 4B0082 75, 0, 130
Фиолетовый 800080 128, 0, 128
Темно-пурпурный 8B008B 139, 0, 139
Темно-фиолетовый 9400D3 148, 0, 211
ТемныйШиферСиний 483D8B 72, 61, 139
СинийФиолетовый 8А2ВЕ2 138, 43, 226
ТемнаяОрхидея 9932CC 153, 50, 204
Фуксия ФФ00ФФ 255, 0, 255
Пурпурный ФФ00ФФ 255, 0, 255
ШиферСиний 6А5АСД 106, 90, 205
СреднийСланецСиний 7Б68ЭЭ 123, 104, 238
СредняяОрхидея БА55Д3 186, 85, 211
СреднийФиолетовый 9370ДБ 147, 112, 219
Орхидея ДА70Д6 218, 112, 214
Фиолетовый EE82EE 238, 130, 238
слива ДДА0ДД 221, 160, 221
Чертополох D8BFD8 216, 191, 216
Лаванда E6E6FA 230, 230, 250
Синие цвета
ПолночьСиний 191970 25, 25, 112
Военно-морской 000080 0, 0, 128
Темно-синий 00008B 0, 0, 139
СреднийСиний 0000CD 0, 0, 205
Синий 0000FF 0, 0, 255
КоролевскийСиний 4169E1 65, 105, 225
СтальСиний 4682B4 70, 130, 180
ДоджерСиний 1Э90ФФ 30, 144, 255
DeepSkyBlue 00BFFF 0, 191, 255
ВасилекСиний 6495ED 100, 149, 237
Небесно-голубой 87CEEB 135, 206, 235
СветНебоСиний 87 СЕФА 135, 206, 250
СветСтальСиний B0C4DE 176, 196, 222
Светло-синий АДД8Е6 173, 216, 230
ПорошокСиний B0E0E6 176, 224, 230
Голубые цвета
Бирюзовый 008080 0, 128, 128
Темно-голубой 008B8B 0, 139, 139
СветМореЗеленый 20Б2АА 32, 178, 170
КадетСиний 5F9EA0 95, 158, 160
Темно-бирюзовый 00CED1 0, 206, 209
СреднийБирюзовый 48D1CC 72, 209, 204
Бирюзовый 40E0D0 64, 224, 208
Аква 00FFFF 0, 255, 255
Голубой 00FFFF 0, 255, 255
Аквамарин 7FFFD4 127, 255, 212
БледныйБирюзовый АФЕЕЕ 175, 238, 238
Светло-голубой E0FFFF 224, 255, 255
HTML- имя RGB
Шестигранник Десятичный
Зеленые цвета
Темно-Зеленый 006400 0, 100, 0
Зеленый 008000 0, 128, 0
ТемныйОливковыйЗеленый 556Б2Ф 85, 107, 47
ЛесЗеленый 228Б22 34, 139, 34
Морской Зеленый 2Э8Б57 46, 139, 87
Оливковое 808000 128, 128, 0
OliveDrab 6Б8Е23 107, 142, 35
СреднийМореЗеленый 3CB371 60, 179, 113
ЛаймовыйЗеленый 32CD32 50, 205, 50
Лайм 00FF00 0, 255, 0
ВесеннийЗеленый 00FF7F 0, 255, 127
СреднийВеснаЗеленый 00FA9A 0, 250, 154
ТемноМореЗеленый 8FBC8F 143, 188, 143
СреднийАквамарин 66 КДАА 102, 205, 170
ЖелтыйЗеленый 9ACD32 154, 205, 50
ГазонЗеленый 7CFC00 124, 252, 0
Шартрез 7FFF00 127, 255, 0
Светло-Зеленый 90EE90 144, 238, 144
ЗеленыйЖелтый ADFF2F 173, 255, 47
Бледно-Зеленый 98FB98 152, 251, 152
Белые цвета
МистиРоуз ФФЭ4Е1 255, 228, 225
АнтичныйБелый ФАЭБД7 250, 235, 215
Шерсть FAF0E6 250, 240, 230
Бежевый F5F5DC 245, 245, 220
БелыйДым Ф5Ф5Ф5 245, 245, 245
ЛавандаРумяна FFF0F5 255, 240, 245
OldLace ФДФ5Е6 253, 245, 230
АлисаСиний F0F8FF 240, 248, 255
ракушка FFF5EE 255, 245, 238
ПризракБелый F8F8FF 248, 248, 255
Нектар F0FFF0 240, 255, 240
ЦветочныйБелый FFFAF0 255, 250, 240
Лазурный F0FFFF 240, 255, 255
Мятно-кремовый F5FFFA 245, 255, 250
Снег ФФФАФА 255, 250, 250
слоновая кость ФФФФФ0 255, 255, 240
Белый ФФФФФФ 255, 255, 255
Серый и черный цвета
Черный 000000 0, 0, 0
ТемныйСланецСерый 2Ф4Ф4Ф 47, 79, 79
ДимГрей 696969 105, 105, 105
ШиферСерый 708090 112, 128, 144
Серый 808080 128, 128, 128
СветСланецСерый 778899 119, 136, 153
Темно-серый А9А9А9 169, 169, 169
Серебро C0C0C0 192, 192, 192
Светло-серый Д3Д3Д3 211, 211, 211
Гейнсборо DCDCDC 220, 220, 220

CSS-цвета

[ редактировать ]

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

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

Цвет добавлен в CSS 2.1.
Имя Шестигранник
(РГБ) 		Красный
(РГБ) 		Зеленый
(РГБ) 		Синий
(РГБ) 		Хюэ
(ХСЛ/ХСВ) 		Содержит.
(ХСЛ) 		Свет
(ХСЛ) 		Содержит.
(ВПГ) 		Ценить
(ВПГ) 		Псевдоним
Апельсин #FFA500 100% 65% 0% 39 ° 100% 50% 100% 100%

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

Пример ключевых слов системного цвета
Появление Ключевое слово
ссылкаТекст
посещенный текст
активный текст
выделять
отметка

Спецификация CSS3 также вводит значения цветового пространства HSL в таблицы стилей: [23] 

/* модель RGB */  p   {   цвет  :   #F00   }   /* #rgb */  p   {   цвет  :   #FF0000   }   /* #rrggbb */  p   {   цвет  :   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   {   цвет  :   hsl  (  120  ,   100  %  ,   50  %  )   }   /* зеленый */  p   {   цвет  :   hsl  (  120  ,   100  %  ,   25  %  )   }   /* темно-зеленый */  p   {   цвет  :   hsl  (  120  ,   100  %  ,   75  %  )   }   /* светло-зеленый */  p   {   color  :   hsl  (  120  ,   50  %  ,   50  %  )   }   /* пастельно-зеленый */  /* модель HSL с альфа-каналом */  p   {   color  :   hsla  (  120  ,   100  % )  ,   50  %  ,   1  )   }   /* зеленый */  p   {   цвет  :   hsla  (  120  ,   100  %  ,   50  %  ,   0.5  )   }   /* полупрозрачный зеленый */  p   {   цвет  :   hsla  (  120  ,   100  %  ,   50  % )  ,   0.1  )   }   /* очень прозрачный зеленый */

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

CSS-цвет 4

[ редактировать ]

Уровень 4 спецификации CSS Color представил несколько новых цветовых форматов CSS. [24]

Помимо новых способов записи цветов, в нем также представлена ​​концепция смешивания цветов в цветовом пространстве, отличном от sRGB, что является первым шагом на пути к исправлению известной проблемы, связанной с цветовыми градиентами . некоторые разделы, объясняющие теорию цвета и общие операции, такие как сопоставление гаммы . Для облегчения реализации также добавлены [24]

Независимый от устройства цвет

[ редактировать ]

CSS Color 4 представляет несколько различных форматов независимого от устройства цвета , которые могут отображать весь видимый цвет (на соответствующем экране), в том числе: [25]

Предопределенные цветовые пространства

[ редактировать ]

ряд пространств RGB с гаммой , более широкой, чем sRGB. В новом стандарте также представлен color() функция: [25]

Линеаризованный вариант sRGB также определен для смешивания цветов. [24]

Другие форматы

[ редактировать ]

21 июня 2014 года рабочая группа CSS добавила цвет RebeccaPurple в редакторский проект модуля «Цвета» уровня 4 в память о дочери Эрика Мейера Ребекке, которая умерла 7 июня 2014 года, в свой шестой день рождения. [26]

Цвет добавлен в модуль цветов CSS4.
Имя Шестигранник
(РГБ) 		Красный
(РГБ) 		Зеленый
(РГБ) 		Синий
(РГБ) 		Хюэ
(ХСЛ/ХСВ) 		Содержит.
(ХСЛ) 		Свет
(ХСЛ) 		Содержит.
(ВПГ) 		Ценить
(ВПГ) 		Псевдоним
РебеккаПурпурный #663399 40% 20% 60% 270 ° 50% 40% 67% 60%

CSS4 также представляет цветовую модель HWB в качестве альтернативы HSL/HSV. [18]

CSS-цвет 5

[ редактировать ]

Черновой вариант CSS Color 5 [27] спецификация представляет синтаксис для смешивания и управления существующими цветами, в том числе:

  • А color-mix() функция смешивания цветов
  • Синтаксис относительного цвета для управления компонентами существующего цвета.

Пользовательские цветовые пространства также поддерживаются через профили ICC . Это позволяет использовать CMYK на веб-страницах. [27]

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

[ редактировать ]
Глубина цвета
Связанный

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

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

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

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

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

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

6 оттенков каждого цвета
Ключ Шестигранник Десятичный Фракция
0 00 0 0
3 33 51 0.2
6 66 102 0.4
9 99 153 0.6
С (12) СС 204 0.8
Ф (15) ФФ 255 1

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

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

[ редактировать ]
216 веб-безопасных цветов
*000* 300 600 900 С00 *F00*
*003* 303 603 903 С03 *F03*
006 306 606 906 С06 F06
009 309 609 909 C09 F09
00С 30С 60С 90С С0С F0C
*00F* 30F 60F 90F C0F *F0F*
030 330 630 930 С30 F30
033 333 633 933 С33 Ф33
036 336 636 936 С36 Ф36
039 339 639 939 С39 Ф39
03С 33С 63С 93С C3C F3C
03F 33F 63F 93F C3F Ф3Ф
060 360 660 960 С60 Ф60
063 363 663 963 С63 F63
066 366 666 966 С66 F66
069 369 669 969 С69 F69
06С 36С 66С 96С C6C F6C
06F 36F 66Ф 96Ф C6F F6F
090 390 690 990 С90 F90
093 393 693 993 С93 F93
096 396 696 996 С96 F96
099 399 699 999 С99 F99
09С 39С 69С 99С C9C F9C
09F 39F 69F 99F C9F F9F
0C0 3С0 6С0 9С0 CC0 ФК0
0C3 3С3 6С3 9С3 СС3 ФК3
0C6 3C6 6С6 9С6 СС6 ФК6
0C9 3C9 6С9 9С9 СС9 ФК9
0CC 3CC 6СС 9СС CCC ФКС
0CF 3CF 6CF 9CF CCF свободный денежный поток
*0F0* 3F0 *6F0* 9F0 CF0 *FF0*
0F3 *3F3* *6F3* 9F3 CF3 *ФФ3*
*0F6* *3F6* 6F6 9F6 *CF6* *FF6*
0F9 3F9 6F9 9F9 CF9 ФФ9
*0FC* *3FC* 6ФК 9ФК ХФУ ФФК
*0ФФ* *3FF* *6FF* 9ФФ КФФ *ФФФ*

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

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

[ редактировать ]

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

Самые безопасные веб-цвета
Р--
-ГБ
0 3 6 9 С Ф
00 *000* *F00*
03 *003* *F03*
06
09
0С
0Ф *00F* *F0F*
⋮ ⋮
Ф0 *0F0* *6F0* *FF0*
F3 *3F3* *6F3* *ФФ3*
F6 *0F6* *3F6* *CF6* *FF6*
F9
ФК *0FC* *3FC*
ФФ *0ФФ* *3FF* *6FF* *ФФФ*

Доступность

[ редактировать ]

Выбор цвета

[ редактировать ]

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

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

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

[ редактировать ]

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

Однако решение проблем доступности — это не просто вопрос увеличения коэффициента контрастности. Как указывается в отчете Инициативы по обеспечению доступности веб-сайтов , [34] Для читателей с дислексией лучше использовать коэффициент контрастности ниже максимального. Рекомендации, на которые они ссылаются, — «грязно-черный» (#0A0A0A) «грязно-белый» (#FFFFE5) и «черный» (#000000) на кремовом (#FAFAC8) имеют коэффициенты контрастности 11,7:1 и 20,3:1 соответственно. Среди других цветовых пар коричневый (#282800) на темно-зеленом (#A0A000) имеет коэффициент контрастности 3,24:1, что меньше рекомендации WCAG , темно-коричневый (#1E1E00) на светло-зеленом (#B9B900) имеет контрастность. коэффициент контрастности 4,54:1, а синий (#00007D) на желтом (#FFFF00) имеет коэффициент контрастности 11,4:1. Цвета, указанные в отчете, используют другие значения цвета, чем одноименные веб-цвета.

См. также

[ редактировать ]

Ссылки

[ редактировать ]
  1. ^ Нидерст Роббинс, Дженнифер (февраль 2006 г.). «Приложение D: Определение цвета». Коротко о веб-дизайне . О'Рейли. п. 830. ИСБН  978-0-596-00987-8 .
  2. ^ Йорк, Ричард. Начало CSS , стр. 71–72.
  3. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «Модуль цвета CSS, уровень 3» . W3C. раздел 4.2.1. Цветовые значения RGB.
  4. ^ Шарма, Гаурав; Бала, Раджа (19 декабря 2017 г.). Справочник по цифровой цветной визуализации . ЦРК Пресс. ISBN  978-1-4200-4148-4 .
  5. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.1. Цветовые значения RGB» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
  6. ^ Перейти обратно: а б «Модуль цвета CSS, уровень 3» . W3c . Проверено 19 июля 2020 г.
  7. ^ Пауэлл, Томас А. (2010). HTML и CSS: Полный справочник, пятое издание . Нью-Йорк: МакГроу-Хилл. п. 765. ИСБН  9780071741705 .
  8. ^ «Спецификация HTML 4.01 | Основные типы данных HTML | Цвета» . W3C . Проверено 8 июля 2013 г.
  9. ^ Рэггетт, Дэйв. «Справочная спецификация HTML 3.2 | Элемент BODY» . W3C . Проверено 8 июля 2013 г.
  10. ^ Лилли, Крис (24 апреля 2002 г.). «Re: названия цветов в SVG-1.0 конфликтуют с /usr/lib/X11/rgb.txt» . Архивы публичных списков рассылки W3C . Проверено 8 июля 2013 г.
  11. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.3. Расширенные ключевые слова цвета» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
  12. ^ «Масштабируемая векторная графика (SVG) 1.1 (второе издание) | Основные типы данных и интерфейсы | Распознанные названия ключевых слов цвета» . W3C. 16 августа 2011 года . Проверено 1 февраля 2019 г.
  13. ^ «Набор цветов X11» . Вычисления и сети в Вышке . Архивировано из оригинала 14 июля 2014 года . Проверено 6 июля 2014 г.
  14. ^ Брайан Уилсон. «Цвета в HTML и CSS» . blooberry.com . Проверено 6 июля 2014 г.
  15. ^ «Спецификация CSS 2.1: Синтаксис и основные типы данных: Цвета» . W3C . 8 сентября 2009 года . Проверено 21 декабря 2009 г.
  16. ^ «Модуль цвета CSS, уровень 3 – Предлагаемая рекомендация – 11. Изменения» . W3C . 28 октября 2010 г. Проверено 6 июля 2014 г.
  17. ^ «Модуль CSS3: Цвет | Рабочий проект» . W3C . 18 апреля 2002 года . Проверено 6 июля 2014 г.
  18. ^ Перейти обратно: а б «Модуль цвета CSS, уровень 4 – Именованные цвета» .
  19. ^ «Пользовательский интерфейс – Системные цвета» . W3C . Проверено 8 июля 2013 г.
  20. ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.5.1. Системные цвета CSS2» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
  21. ^ «Модуль базового пользовательского интерфейса CSS3 | Внешний вид системы» . W3C . Проверено 8 июля 2013 г.
  22. ^ Челик, Тантек, изд. (17 января 2012 г.). «Перечень существенных изменений» . Модуль базового пользовательского интерфейса CSS, уровень 3 . W3C . Проверено 19 марта 2013 г. Внешний вид системы был удален, включая значения и свойства внешнего вида, а также системные шрифты/расширение сокращенного свойства «шрифт».
  23. ^ Перейти обратно: а б Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.4. Цветовые значения HSL» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
  24. ^ Перейти обратно: а б с д «Модуль цвета CSS, уровень 4» . W3C . Проверено 14 марта 2022 г.
  25. ^ Перейти обратно: а б «Модуль цвета CSS, уровень 4: обзор» . W3C . Проверено 11 января 2022 г.
  26. ^ Глазман, Дэниел (21 июня 2014 г.). «Re: [CfC] добавление «rebeccapurple» к уровню цвета CSS 4» . Публикуйте в списке рассылки в стиле www . W3C . Проверено 24 июня 2014 г.
  27. ^ Перейти обратно: а б Модуль цвета CSS, уровень 5
  28. ^ Дженкинс, Сью (27 декабря 2012 г.). Веб-дизайн «все в одном» для чайников . Джон Уайли и сыновья. ISBN  9781118404119 .
  29. ^ «Статистика отображения браузера» . W3Школы . Проверено 8 июля 2013 г.
  30. ^ Лен, Дэвид; Стерн, Хэдли. «Смерть цветовой палитры Websafe?» . asc.ohio-state.edu. Архивировано из оригинала 3 марта 2021 года . Проверено 3 марта 2021 г.
  31. ^ Пипероглу, Стефанос (13 декабря 2000 г.). «Справочник по веб-цветам — HTML со стилем | 4» . Вебссылка . Архивировано из оригинала 23 ноября 2016 года . Проверено 5 января 2016 г.
  32. ^ «Если вы выберете один цвет, выберите их все» . W3C . Проверено 8 июля 2013 г.
  33. ^ Руководство WCAG 2.0 1.4
  34. ^ Оптимальные цвета для улучшения читаемости для людей с дислексией
[ редактировать ]
Retrieved from "https://en.wikipedia.org/w/index.php?title=Web_colors&oldid=1233862920"
Arc.Ask3.Ru: конец переведенного документа.
Arc.Ask3.Ru
Номер скриншота №: 408fd74164d09ca3cb57e2087c88e678__1720676820
URL1:https://arc.ask3.ru/arc/aa/40/78/408fd74164d09ca3cb57e2087c88e678.html
Заголовок, (Title) документа по адресу, URL1:
Web colors - Wikipedia
Данный printscreen веб страницы (снимок веб страницы, скриншот веб страницы), визуально-программная копия документа расположенного по адресу URL1 и сохраненная в файл, имеет: квалифицированную, усовершенствованную (подтверждены: метки времени, валидность сертификата), открепленную ЭЦП (приложена к данному файлу), что может быть использовано для подтверждения содержания и факта существования документа в этот момент времени. Права на данный скриншот принадлежат администрации Ask3.ru, использование в качестве доказательства только с письменного разрешения правообладателя скриншота. Администрация Ask3.ru не несет ответственности за информацию размещенную на данном скриншоте. Права на прочие зарегистрированные элементы любого права, изображенные на снимках принадлежат их владельцам. Качество перевода предоставляется как есть. Любые претензии, иски не могут быть предъявлены. Если вы не согласны с любым пунктом перечисленным выше, вы не можете использовать данный сайт и информация размещенную на нем (сайте/странице), немедленно покиньте данный сайт. В случае нарушения любого пункта перечисленного выше, штраф 55! (Пятьдесят пять факториал, Денежную единицу (имеющую самостоятельную стоимость) можете выбрать самостоятельно, выплаичвается товарами в течение 7 дней с момента нарушения.)