HEX-код играет важную роль в разработке и дизайне. Ниже подробно описаны соответствующие компоненты. Речь идет о знании шифрования, названий текстов, сокращений и безопасных веб-цветов. Эта информация будет полезна как начинающим, так и опытным разработчикам.
Цветовые таблицы HTML
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
HTML – это формат веб-кода. Он выражается в виде языка гипертекста, на котором формируются приложения и страницы для браузеров.HTML поддерживает различные цветовые коды и их форматы:
- HSV, что расшифровывается как “тон, насыщенность и значение”. Эта модель использует вышеупомянутые компоненты в качестве координат. Объем цвета варьируется в пределах 0-360 градусов, насыщенность – 0-100 или 0-1 (чем выше значение, тем “чище” цвет). Светлота находится в том же диапазоне, что и насыщенность.
- rgb или красный, зеленый и синий”. Обозначается в виде “200,100,255”, где RGB означает количество соответствующих градаций в конечном цвете (красном, зеленом или синем). Эта палитра наиболее распространена среди дизайнеров.
- HEX-код. Это еще один распространенный формат, который отличается от RGB форматом записи. Он содержит три значения, состоящие из трех символов; в отличие от формата RGB, он задается в шестнадцатеричной системе счисления. Примеры: #ff0000 и ff00b3; во второй записи первая пара цифр – красная, вторая – зеленая, третья – синяя.
RGB известна всем, даже начинающим дизайнерам. Кроме того, важно отметить, что представляют собой цвета в шестнадцатеричной системе.
RGB может представлять множество оттенков цвета. Чтобы точно определить разницу между переходами и гаммой, принято использовать HEX-коды.
Шестнадцатеричная система используется для кодирования цветовой шкалы таким образом. Распространена при разработке программного обеспечения; HEX-коды легко формировать. Они имеют следующие характеристики:
- числа 10-15 обозначаются буквами A-F латинского алфавита. Затем указывается код, а не буква; FFFFFFFFF – белый. Если в записи есть хотя бы один 0 (#000000), то она “черная”.
- 2 Шестнадцатеричная система счисления сегодня встречается во всех устройствах, включая мобильные гаджеты. Информация, заданная с помощью этого типа гамма-кодирования, корректно отображается на дисплее.
- все цвета строятся из базовых цветов (RGB); HEX-коды используются в основном в веб-дизайне, а RGB служит “общим” стандартом во всех ситуациях.
Стоит отметить, что исследуемая палитра состоит из шести символов. Первые два относятся к красному, вторые два – к зеленому и третьи два – к синему: 00ff00 – “чистый” зеленый, ff00ff – пурпурный и 0000ff – синий.
Если вы знаете RGB, вы можете быстро представить оттенок цвета в формате HEX. Например, то, что в RGB отображается как 255, в HEX отображается как FF.
Сокращения
Цветовые “формулы” можно сокращать: вместо шести символов использовать только три. Этот прием используется в веб-разработке, когда все страницы должны отображать цветовую палитру одинаково.
Пример – #FF22AA – насыщенный ярко-розовый. Ввод можно упростить до формы #F2A. Это не зависит от регистра. Аббревиатуры часто используются в макетах сайтов с помощью CSS.
Как узнать, какой это цвет
Очевидно, что такое HEX-цвет. Вопрос в том, как найти соответствующую палитру в приложении. Большинство современных графических редакторов работают с рассматриваемым форматом так же, как и с RGB. При выборе цвета отображается “подсказка”.
В Photoshop вы можете найти цвета следующими способами:
- Откройте изображение в приложении.
- выберите инструмент “Пипетка” и щелкните на области, где нужно точно настроить оттенок.
- нажмите на цветной квадрат на боковой панели инструментов.
На экране появится окно палитры. В нижней части окна находится поле с символом #. Затем находится код. Это HEX-отображение цвета.
Безопасные веб-цвета
RGB – это универсальный формат для работы с цветовыми схемами. Его обычно достаточно для создания большинства веб-приложений; HEX позволяет более тонко настраивать оттенки. Браузеры могут не распознать цветовые оттенки. По этой причине следует использовать “безопасные веб-цвета”.
Эти правила помогут сгенерировать подходящие цвета HEX для страницы:
- рекомендуется использовать десятичные цветовые символы
- используйте формулы в шестнадцатеричной системе счисления: FF, CC. 99, 00, 33, 66.
- на устройствах с 8-битными дисплеями поддерживаются “безопасные оттенки”.
Выше приведен пример “безопасного” веб-оттенка. С помощью такой таблицы можно визуально оценить “безопасность” выбранного цвета и принять решение о его дальнейшем использовании в проекте.
Название текста
RGB и другие палитры активно используются в разработке программного обеспечения и графическом дизайне: программисты часто используют CSS при написании приложений на HTML. Ее создатели решили отойти от представления кода и использовать текстовую интерпретацию.
Для правильного отображения используются не только стандартные цвета RGB, но и различные тона, такие как коралловый, хаки и шоколадный. Оттенки текста можно посмотреть в документации CSS.
У этой техники есть несколько недостатков:
- Цвета должны быть известны на английском языке;
- На написание полного названия оттенка уходит больше времени, чем на код;
- Орфографические ошибки недопустимы – исходный код становится неузнаваемым.
Это привело к тому, что разработчики стали использовать таблицы RGB или HEX для описания большинства оттенков на странице.
