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: значение синего цвета (тип цвета синий)
Например, рассмотрим цвет, в котором значения красного / зеленого / синего являются десятичными числами: красный = 36, зеленый = 104, синий = 160 (серовато-синий цвет). Десятичные числа 36, 104 и 160 эквивалентны шестнадцатеричным числам 24, 68 и A0 соответственно. Шестнадцатеричный триплет получается объединением шести шестнадцатеричных цифр, в данном примере 2468A0.
Если любое из трех значений цвета меньше 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. Подробнее см. В шестнадцатеричной системе ). Остаток дает вторую шестнадцатеричную цифру. Например, значение 201 RGB делится на 12 групп по 16, таким образом, первая цифра - C. Остаток от девяти дает шестнадцатеричное число C9. Этот процесс повторяется для каждого из трех значений цвета.
Преобразование между основами счисления - обычная особенность калькуляторов, включая как портативные модели, так и программные калькуляторы, входящие в состав большинства современных операционных систем . Также доступны веб-инструменты, специально предназначенные для преобразования значений цвета.
Названия цветов HTML [ править ]
В последних спецификациях W3C для названий цветов проводится различие между основными и расширенными цветами. [6] В HTML и XHTML цвета могут использоваться для текста, цвета фона, границ фреймов, таблиц и отдельных ячеек таблицы. [7]
Основные цвета [ править ]
Основные цвета - это 16 цветов, определенных в спецификации HTML 4.01, ратифицированной в 1999 г. [8], следующим образом (имена определены в этом контексте без учета регистра):
Имя | Шестнадцатеричный (RGB) | Красный (RGB) | Зеленый (RGB) | Синий (RGB) | Оттенок (HSL / HSV) | Суббота. (HSL) | Свет (HSL) | Суббота. (HSV) | Значение (HSV) | Номер 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), пурпурный (обычное имя sRGB) и фуксия (стандартное имя HTML4 / CSS 1.0), серый (стандартное имя HTML4 / CSS 1.0) и серый. [11] [12]
HTML имя | RGB | |
---|---|---|
Шестигранник | Десятичная дробь | |
Розовые цвета | ||
Средний фиолетовый красный | C7 15 85 | 199 21 133 |
Темно-розовый | FF 14 93 | 255 20 147 |
Бледно-фиолетовыйКрасный | DB 70 93 | 219 112 147 |
Ярко-розовый | FF 69 B4 | 255 105 180 |
Светло-розовый | FF B6 C1 | 255 182 193 |
Розовый | FF C0 CB | 255 192 203 |
Красные цвета | ||
Темно-красный | 8B 00 00 | 139 0 0 |
красный | FF 00 00 | 255 0 0 |
Огнеупорный кирпич | B2 22 22 | 178 34 34 |
малиновый цвет | DC 14 3C | 220 20 60 |
ИндийскийКрасный | CD 5C 5C | 205 92 92 |
LightCoral | F0 80 80 | 240 128 128 |
Лосось | FA 80 72 | 250 128 114 |
Темный лосось | E9 96 7A | 233 150 122 |
Светлый лосось | FF A0 7A | 255 160 122 |
Оранжевые цвета | ||
Оранжево-красный | FF 45 00 | 255 69 0 |
Помидор | FF 63 47 | 255 99 71 |
Темно-оранжевый | FF 8C 00 | 255 140 0 |
Коралловый | FF 7F 50 | 255 127 80 |
апельсин | FF A5 00 | 255 165 0 |
Желтые цвета | ||
Темный хаки | BD B7 6B | 189 183 107 |
Золото | FF D7 00 | 255 215 0 |
Цвет хаки | F0 E6 8C | 240 230 140 |
Персикпафф | FF DA B9 | 255 218 185 |
Желтый | FF FF 00 | 255 255 0 |
Бледный | EE E8 AA | 238 232 170 |
Мокасины | FF E4 B5 | 255 228 181 |
Папайя | FF EF D5 | 255 239 213 |
СветЗолотоходЖелтый | FA FA D2 | 250 250 210 |
Лимонный шифон | FF FA CD | 255 250 205 |
Светло-желтый | FF FF E0 | 255 255 224 |
Коричневые цвета | ||
Бордовый | 80 00 00 | 128 0 0 |
коричневый | A5 2A 2A | 165 42 42 |
СедлоКоричневый | 8B 45 13 | 139 69 19 |
Сиенна | A0 52 2D | 160 82 45 |
Шоколад | D2 69 1E | 210 105 30 |
Темный | B8 86 0B | 184 134 11 |
Перу | CD 85 3F | 205 133 63 |
Розово-коричневый | BC 8F 8F | 188 143 143 |
Золотарник | DA A5 20 | 218 165 32 |
SandyBrown | F4 A4 60 | 244 164 96 |
Загар | D2 B4 8C | 210 180 140 |
Burlywood | DE B8 87 | 222 184 135 |
Пшеница | F5 DE B3 | 245 222 179 |
НавахоБелый | FF DE AD | 255 222 173 |
Биск | FF E4 C4 | 255 228 196 |
Бланшированный | FF EB CD | 255 235 205 |
Кукурузные рыльца | FF F8 DC | 255 248 220 |
HTML имя | RGB | |
---|---|---|
Шестигранник | Десятичная дробь | |
Зеленые цвета | ||
Темно-зеленый | 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 00 | 128 128 0 |
OliveDrab | 6B 8E 23 | 107 142 35 |
СреднийМореЗеленый | 3C B3 71 | 60 179 113 |
Лаймзеленый | 32 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 8F | 143 188 143 |
СреднийАквамарин | 66 CD AA | 102 205 170 |
Желтый зеленый | 9А КД 32 | 154 205 50 |
ГазонЗеленый | 7C FC 00 | 124 252 0 |
Шартрез | 7F FF 00 | 127 255 0 |
Светло-зеленый | 90 EE 90 | 144 238 144 |
Желто-зеленый | AD FF 2F | 173 255 47 |
Бледно-зеленый | 98 FB 98 | 152 251 152 |
Голубые цвета | ||
Бирюзовый | 00 80 80 | 0 128 128 |
DarkCyan | 00 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 D4 | 127 255 212 |
Бледно-бирюзовый | AF EE EE | 175 238 238 |
LightCyan | E0 FF FF | 224 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 |
DeepSkyBlue | 00 BF FF | 0 191 255 |
ВасилекСиний | 64 95 ED | 100 149 237 |
Голубое небо | 87 CE EB | 135 206 235 |
СветНебоСиний | 87 CE FA | 135 206 250 |
СветСтальСиний | B0 C4 DE | 176 196 222 |
Светло-синий | AD D8 E6 | 173 216 230 |
ПудраСиний | B0 E0 E6 | 176 224 230 |
HTML имя | RGB | |
---|---|---|
Шестигранник | Десятичная дробь | |
Фиолетовый, фиолетовый и пурпурный цвета | ||
Индиго | 4B 00 82 | 75 0130 |
Пурпурный | 80 00 80 | 128 0 128 |
Темно-пурпурный | 8B 00 8B | 139 0 139 |
Темно-фиолетовый | 94 00 D3 | 148 0 211 |
ТемныйПланшетСиний | 48 3Д 8Б | 72 61 139 |
Сине-фиолетовый | 8A 2B E2 | 138 43 226 |
Темная Орхидея | 99 32 куб. | 153 50 204 |
Фуксия | FF 00 FF | 255 0 255 |
Пурпурный | FF 00 FF | 255 0 255 |
SlateBlue | 6A 5A CD | 106 90 205 |
СреднийШифтСиний | 7B 68 EE | 123 104 238 |
Средняя Орхидея | BA 55 D3 | 186 85 211 |
СреднийФиолетовый | 93 70 ДБ | 147 112 219 |
Орхидея | DA 70 D6 | 218 112 214 |
Виолетта | EE 82 EE | 238 130 238 |
слива | DD A0 DD | 221 160 221 |
Чертополох | D8 BF D8 | 216 191 216 |
Лаванда | E6 E6 FA | 230 230 250 |
Белые цвета | ||
MistyRose | FF E4 E1 | 255 228 225 |
АнтичныйБелый | FA EB D7 | 250 235 215 |
Шерсть | FA F0 E6 | 250 240 230 |
Бежевый | F5 F5 DC | 245 245 220 |
Белый дым | F5 F5 F5 | 245 245 245 |
Бледно-лиловый | FF F0 F5 | 255 240 245 |
OldLace | FD F5 E6 | 253 245 230 |
АлисаСиний | F0 F8 FF | 240 248 255 |
Морская ракушка | FF F5 EE | 255 245 238 |
ПризракБелый | F8 F8 FF | 248 248 255 |
Нектар | F0 FF F0 | 240 255 240 |
ЦветочныйБелый | FF FA F0 | 255 250 240 |
Лазурь | F0 FF FF | 240 255 255 |
MintCream | F5 FF FA | 245 255 250 |
Снег | FF FA FA | 255 250 250 |
Слоновая кость | FF FF F0 | 255 255 240 |
белый | FF FF FF | 255 255 255 |
Серый и черный цвета | ||
Чернить | 00 00 00 | 0 0 0 |
ТемныйПланшетСерый | 2 этаж 4 этаж 4 этаж | 47 79 79 |
DimGray | 69 69 69 | 105 105 105 |
Шифер серый | 70 80 90 | 112 128 144 |
серый | 80 80 80 | 128 128 128 |
СветПланшетСерый | 77 88 99 | 119 136 153 |
Темно-серый | A9 A9 A9 | 169 169 169 |
Серебряный | C0 C0 C0 | 192 192 192 |
Светло-серый | D3 D3 D3 | 211 211 211 |
Gainsboro | Постоянный ток постоянный ток постоянный ток | 220 220 220 |
Цвета CSS [ править ]
Спецификация каскадных таблиц стилей определяет то же количество именованных цветов, что и спецификация HTML 4, а именно 16 цветов HTML и 124 цвета из списка цветов Netscape X11, всего 140 имен, которые были распознаны Internet Explorer (IE) 3.0 и Netscape Navigator 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]
Имя | Шестнадцатеричный (RGB) | Красный (RGB) | Зеленый (RGB) | Синий (RGB) | Оттенок (HSL / HSV) | Суббота. (HSL) | Свет (HSL) | Суббота. (HSV) | Значение (HSV) | Псевдоним |
---|---|---|---|---|---|---|---|---|---|---|
апельсин | # FFA500 | 100% | 65% | 0% | 39 ° | 100% | 50% | 100% | 100% |
CSS 2, SVG и CSS 2.1 позволяют веб-авторам использовать системные цвета , которые представляют собой названия цветов, значения которых берутся из операционной системы , выбирая цвет выделенного текста операционной системы или цвет фона для элементов управления всплывающей подсказки. Это позволяет веб-авторам стилизовать свой контент в соответствии с операционной системой пользовательского агента. [19] CSS3 Модуль цвет не рекомендуется использование системных цветов в пользу CSS3 системы пользовательского интерфейса Внешний вид собственности, [20] [21] , который сам по себе был впоследствии исключен из CSS3. [22]
Спецификация CSS3 также вводит значения цветового пространства HSL в таблицы стилей: [23]
/ * Модель RGB * / p { color : # F00 } / * #rgb * / p { color : # FF0000 } / * #rrggbb * / p { color : rgb ( 255 , 0 , 0 ) } / * целочисленный диапазон 0 - 255 * / p { color : rgb ( 100 % , 0 % , 0 % ) } / * диапазон значений 0,0% - 100,0% * / / * RGB с альфа-каналом, добавленный в CSS3 * / p { color : rgba ( 255 , 0 , 0 , 0,5 ) } / * непрозрачность 0,5, полупрозрачный * / / * Модель HSL, добавленная в CSS3 * / p { color : hsl ( 0 , 100 % , 50 % ) } / * красный * / p { color : hsl ( 120 , 100 % , 50 % ) } / * зеленый * / p { color : hsl ( 120 , 100 % , 25 % ) } / * темно-зеленый * / p { color : hsl( 120 , 100 % , 75 % ) } / * светло-зеленый * / p { color : hsl ( 120 , 50 % , 50 % ) } / * пастельно-зеленый * / / * Модель HSL с альфа-каналом * / p { color : hsla ( 120 , 100 % , 50 % , 1 ) } / * зеленый * / p { color : hsla ( 120 , 100 % , 50 % , 0.5 ) } / * полупрозрачный зеленый * / p { color : hsla ( 120 , 100 % , 50 % , 0,1 ) } / * очень прозрачный зеленый * /
CSS Color 4 [ править ]
В этом разделе отсутствует информация о цветовых пространствах, отличных от sRGB, в проекте CSS Color Module Level 4 draft. Январь 2021 г. ) ( |
21 июня 2014 года рабочая группа CSS добавила цвет RebeccaPurple к уровню 4 редактора «Черновик модуля цветов» в ознаменование дочери Эрика Мейера Ребекки, умершей 7 июня 2014 года, в ее шестой день рождения. [24]
Имя | Шестнадцатеричный (RGB) | Красный (RGB) | Зеленый (RGB) | Синий (RGB) | Оттенок (HSL / HSV) | Суббота. (HSL) | Свет (HSL) | Суббота. (HSV) | Значение (HSV) | Псевдоним |
---|---|---|---|---|---|---|---|---|---|---|
РебеккаФиолетовый | # 663399 | 40% | 20% | 60% | 270 ° | 50% | 40% | 67% | 60% |
CSS также поддерживает специальный цвет transparent
, который представляет нулевое альфа-значение; По умолчанию, transparent
отображаются как невидимый номинальной черный: rgba(0, 0, 0, 0)
. [18]
CSS Color 5 [ править ]
Этот раздел пуст. Вы можете помочь, добавив к нему . ( Февраль 2021 г. ) |
Безопасные для Интернета цвета [ править ]
Глубина цвета |
---|
|
Связанный |
|
В середине 1990-х многие дисплеи могли отображать только 256 цветов. [25] Они могут быть продиктованы аппаратным обеспечением или изменяться с помощью «таблицы цветов». Когда обнаруживается недоступный цвет (например, в изображении), необходимо использовать другой цвет. Это можно сделать либо с помощью ближайшего цвета, либо с помощью дизеринга .
Были разные попытки сделать «стандартную» цветовую палитру. Требовался набор цветов, которые можно было отображать без дизеринга на 256-цветных дисплеях; число 216 было выбрано отчасти потому, что компьютерные операционные системы обычно оставляли от шестнадцати до двадцати цветов для собственного использования; он также был выбран, потому что он позволяет точно шесть равномерно распределенных оттенков красного, зеленого и синего (6 × 6 × 6 = 216), каждый от 00 до FF (включая оба предела).
Список цветов представлен так, как если бы он обладал особыми свойствами, которые делают их невосприимчивыми к сглаживанию, но на 256-цветных дисплеях приложения могут фактически установить палитру любого набора цветов, который они выбирают, сглаживая остальные. Эти цвета были выбраны специально потому, что они соответствовали палитрам, выбранным различными браузерами. В разных браузерах использовались не очень разные палитры. [ необходима цитата ]
«Веб-безопасные» цвета имели недостаток в том, что в таких системах, как X11, где палитра разделяется между приложениями, меньшие цветные кубы (5 × 5 × 5 или 4 × 4 × 4) выделялись браузерами - «веб- безопасные "цвета будут смешиваться в таких системах. Различные результаты были получены за счет предоставления изображения с более широким диапазоном цветов и разрешения браузеру квантовать цветовое пространство, если это необходимо, вместо того, чтобы страдать от потери качества из-за двойного квантования.
В течение 2000-х годов использование 256-цветных дисплеев в персональных компьютерах резко сократилось в пользу 24-битных ( TrueColor ) дисплеев [26], а использование «безопасных для Интернета» цветов вышло из употребления.
Не все "веб-безопасные" цвета имеют стандартные имена, но каждый может быть определен триплетом RGB : каждый компонент (красный, зеленый и синий) принимает одно из шести значений из следующей таблицы (из 256 возможных значения, доступные для каждого компонента в полном 24-битном цвете).
Ключ | Шестигранник | Десятичная дробь | Доля |
---|---|---|---|
0 | 00 | 0 | 0 |
3 | 33 | 51 | 0,2 |
6 | 66 | 102 | 0,4 |
9 | 99 | 153 | 0,6 |
С (12) | CC | 204 | 0,8 |
Ж (15) | FF | 255 | 1 |
В следующей таблице показаны все "веб-безопасные" цвета. Одним из недостатков веб-палитры является небольшой диапазон светлых цветов для фона веб-страницы, тогда как интенсивности на нижнем конце диапазона, например, два самых темных, похожи друг на друга, что затрудняет их различение. Значения, отмеченные знаком «*» (звездочка), являются частью «действительно безопасной палитры»; см. раздел «Самые безопасные цвета для Интернета» ниже.
Таблица цветов [ править ]
* 000 * | 300 | 600 | 900 | C00 | * F00 * |
* 003 * | 303 | 603 | 903 | C03 | * F03 * |
006 | 306 | 606 | 906 | C06 | F06 |
009 | 309 | 609 | 909 | C09 | F09 |
00C | 30C | 60C | 90C | C0C | F0C |
* 00F * | 30F | 60F | 90F | C0F | * F0F * |
030 | 330 | 630 | 930 | C30 | F30 |
033 | 333 | 633 | 933 | C33 | F33 |
036 | 336 | 636 | 936 | C36 | F36 |
039 | 339 | 639 | 939 | C39 | F39 |
03C | 33C | 63C | 93C | C3C | F3C |
03F | 33F | 63F | 93F | C3F | F3F |
060 | 360 | 660 | 960 | C60 | F60 |
063 | 363 | 663 | 963 | C63 | F63 |
066 | 366 | 666 | 966 | C66 | F66 |
069 | 369 | 669 | 969 | C69 | F69 |
06C | 36C | 66C | 96C | C6C | F6C |
06F | 36F | 66F | 96F | C6F | F6F |
090 | 390 | 690 | 990 | C90 | F90 |
093 | 393 | 693 | 993 | C93 | F93 |
096 | 396 | 696 | 996 | C96 | F96 |
099 | 399 | 699 | 999 | C99 | F99 |
09C | 39C | 69C | 99C | C9C | F9C |
09F | 39F | 69F | 99F | C9F | F9F |
0C0 | 3C0 | 6C0 | 9C0 | CC0 | FC0 |
0C3 | 3C3 | 6C3 | 9C3 | CC3 | FC3 |
0C6 | 3C6 | 6C6 | 9C6 | CC6 | FC6 |
0C9 | 3C9 | 6C9 | 9C9 | CC9 | FC9 |
0CC | 3CC | 6CC | 9CC | CCC | FCC |
0CF | 3CF | 6CF | 9CF | CCF | FCF |
* 0F0 * | 3F0 | * 6F0 * | 9F0 | CF0 | * FF0 * |
0F3 | * 3F3 * | * 6F3 * | 9F3 | CF3 | * FF3 * |
* 0F6 * | * 3F6 * | 6F6 | 9F6 | * CF6 * | * FF6 * |
0F9 | 3F9 | 6F9 | 9F9 | CF9 | FF9 |
* 0FC * | * 3FC * | 6FC | 9FC | CFC | FFC |
* 0FF * | * 3FF * | * 6FF * | 9FF | CFF | * FFF * |
Каждый указанный цветовой код является сокращением для значения RGB. Например, код 609 эквивалентен коду RGB 102-0-153 или HEX-коду # 660099 .
Самые безопасные цвета для Интернета [ править ]
Дизайнерам предлагалось придерживаться этих 216 "безопасных для Интернета" цветов на своих веб-сайтах, потому что при разработке 216-цветовой палитры было много 8-битных цветных дисплеев. Дэвид Лен и Хэдли Стерн обнаружили, что только 22 из 216 цветов в веб-палитре надежно отображаются без непоследовательного переназначения на 16-битные компьютерные дисплеи . Они назвали эти 22 цвета «действительно безопасной палитрой»; он состоит в основном из оттенков зеленого, желтого и синего. [27] [28]
0 | 3 | 6 | 9 | C | F | |
---|---|---|---|---|---|---|
00 | * 000 * | * F00 * | ||||
03 | * 003 * | * F03 * | ||||
06 | ||||||
0C | ||||||
0F | * 00F * | * F0F * | ||||
F0 | * 0F0 * | * 6F0 * | * FF0 * | |||
F3 | * 3F3 * | * 6F3 * | * FF3 * | |||
F6 | * 0F6 * | * 3F6 * | * CF6 * | * FF6 * | ||
FC | * 0FC * | * 3FC * | ||||
FF | * 0FF * | * 3FF * | * 6FF * | * FFF * |
Доступность [ править ]
Выбор цвета [ править ]
Некоторые браузеры и устройства не поддерживают цвета. Для этих дисплеев или слепых и дальтоников веб-контент, зависящий от цветов, может быть непригодным или трудным в использовании.
Либо не следует указывать цвета (для вызова цветов браузера по умолчанию), либо следует указать и фон, и все цвета переднего плана (например, цвета простого текста, непосещенных ссылок, зависших ссылок, активных ссылок и посещенных ссылок), чтобы избежать черный на черном или белый на белом эффекты. [29]
Цветовой контраст [ править ]
Доступности веб - контент Руководство рекомендует коэффициент контрастности по меньшей мере 4,5: 1 между относительной яркостью текста и его цветом фона [30] или по крайней мере 3: 1 для большого текста. Для повышения доступности требуется коэффициент контрастности более 7: 1.
Однако решение проблем доступности - это не просто вопрос увеличения контрастности. Как доклад инициативы Web Accessibility показывает, [31] дислексией читатели лучше обслуживаются контрастностью ниже максимума. Рекомендации, к которым они относятся: не совсем черный (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. Обратите внимание, что для цветов, названных в отчете, используются значения цвета, отличные от одноименных веб-цветов.
См. Также [ править ]
- Цветовое пространство Adobe RGB
- Цветовое пространство CIE 1931 XYZ
- Цветовое пространство CIE L * a * b *
- Инструмент цвета
- Список цветовых палитр
- Список цветов
- Список цветов по оттенку
- ProPhoto RGB
- Цветовое пространство RGB
- scRGB
- Цветовое пространство RGB с широкой гаммой
Ссылки [ править ]
- ^ Niederst Роббинс, Дженнифер (февраль 2006). «Приложение D: Определение цвета». Веб-дизайн в двух словах . О'Рейли. п. 830. ISBN 978-0-596-00987-8.
- ^ Йорк, Ричард. Начало CSS , стр. 71–72.
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «Цветовой модуль CSS, уровень 3» . W3C. раздел 4.2.1. Цветовые значения RGB.
- ^ Справочник по цифровому изображению цвета Гаурав Шарма. ISBN 0-8493-0900-X
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.1. Цветовые значения RGB» . Цветовой модуль CSS, уровень 3 . W3C . Проверено 19 марта 2013 года .
- ^ a b «Цветовой модуль CSS, уровень 3» . W3c . Проверено 19 июля 2020 .
- ^ Пауэлл, Томас А. (2010). HTML и CSS: Полный справочник, пятое издание . Нью-Йорк: Макгроу-Хилл. п. 765. ISBN 9780071741705.
- ^ "HTML 4.01 Раздел 6.5" Спецификация "" Цвета " " . W3.org . Проверено 8 июля 2013 года .
- ^ "Спецификация HTML 3.2" Элемент BODY " " . W3.org . Проверено 8 июля 2013 года .
- ^ «Публичное обсуждение списка рассылки SVG Re: названия цветов в SVG-1.0 конфликтуют с /usr/lib/X11/rgb.txt » . Lists.w3.org . Проверено 8 июля 2013 года .
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.3. Расширенные цветные ключевые слова» . Цветовой модуль CSS, уровень 3 . W3C . Проверено 19 марта 2013 года .
- ^ "W3C TR SVG 1.0, распознанные имена ключевых слов цвета" . W3.org. 16 августа 2011 . Дата обращения 1 февраля 2019 .
- ^ "Набор цветов X11" . Проверено 6 июля 2014 года .
- ^ Брайан Уилсон. «Цвета в HTML и CSS» . Проверено 6 июля 2014 года .
- ^ "Спецификация CSS 2.1: Синтаксис и основные типы данных: Цвета" . 8 сентября 2009 . Проверено 21 декабря 2009 года .
- ^ «CSS Color Module Level 3 - Предлагаемая рекомендация - 11. Изменения» . 28 октября 2010 . Проверено 6 июля 2014 года .
- ^ «CSS Color Module Level 3 - Working Draft» . 18 апреля 2002 . Проверено 6 июля 2014 года .
- ^ a b Цветовой модуль CSS, уровень 4 - черновик редакции, 26 июня 2014 г.
- ^ «Пользовательский интерфейс - Системные цвета» . W3.org . Проверено 8 июля 2013 года .
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.5.1. Системные цвета CSS2» . Цветовой модуль CSS, уровень 3 . W3C . Проверено 19 марта 2013 года .
- ^ "Модуль базового интерфейса пользователя CSS3, кандидат в рекомендации W3C 11 мая 2004 г .: Внешний вид системы" . W3.org . Проверено 8 июля 2013 года .
- ^ Челик, Тантек, изд. (17 января 2012 г.). «Список существенных изменений» . Модуль базового пользовательского интерфейса CSS, уровень 3 . W3C . Проверено 19 марта 2013 года .
Системный внешний вид был удален, включая значения внешнего вида и свойства, а также системные шрифты / расширение сокращенного свойства font.
- ^ Пембертон, Стивен; Петтит, Брэд (7 июня 2011 г.). Челик, Тантек; Лилли, Крис; Барон, Л. Дэвид (ред.). «4.2.4. Цветовые значения HSL» . Цветовой модуль CSS, уровень 3 . W3C . Проверено 19 марта 2013 года .
- ^ Glazman, Daniel (21 июня 2014). «Re: [CfC] добавление 'rebeccapurple' в CSS Color Level 4» . Отправьте сообщение в список рассылки в стиле www . W3C . Проверено 24 июня 2014 года .
- ↑ Дженкинс, Сью (27 декабря 2012 г.). МФУ для веб-дизайна для чайников . Джон Вили и сыновья. ISBN 9781118404119.
- ^ «Статистика отображения браузера» . W3schools.com . Проверено 8 июля 2013 года .
- ^ "Смерть цветовой палитры Websafe?" . Physics.ohio-state.edu . Проверено 8 июля 2013 года .
- ^ «Справочник цветов в Интернете - HTML со стилем | 4 | Веб-ссылка» . www.webreference.com . Проверено 5 января +2016 .
- ^ «Если вы выберете один цвет, выберите их все» . W3.org . Проверено 8 июля 2013 года .
- ^ Рекомендация 1.4 WCAG 2.0
- ^ Оптимальные цвета для улучшения читабельности для людей с дислексией
Внешние ссылки [ править ]
- Значение цвета CSS в веб-документах MDN
- CSS2.1 Спецификация цвета
- Список безопасных для Интернета цветов
- Веб-цвета в Curlie