Веб-цвета - Web colors

Веб-цвета находятся цвета используется в отображение веб-страниц на Всемирная паутина, а также методы описания и указания этих цветов. Цвета могут быть указаны как RGB тройка или в шестнадцатеричный формат (a шестнадцатеричный триплет) или в некоторых случаях согласно их общеупотребительным английским именам. А инструмент цвета или другой графическое программное обеспечение часто используется для генерации значений цвета. В некоторых случаях шестнадцатеричные цветовые коды указываются с обозначением с использованием ведущего числовой знак (#).^[1][2] Цвет определяется в соответствии с интенсивностью его красного, зеленого и синего компонентов, каждый из которых представлен восемью биты. Таким образом, 24 бита используются для указания веб-цвета в пределах sRGB гамма и 16 777 216 цветов, которые могут быть указаны таким образом.

Цвета вне диапазона sRGB можно указать в Каскадные таблицы стилей сделав один или несколько из красного, зеленого и синего компонентов отрицательными или более 100%, поэтому цветовое пространство теоретически является неограниченной экстраполяцией sRGB, аналогичной scRGB.^[3] Для указания цвета, отличного от sRGB, требуется вызов функции RGB (); это невозможно с шестнадцатеричным синтаксисом (и, следовательно, невозможно в устаревших HTML документы, не использующие CSS).

Первые версии Мозаика и Netscape Navigator использовал Названия цветов X11 в качестве основы для своих списков цветов, поскольку оба начинали как X Window System Веб-цвета имеют однозначное колориметрическое определение, sRGB, что связывает цветности конкретного люминофор заданная, заданная кривая передачи, адаптивная точка белого и условия просмотра.^[4] Они были выбраны, чтобы быть похожими на многие из реальных мониторы и условия просмотра, чтобы рендеринг был достаточно близок к указанным значениям даже без Управление цветом. Пользовательские агенты различаются по точности, с которой они представляют указанные цвета. Более продвинутые пользовательские агенты используют управление цветом для обеспечения лучшей цветопередачи; это особенно важно для Интернет-печать Приложения.

Шестнадцатеричный триплет

А шестнадцатеричный триплет это шестизначный, трехзначныйбайт шестнадцатеричный число, используемое в 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]

Основные цвета

Основные цвета - это 16 цветов, определенных в HTML Спецификация 4.01, ратифицирована в 1999 г.,^[7] следующим образом (имена определены в этом контексте без учета регистра):

Эти 16 были помечены как sRGB и включены в спецификацию HTML 3.0, в которой отмечалось, что они являются «стандартными 16 цветами, поддерживаемыми Windows. VGA палитра ".^[8]

Расширенные цвета

Версия SVG названий цветов X11

Расширенные цвета являются результатом объединения спецификаций пользовательских интерфейсов HTML 4.01, CSS 2.0, SVG 1.0 и CSS3 (CSS3 UI).^[6]

Количество цветов определяется веб-браузеры. Определенный браузер может распознавать не все эти цвета, но с 2005 года все современные графические браузеры общего назначения поддерживают полный список цветов. Многие из этих цветов входят в список Названия цветов X11 распространяется с X Window System. Эти цвета были стандартизированы SVG 1.0, и принимаются SVG Полный пользовательские агенты. Они не являются частью SVG Tiny.

Список цветов, поставляемых с продуктом X11, варьируется в зависимости от реализации и конфликтует с некоторыми именами HTML, такими как зеленый. Цвета X11 определяются как простые RGB (следовательно, нет определенного цветового пространства), а не sRGB. Это означает, что список цветов в X11 (например, в /usr/lib/X11/rgb.txt) не должен использоваться напрямую для выбора цветов для Интернета.^[9]

Список веб-"цветов X11" из спецификации CSS3 вместе с их шестнадцатеричными и десятичными эквивалентами показан ниже. Сравните алфавитные списки в стандартах W3C. Сюда входят общие синонимы: голубой (стандартное имя HTML4 / CSS 1.0) и голубой (общее имя sRGB), пурпурный (обычное имя sRGB) и фуксия (стандартное имя HTML4 / CSS 1.0), серый (стандартное имя HTML4 / CSS 1.0) и серый.^[10][11]

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

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

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

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

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

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

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

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

Таблица цветов

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

Самые безопасные веб-цвета

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

CSS цвета

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

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

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

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

 / * Модель RGB * / п { цвет: # F00 } / * #rgb * / п { цвет: # FF0000 } / * #rrggbb * / п { цвет: rgb(255, 0, 0) } / * целочисленный диапазон 0-255 * / п { цвет: rgb(100%, 0%, 0%) } / * диапазон значений 0,0% - 100,0% * / / * RGB с альфа-каналом, добавленный в CSS3 * / п { цвет: rgba(255, 0, 0, 0.5) } / * Непрозрачность 0,5, полупрозрачный * / / * Модель HSL, добавленная в CSS3 * / п { цвет: HSL(0, 100%, 50%) } /* красный */ п { цвет: HSL(120, 100%, 50%) } /* зеленый */ п { цвет: HSL(120, 100%, 25%) } /* темно-зеленый */ п { цвет: HSL(120, 100%, 75%) } /* светло-зеленый */ п { цвет: HSL(120, 50%, 50%) } / * пастельно-зеленый * / / * Модель HSL с альфа-каналом * / п { цвет: hsla(120, 100%, 50%, 1) } /* зеленый */ п { цвет: hsla(120, 100%, 50%, 0.5) } / * полупрозрачный зеленый * / п { цвет: hsla(120, 100%, 50%, 0.1) } / * очень прозрачный зеленый * /

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

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

Доступность

Выбор цвета

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

Либо не следует указывать цвета (чтобы вызвать цвета браузера по умолчанию), либо следует указать и фон, и все цвета переднего плана (например, цвета простого текста, непосещенных ссылок, зависших ссылок, активных ссылок и посещенных ссылок), чтобы избежать черный на черном или же белый на белом последствия.^[28]

Цветовой контраст

В Рекомендации по доступности веб-контента рекомендуется коэффициент контрастности не менее 4,5: 1 между относительная яркость текста и его цвет фона^[29] или как минимум 3: 1 для крупного текста. Для повышения доступности требуется коэффициент контрастности более 7: 1.

Однако решение проблем доступности - это не просто вопрос увеличения контрастности. В качестве отчета Инициатива веб-доступности указывает,^[30] Читателям с дислексией лучше подходит коэффициент контрастности ниже максимального. Рекомендации, к которым они относятся: не совсем черный (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 Спецификация цвета
• Список безопасных для Интернета цветов
• Веб-цвета в Керли