Веб-цвета

Веб-цвета - это цвета, используемые при отображении веб-страниц во всемирной паутине , а также методы описания и указания этих цветов. Цвета могут быть указаны как триплет 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]}

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

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

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

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

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

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

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

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

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

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

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

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

Цвета CSS [ править ]

Спецификация каскадных таблиц стилей определяет то же количество именованных цветов, что и спецификация HTML 4, а именно 16 цветов HTML и 124 цвета из списка цветов Netscape X11, всего 140 имен, которые были распознаны Internet Explorer (IE) 3.0 и Netscape Navigator 3.0. ^[17] Blooberry.com отмечает, что Opera 2.1 и Safari 1 также включали расширенный список Netscape из 140 названий цветов, но позже обнаружил 14 названий, не включенных в Opera 3.5 в Windows 98. ^[18]

В CSS 2.1 оранжевый цвет (один из 140) был добавлен в раздел с 16 цветами HTML4 в качестве 17-го цвета. ^[19] Спецификация CSS3.0 не включала оранжевый в раздел «Ключевые слова цвета HTML4», который был переименован в «Ключевые слова основного цвета». ^[20] В том же справочнике раздел «Ключевые слова цвета SVG» был переименован в «Ключевые слова расширенного цвета» после того, как в предыдущем рабочем проекте он начинался как «Ключевые слова цвета X11». ^[21] Рабочий проект для цветового модуля уровня 4 объединяет основные и расширенные разделы вместе в простой раздел «Именованные цвета». ^[22]

CSS 2, SVG и CSS 2.1 позволяют веб-авторам использовать системные цвета , которые представляют собой названия цветов, значения которых берутся из операционной системы , выбирая цвет выделенного текста операционной системы или цвет фона для элементов управления всплывающей подсказки. Это позволяет веб-авторам стилизовать свой контент в соответствии с операционной системой пользовательского агента. ^[23] CSS3 Модуль цвет не рекомендуется использование системных цветов в пользу CSS3 System UI Внешний вид собственности, ^{[24] [25]} , который сам впоследствии был исключен из CSS3. ^[26]

Спецификация CSS3 также вводит значения цветового пространства HSL в таблицы стилей: ^[27]

 / * Модель 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 ) }  / * очень прозрачный зеленый * /

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

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

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

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

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

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

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

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

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

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