Веб-цвета

Веб-цвета - это цвета, используемые при отображении веб-страниц во всемирной паутине , а также методы описания и указания этих цветов. Цвета могут быть указаны как триплет 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 ⁶ или 256 ³ или 2 ²⁴ = 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], следующим образом (имена определены в этом контексте без учета регистра):

Эти 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]}

Цвета 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]

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 [ править ]

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

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

CSS Color 5 [ править ]

Безопасные для Интернета цвета [ править ]

В середине 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-битном цвете).

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

Таблица цветов [ править ]

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

Самые безопасные цвета для Интернета [ править ]

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

Доступность [ править ]

Выбор цвета [ править ]

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

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

См. Также [ править ]

Ссылки [ править ]

Внешние ссылки [ править ]

• Значение цвета CSS в веб-документах MDN
• CSS2.1 Спецификация цвета
• Список безопасных для Интернета цветов
• Веб-цвета в Curlie