Веб-цвета

Веб-цвета — это цвета , используемые для отображения веб-страниц во Всемирной паутине ; их можно описать тремя способами: цвет может быть указан как триплет RGB , в шестнадцатеричном формате ( шестнадцатеричный триплет ) или в соответствии с его общепринятым английским названием в некоторых случаях. Инструмент для работы с цветом или другое графическое программное обеспечение часто используется для генерации цветовых значений. В некоторых случаях шестнадцатеричные цветовые коды указываются с помощью нотации с использованием ведущего знака числа (#). ^{[1] [2]} Цвет указывается в соответствии с интенсивностью его красного, зеленого и синего компонентов, каждый из которых представлен восемью битами . Таким образом, для указания веб-цвета в гамме sRGB используется 24 бита , и таким образом может быть указано 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 hex (16 десятичных), оно должно быть представлено ведущим нулем, чтобы триплет всегда имел ровно шесть цифр. Например, десятичный триплет 4, 8, 16 будет представлен шестнадцатеричными цифрами 04, 08, 10, образуя шестнадцатеричный триплет 040810.

Число цветов, которые можно представить с помощью этой системы, составляет 256 ³ , 16 ⁶ или 2 ²⁴ = 16 777 216.

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

. threedigit { color : #09C ; } . sixdigit { color : #0099CC ; } /* тот же цвет, что и выше */         

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

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

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

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

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

Эти 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, такими как green. Цвета X11 определяются как простые RGB (следовательно, без определенного цветового пространства), а не sRGB . Это означает, что список цветов, найденный в X11 (например, в /usr/lib/X11/rgb.txt), не следует напрямую использовать для выбора цветов для веба. ^[10]

Список веб-"цветов X11" из спецификации CSS3, вместе с их шестнадцатеричными и десятичными эквивалентами, показан ниже. Сравните алфавитные списки в стандартах W3C. Сюда входят общие синонимы: aqua (стандартное название HTML4/CSS 1.0) и cyan (общее название sRGB), fuchsia (стандартное название HTML4/CSS 1.0) и magenta (общее название sRGB), gray (стандартное название HTML4/CSS 1.0) и grey. ^{[11] [12]}

Спецификация каскадных таблиц стилей определяет то же количество именованных цветов, что и спецификация 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 также включали расширенный список из 140 названий цветов Netscape, но позже обнаружили 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, SVG и CSS 2.1 позволяют веб-авторам использовать системные цвета , которые являются названиями цветов, значения которых берутся из операционной системы , выбирая цвет выделенного текста операционной системы или цвет фона для элементов управления подсказками. Это позволяет веб-авторам стилизовать свой контент в соответствии с операционной системой пользовательского агента. ^[19] Цветовой модуль CSS3 отказался от использования системных цветов в пользу свойства CSS3 UI System Appearance, ^{[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 ) } /* 50% непрозрачности, полупрозрачный */        /* Модель 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 также поддерживает специальный цвет transparent, который представляет собой альфа-значение, равное нулю; по умолчанию transparentотображается как невидимый номинальный черный: rgba(0, 0, 0, 0). Он был представлен в CSS1, но область его использования расширилась в версиях. ^[23]

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

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

p { color : #F80A } /* #rgba */ p { color : #FF8800 AA } /* #rrggbbaa */ p { color : rgb ( 255.0 136.0 0.0 / 0.667 ) } /* диапазон с плавающей точкой 0.0 - 255.0 для точности выше 8 бит */ p { color : rgb ( 100 % 53.3 % 0 % / 66.7 % ) } /* диапазон с плавающей точкой 0.0% - 100.0% */ p { color : color ( sRGB 1 0.533 0 / 0.667 ) } /* функция color() с цветовым пространством */                                      

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

• Лаборатория CIE и LCH
• OKLab и OKLCH (предпочтительнее Lab/LCH) ^{[24] : §§9.2–3}
• XYZ (D50 или D65 [по умолчанию])

С помощью новой функции также вводится ряд пространств RGB с гаммой , которая шире, чем sRGBcolor() : ^[25]

• Дисплей P3
• Профото
• РЕК.2020
• Adobe 1998 RGB

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

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

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

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

• Функция color-mix()смешивания цветов
• Относительный цветовой синтаксис для управления компонентами существующего цвета

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

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

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

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

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

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

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

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

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

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

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

Либо не следует указывать цвета (чтобы использовать цвета браузера по умолчанию), либо следует указать как фон, так и все цвета переднего плана (например, цвета обычного текста, непосещенных ссылок, ссылок, на которые наведен курсор, активных ссылок и посещенных ссылок), чтобы избежать эффектов черного на черном или белого на белом . ^[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. Цвета, указанные в отчете, используют другие цветовые значения, чем веб-цвета с тем же названием.

• Значение цвета CSS на веб-документах MDN
• Спецификация цвета CSS2.1