Веб-цвета — это цвета , используемые при отображении веб-страниц во Всемирной паутине ; их можно описать тремя способами: цвет может быть указан как тройка 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 . Шестнадцатеричный триплет формируется путем объединения трех байтов в шестнадцатеричной записи в следующем порядке:
Например, рассмотрим цвет, в котором значения красного/зеленого/синего представляют собой десятичные числа: красный=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 обычно задаются в диапазоне 0–255; если они находятся в диапазоне 0–1, перед преобразованием значения умножаются на 255. Это число, разделенное на шестнадцать (целое деление; остаток игнорируется), дает первую шестнадцатеричную цифру (между 0 и F, где буквы от A до F представляют числа от 10 до 15. Дополнительные сведения см. в разделе «Шестнадцатеричные числа »). Остаток дает вторую шестнадцатеричную цифру. Например, значение 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, такими как зеленый. Цвета 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 4, а именно 16 цветов HTML и 124 цвета из списка цветов Netscape 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, 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 % ) } /* красный */ p { color : hsl ( 120 , 100 % , 50 % ) } /* зеленый */ p { цвет : hsl ( 120 , 100 % , 25 % ) } /* темно-зеленый */ p { цвет : hsl ( 120 , 100 % , 75 % ) } /* светло-зеленый */ p { цвет : 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]
CSS Color 4 представляет несколько различных форматов независимого от устройства цвета , которые могут отображать весь видимый цвет (на соответствующем экране), в том числе: [25]
С помощью новой функции также вводится ряд пространств RGB с гаммой , более широкой, чем sRGBcolor() : [25]
Линеаризованный вариант 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-цветных дисплеях приложения могли фактически устанавливать палитру любого набора цветов по своему выбору, сглаживая остальные. Эти цвета были выбраны специально потому, что они соответствовали палитрам, выбранным различными браузерными приложениями. В разных браузерах использовались не очень разные палитры. [ нужна цитата ]
«Интернет-безопасные» цвета имели недостаток: в таких системах, как X11 , где палитра распределялась между приложениями, браузеры выделяли меньшие цветовые кубы (5×5×5 или 4×4×4) – «веб-безопасные» цвета. безопасные цвета в таких системах будут размываться. Другие результаты были получены, если предоставить изображение с более широким диапазоном цветов и позволить браузеру при необходимости квантовать цветовое пространство, вместо того, чтобы страдать от потери качества из-за двойного квантования.
В 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.
Однако решение проблем доступности — это не просто вопрос увеличения коэффициента контрастности. Как указывается в отчете Web Accessibility Initiative , [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. Цвета, указанные в отчете, используют другие значения цвета, чем одноименные веб-цвета.
Внешний вид системы был удален, включая значения внешнего вида и свойства, а также системные шрифты/расширение сокращенного свойства «шрифт».