Веб-цвета
| 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 :
.threedigit { color: #09C; }
.sixdigit { color: #0099CC; } /* same color as above */
Эта сокращенная форма уменьшает палитру до 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 ] следующим образом (имена определяются в этом контексте без учета регистра):
| Имя | Шестигранник (РГБ) |
Красный (РГБ) |
Зеленый (РГБ) |
Синий (РГБ) |
Хюэ (ХСЛ/ХСВ) |
Содержит. (ХСЛ) |
Свет (ХСЛ) |
Содержит. (ВПГ) |
Ценить (ВПГ) |
номер 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 ]
Расширенные цвета
[ редактировать ]
Расширенные цвета являются результатом объединения спецификаций 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 |
| Небесно-голубой | 87 ЦЕБ | 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 ]
| Имя | Шестигранник (РГБ) |
Красный (РГБ) |
Зеленый (РГБ) |
Синий (РГБ) |
Хюэ (ХСЛ/ХСВ) |
Содержит. (ХСЛ) |
Свет (ХСЛ) |
Содержит. (ВПГ) |
Ценить (ВПГ) |
Псевдоним |
|---|---|---|---|---|---|---|---|---|---|---|
| Апельсин | #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 model */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
/* RGB with alpha channel, added to CSS3 */
p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */
/* HSL model, added to 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 model with alpha channel */
p { color: hsla(120, 100%, 50%, 1) } /* green */
p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */
CSS также поддерживает специальный цвет transparent, который представляет нулевое значение альфа; по умолчанию, transparent отображается как невидимый номинальный черный цвет: rgba(0, 0, 0, 0). Он был представлен в CSS1, но сфера его использования в каждой версии расширилась. [ 23 ]
CSS-цвет 4
[ редактировать ]Уровень 4 спецификации CSS Color представил несколько новых цветовых форматов CSS. [ 24 ]
Помимо новых способов записи цветов, в нем также представлена концепция смешивания цветов в цветовом пространстве, отличном от sRGB, что является первым шагом на пути к исправлению известной проблемы, связанной с цветовыми градиентами . некоторые разделы, объясняющие теорию цвета и общие операции, такие как сопоставление гаммы . Для облегчения реализации также добавлены [ 24 ]
Независимый от устройства цвет
[ редактировать ]CSS Color 4 представляет несколько различных форматов независимого от устройства цвета , которые могут отображать весь видимый цвет (на соответствующем экране), в том числе: [ 25 ]
- Лаборатория и LCH
- OKLab и OKLCH (предпочтительнее Lab/LCH) [ 24 ] : §§9.2–3
- XYZ (D50 или D65 [по умолчанию])
Предопределенные цветовые пространства
[ редактировать ] ряд пространств RGB с гаммой , более широкой, чем sRGB. В новом стандарте также представлен color() функция: [ 25 ]
Линеаризованный вариант sRGB также определен для смешивания цветов. [ 24 ]
Другие форматы
[ редактировать ]21 июня 2014 года рабочая группа CSS добавила цвет RebeccaPurple в редакторский проект модуля «Цвета» уровня 4 в память о дочери Эрика Мейера Ребекке, которая умерла 7 июня 2014 года, в свой шестой день рождения. [ 26 ]
| Имя | Шестигранник (РГБ) |
Красный (РГБ) |
Зеленый (РГБ) |
Синий (РГБ) |
Хюэ (ХСЛ/ХСВ) |
Содержит. (ХСЛ) |
Свет (ХСЛ) |
Содержит. (ВПГ) |
Ценить (ВПГ) |
Псевдоним |
|---|---|---|---|---|---|---|---|---|---|---|
| РебеккаПурпурный | #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-битном цвете).
| Ключ | Шестигранник | Десятичный | Фракция |
|---|---|---|---|
| 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 |
В следующей таблице показаны все «безопасные для Интернета» цвета. Одним из недостатков веб-палитры является небольшой диапазон светлых цветов для фона веб-страницы, тогда как интенсивности в нижней части диапазона, например два самых темных, похожи друг на друга, что затрудняет их различение. Значения, отмеченные «*» (звездочкой), являются частью «действительно безопасной палитры»; см. раздел «Самые безопасные веб-цвета» ниже.
Таблица цветов
[ редактировать ]| *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* | 9FF | КФФ | *ФФФ* |
Каждый указанный цветовой код является сокращением значения RGB. Например, код 609 эквивалентен коду RGB 102-0-153 или HEX-коду #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. Цвета, указанные в отчете, используют другие значения цвета, чем одноименные веб-цвета.
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Нидерст Роббинс, Дженнифер (февраль 2006 г.). «Приложение D: Определение цвета». Коротко о веб-дизайне . О'Рейли. п. 830. ИСБН 978-0-596-00987-8 .
- ^ Йорк, Ричард. Начало CSS , стр. 71–72.
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «Модуль цвета CSS, уровень 3» . W3C. раздел 4.2.1. Цветовые значения RGB.
- ^ Шарма, Гаурав; Бала, Раджа (19 декабря 2017 г.). Справочник по цифровой цветной визуализации . ЦРК Пресс. ISBN 978-1-4200-4148-4 .
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.1. Цветовые значения RGB» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
- ^ Перейти обратно: а б «Модуль цвета CSS, уровень 3» . W3c . Проверено 19 июля 2020 г.
- ^ Пауэлл, Томас А. (2010). HTML и CSS: Полный справочник, пятое издание . Нью-Йорк: МакГроу-Хилл. п. 765. ИСБН 9780071741705 .
- ^ «Спецификация HTML 4.01 | Основные типы данных HTML | Цвета» . W3C . Проверено 8 июля 2013 г.
- ^ Рэггетт, Дэйв. «Справочная спецификация HTML 3.2 | Элемент BODY» . W3C . Проверено 8 июля 2013 г.
- ^ Лилли, Крис (24 апреля 2002 г.). «Re: названия цветов в SVG-1.0 конфликтуют с /usr/lib/X11/rgb.txt» . Архивы публичных списков рассылки W3C . Проверено 8 июля 2013 г.
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.3. Расширенные ключевые слова цвета» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
- ^ «Масштабируемая векторная графика (SVG) 1.1 (второе издание) | Основные типы данных и интерфейсы | Распознанные названия ключевых слов цвета» . W3C. 16 августа 2011 года . Проверено 1 февраля 2019 г.
- ^ «Набор цветов X11» . Компьютерные технологии и сети в Вышке . Архивировано из оригинала 14 июля 2014 года . Проверено 6 июля 2014 г.
- ^ Брайан Уилсон. «Цвета в HTML и CSS» . blooberry.com . Проверено 6 июля 2014 г.
- ^ «Спецификация CSS 2.1: Синтаксис и основные типы данных: Цвета» . W3C . 8 сентября 2009 года . Проверено 21 декабря 2009 г.
- ^ «Модуль цвета CSS, уровень 3 – Предлагаемая рекомендация – 11. Изменения» . W3C . 28 октября 2010 г. Проверено 6 июля 2014 г.
- ^ «Модуль CSS3: Цвет | Рабочий проект» . W3C . 18 апреля 2002 года . Проверено 6 июля 2014 г.
- ^ Перейти обратно: а б «Модуль цвета CSS, уровень 4 – Именованные цвета» .
- ^ «Пользовательский интерфейс – Системные цвета» . W3C . Проверено 8 июля 2013 г.
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.5.1. Системные цвета CSS2» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
- ^ «Модуль базового пользовательского интерфейса CSS3 | Внешний вид системы» . W3C . Проверено 8 июля 2013 г.
- ^ Челик, Тантек, изд. (17 января 2012 г.). «Перечень существенных изменений» . Модуль базового пользовательского интерфейса CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
Внешний вид системы был удален, включая значения внешнего вида и свойства, а также системные шрифты/расширение сокращенного свойства «шрифт».
- ^ Перейти обратно: а б Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.4. Цветовые значения HSL» . Модуль цвета CSS, уровень 3 . W3C . Проверено 19 марта 2013 г.
- ^ Перейти обратно: а б с д «Модуль цвета CSS, уровень 4» . W3C . Проверено 14 марта 2022 г.
- ^ Перейти обратно: а б «Модуль цвета CSS, уровень 4: обзор» . W3C . Проверено 11 января 2022 г.
- ^ Глазман, Дэниел (21 июня 2014 г.). «Re: [CfC] добавление «rebeccapurple» к уровню цвета CSS 4» . Публикуйте в списке рассылки в стиле www . W3C . Проверено 24 июня 2014 г.
- ^ Перейти обратно: а б Модуль цвета CSS, уровень 5
- ^ Дженкинс, Сью (27 декабря 2012 г.). Веб-дизайн «все в одном» для чайников . Джон Уайли и сыновья. ISBN 9781118404119 .
- ^ «Статистика отображения браузера» . W3Школы . Проверено 8 июля 2013 г.
- ^ Лен, Дэвид; Стерн, Хэдли. «Смерть цветовой палитры Websafe?» . asc.ohio-state.edu. Архивировано из оригинала 3 марта 2021 года . Проверено 3 марта 2021 г.
- ^ Пипероглу, Стефанос (13 декабря 2000 г.). «Справочник по веб-цветам — HTML со стилем | 4» . Вебссылка . Архивировано из оригинала 23 ноября 2016 года . Проверено 5 января 2016 г.
- ^ «Если вы выберете один цвет, выберите их все» . W3C . Проверено 8 июля 2013 г.
- ^ Руководство WCAG 2.0 1.4
- ^ Оптимальные цвета для улучшения читаемости для людей с дислексией
Внешние ссылки
[ редактировать ]
Цветовые темы |
|---|
