Кодирование цветов

Разные люди воспринимают цвета по-разному, поэтому никто не назовет одинаково один и тот же цвет — особенно на сайте. Назвав цвет, вы, скорее всего, дадите искажённое представление. Даже слово blue в английском имеет несколько значений. Чтобы конкретизировать, можно сказать «небесно-голубой», «цвет морской волны», «джинсовый» или «металлический».

Мы называем цвета в зависимости от личных предпочтений и в контексте с другими цветами: индиго (indigo), нефрит (jade), оливковый (olive), алый (scarlet). В английском есть ещеtangerine — цвет мандарина и cabaret — ярко-красный цвет, который используется в кабарэ. Есть еще «электрический лайм» (electric lime). Названия цветов и оттенков никогда не будут однозначными — если только вы не компьютер.

Код требует точности

В верстке при обозначении цвета используют шестнадцатеричный код, или 24-битные цвета. Это 16 777 216 уникальных комбинаций из конкретных 6 символов, сделанных из 10 цифр и 6 букв, которым предшествует знак #. Как и в любом компьютерном языке, в этом есть логическая система. Дизайнеры, которые понимают, как работают числа в шестнадцатеричной записи, делают их своим инструментом.

Разложение шестнадцатеричной системы в удобные в управлении байты

У экранов с задней подсветкой пиксели темные, если задаются комбинации красного, зеленого и синего. Числа в шестнадцатеричной записи представляют эти комбинации в виде краткого кода. Такой код легко разбить. Чтобы разобраться в коде #970515, посмотрите на его структуру.

Первый символ # заявляет, что это шестнадцатеричное число. Остальные шесть — это три группы пар: 0–9 и a — f. В каждой паре есть основной и дополнительный цвета:

Чем больше число, тем ярче каждый основной цвет. В приведенном примере 97 означает преобладание красного цвета, 05 — количество зеленого, 15 — синего.

Каждая пара может фиксировать два параметра, но #999999 — это только серый цвет. Чтобы сделать цвет ярче 99 для двух параметров, каждому из шестнадцатеричных чисел присваиваются буквы, чтобы представить числа 10–16. A, B, C, D, E и F заменяют двузначные числа от 9 до 16, наподобие карточных валетов, дам, королей и тузов.

Будучи математическими и информационно удобными, числа в шестнадцатеричной записи являются строками полного кода. Например, так как 00 — это отсутствие основного цвета, а ff — самый яркий цвет, то #000000 будет черным цветом (полное отсутствие цвета), а #ffffff — белым (все цвета). Можно поэкспериментировать над ними, чтобы найти дополнительные цвета и краски субстрактивного синтеза. Начнем с черного, изменив каждую пару с ff:
#000000 — черный, отправная точка,
#ff0000 — самый яркий красный,
#00ff00 — самый насыщенный зеленый,
#0000ff — самый ярко-синий.

Цвета субстрактивного синтеза начинаются с белого, например, с #ffffff. Чтобы найти основные субстрактивные цвета, заменим каждую пару с 00:
#ffffff — белый, отправная точка,
#00ffff — самый яркий светло-голубой,
#ff00ff — самый насыщенный пурпурный,
#ffff00 — самый ярко-желтый.

Упрощение шестнадцатеричной записи

Числа в шестнадцатеричной записи, состоящие из трех символов, например, #fae, означают, что каждое из них может занять 16-ую позицию. Так, полное написание #fae — #ffaaee, а #09b на самом деле значит #0099bb. Такие записи значительно сокращают код.

В большинстве случаев можно прочитать такое число, игнорируя каждый другой символ, потому что разница между шестнадцатой и какой-либо другой позицией имеет большее значение, чем что-либо еще. То есть трудно увидеть разницу между 41 и 42, гораздо проще оценить ее между 41 и 51.

В первом примере показано значительное различие между 16 позицией: преобладание красного, немного синего и отсутствие зеленого. Получается теплый фиолетовый цвет. Десятки во втором примере (9, 9 и 8) очень схожи. Чтобы определить этот цвет, нужно оценить единицы (7, 0, 5). Чем ближе шестнадцатая позиция, тем более нейтральным (менее насыщенным) будет цвет.

Сделайте так, чтобы шестнадцатеричные числа работали на вас

Понимание чисел в шестнадцатеричной записи позволяет дизайнеру объяснить коллегам и клиентам значительно больше, чем просто сказать: «Ах, какой хороший оттенок бордового». Дизайнер может сходу подправить цвета, чтобы улучшить удобочитаемость, выделить цветом элементы в таблице стилей и разработать цветовые схемы так, как нельзя в большинстве графических редакторов.

Создавайте оттенки символами

Чтобы увеличить или уменьшить яркость цвета, многие часто регулируют шкалу яркости. Они охватывают диапазон от темного до яркого цвета, но теряют его характер на каждом конце шкалы. Например, если яркость зеленого снизить до 20%, он определенно становится черным. А если поднять до 100%, он набирает яркости.

Лучше представлять шестнадцатеричные цвета так, как если бы они были частью десятков. Добавляя единицу к каждому левому символу из каждой пары, мы повышаем яркость цвета, одновременно снижая его насыщенность. Это не дает оттенкам приближаться слишком близко к черному или яркому неоновому. Изменение шестнадцатеричных пар сохраняет сущность цвета.

В верхнем примере оттенок повышается к желтому и снижается до черного, хотя технически это тот же зеленый. При изменении его шестнадцатеричных пар, в нижнем наборе сохраняются натуральные оттенки.

Блёклое подчеркивание

По умолчанию текст ссылки в браузере подчеркивается. Но широкая линия подчеркивания мешает буквам с нижним выносным элементом. Можно сделать подчеркивание менее навязчивым, снижая яркость шестнадцатеричного цвета. Идея в том, чтобы приблизить цвет линии к цвету фона, а текст сделать контрастнее.

Для темного шрифта на светлом фоне используем более яркие ссылки. Для светлого шрифта на темном фоне — тёмные. Для этого каждая встроенная ссылка должна заключаться в тегвнутри каждого тега ссылки:

a { text-decoration:underline;color:#aaaaff; }
a span { text-decoration:none;color:#0000ff; }

Линия подчеркивания ссылки такого же цвета, как и её текст, сливается с подстрочными элементами букв. Приближая цвет линии к фону, вы делаете подстрочные элементы читабельнее, даже если в некоторых браузерах подчеркивание ссылки пересекает их.

Добавление горизонтальных пиксельных прямых для каждого якоря может быть проблематичным. Популярная альтернатива — удаление подчеркиваний и добавление нижней границы:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Улучшаем основной текст

Типичная проблема — определенный цвет может быть технически правильным, но иметь нежелательный эффект. Например, в некоторых проектах заголовки и основной текст должны быть одного цвета. Нужно иметь в виду: насколько светлее буквы в больших текстах, настолько темнее должен быть шрифт коротких текстов.

h1, p { color: #797979; }

h1 { color: #797979; }
p { color: #393939; }

Хотя технически и идентичный, основной текст более блёклый, что делает его визуально ярче заголовка. Уменьшение 16-х позиций делает текст легче для чтения.

Как сделать фон в более теплых или холодных тонах

Нейтральные оттенки фона могут делать текст читабельнее, но «нейтральный» не обязательно значит «теплый». Регулировка первого и последнего байта может сделать фон теплее или холоднее.

#404040 — нейтральный,
#504030 — теплее,
#304050 — холоднее.

Слишком заметный переход? Давайте переставим их:

#404040 — нейтральный,
#594039 — теплее,
#394059 — холоднее.

Сочетайте цвета, копируя и вставляя

Понимание структуры числа в шестнадцатеричной записи (пары чисел и букв) дает дизайнерам уникальный инструмент для исследования сочетаний цветов. В отличие от цветов спектра и графиков, перестановка пар чисел в шестнадцатеричной записи является более простым процессом изменения оттенков, сохраняя при этом похожие значения. Тем более что результаты могут быть непредсказуемыми. Самый простой способ состоит в том, чтобы переместить пары в другое место, которое содержит основные цвета.

Основным методом сочетания текста или других элементов с фотографиями является использование тех же цветов, что и на изображении. Понимание чисел в шестнадцатеричной записи может прояснить дальнейший шаг путем получения новых цветов, сочетающихся с фото, не используя его напрямую.

Забегая вперед

Не позволяйте коду запугать вас. Немного творчества, и число в шестнадцатеричной записи станет вашим инструментом. В следующий раз, когда кто-нибудь спросит, можете ли вы решить проблему с кодом на любом языке, вы просто ответите: «Это не сложнее разбора чисел в шестнадцатеричной записи в моей голове».

Вас могут заинтересовать следующие статьи и сходные ресурсы:
Названия цветов и оттенков — используйте эти подручные инструменты, чтобы найти удобные названия цветов и оттенков.
Как выбрать наилучший цвет — узнайте, как сделать цвет сходным и подходящим.
Инструмент для подбора цвета.