Магия CSS. Глава 4. Цвет

7 min readJun 19, 2016

Я знаю, что вы подумали. Целая глава про цвет? Поверьте мне, одной главы все равно не достаточно. Цвет — это целое измерение и он невероятно могущественен.

Цвет не является цветом…

…для компьютеров

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

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

…и для человеческого глаза

То, как человеческий глаз видит цвет зависит от многих факторов, в том числе:

Тип устройства (ноутбук, ПК, мобильный телефон)
Расстояние и угол зрения
Качество дисплея (количество цветов, которое он может отобразить, точность воспроизведения, доступный угол обзора, максимальный контраст и т.д.)
Условия освещения (внутри или снаружи, день или ночь, возле окна или нет и т.д.)
Зрение смотрящего (корректирующие линзы, нарушения зрения, дальтонизм)

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

Выбирайте цвет, подходящий для текста (и для фона текста)
Используйте прием имитации объекта, чтобы помочь людям опознать предмет из реального мира
Используйте контраст для увеличения читабельности (никто не может читать белый текст на бежевом фоне)
Применяйте паттерны (когда это необходимо) в качестве запасного варианта для людей с дальтонизмом (пример Trello)

Но помните, нет ничего прекраснее чем видеть. Используйте свои глаза (и глаза пользователей, на которых тестируете). Проверяйте свой набор цветов на разных устройствах и при разном освещении до тех пор, пока не будете уверены, что все пользователи будут видеть что-то приемлемое.

Перспективы цвета

Как я писал выше, цвет является чрезвычайно мощным инструментом. Но с большой силой приходит большая ответственность ;) Цвет используется для решения большого количества задач. Но применение цвета для одного объекта может наложить ограничения на использование того же цвета для какого-то другого объекта. Например, если вы для своего бренда выбрали определенный зеленый оттенок, то вам будет довольно трудно взять тот же зеленый для индикатора “go”.

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

Инструменты цвета

Чувства

Вы знали, что красный цвет заставляет людей чувствовать голод? Link.

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

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

Брендинг

Цвета на столько могущественны, что один цвет может означать бренд.

Сможете угадать бренды по цветам?

Статус

Bootstrap популяризировал применение статусных классов, которые связаны с определенными цветами.

Много различных приложений используют эту или подобные схемы:

Постоянно используя #dff0d8 в случае успеха или #f2dede в случае опасности, вы укрепляете шаблон поведения, облегчая людям распознание подобных знаков в будущем.

Движение, внимание

Иногда вам нужно привлечь внимание пользователя. Плавное (или резкое) измение цвета фона или цвета текста может помочь вам добиться внимания.

Просто так

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

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

Цветовые схемы

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

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

Codrops: Build a Color Scheme: The Fundamentals — Отличный обзор разных типов цветовых комбинаций (монохромные, добавочные, триады, аналоговые).
Color Scheme Designer — Хороший инструмент для построения цветовых схем с разными типами комбинаций цветов.
Adobe Kuler: Color Wheel —Еще один инструмент для составления схем.

Какой цвет вы имели в виду?

Одна ошибка, которую я вижу чаще других — разработчик использует серый (#ccc) когда на самом деле нужно было использовать черный с альфа-каналом (rgba(0, 0, 0, 0.2)).

Но они выглядят одинаково! — скажете вы. Ну, да. Но только до тех пор, пока фон остается белым!

Пример

Каждый из белых блоков имеет тень box-shadow: 0 .125em .5em [color] с цветом из соответствующей колонки.

Оба блока в первом случае выглядят отлично. Но обратите внимание, что во втором случае первый блок выглядит странно. Это тень цвета #ccc диссонирует с фоном #85ddba. Определенно не то, что надо.

Хороший цвет для текста

Цвет текста в браузере по умолчанию #000. Я думаю, это довольно предсказуемое поведение для большинства людей. Подсознательно мы думаем что-то вроде: “Чернила черные. Документы напечатаны чернилами. Веб это набор цифровых документов. Поэтому текст на экране должен быть черным.”

Это разумно и многие сайты существуют с черным цветом текста. Но альтернатива этому — использование серого цвета (#333). У этого способа есть несколько преимуществ.

Резкий контраст черного цвета на белом может создавать визуальные артефакты и увеличить нагрузку на глаз. (Обратная ситуация тоже нежелательна. Это довольно субъективно, но все же помните об этом.)
Вы “припасаете” черный #000 для акцентов. (Это, пожалуй, более весомый аргумент.)

Вы можете подумать: “Но ты только что показал пример, в котором предлагаешь использовать черный с альфа-каналом вместо серого в ситуациях, когда цвет фона может изменится…Почему нельзя сделать цвет текста rgba(0, 0, 0, 0.8)?”

Вы правы и это реальный вариант. Основным преимуществом является то, что на не белом фоне цвет не будет серым + не будет цветовых конфликтов (как показано в примере с белыми блоками на зеленом фоне). Но я бы не назвал его универсальным по двум причинам:

При настройке цвета со значением альфа-канала от 0 до 1, в браузерах на движке WebKit свойство по умолчанию -webkit-font-smoothing: subpixel-antialiased больше не будет срабатывать и вы не добьетесь сглаживания. (Будто у этого текста установлено свойство -webkit-font-smoothing: antialiasedyourself.) Какой тип сглаживания “лучше” — субъективное мнение и зависит от контекста. Но с межпиксельным сглаживанием связаны и другие, более серьезные проблемы, о чем сигнализирует следующее: 1) WebKit на Mac с дисплеями retina не используют межпиксельное сглаживание (вполне вероятно, что не будут и следующие поколения дисплеев) и 2) Популярная блоггинговая платформа Medium.com (известна своей красивой типографикой) использует -webkit-font-smoothing: antialiased во всех документах.
Внешний вид может слегка отличаться. Помните, что теперь вы просите браузер компоновать текст с тем, что позади него. Это может выглядеть неплохо в WebKit, но я не надеялся бы на одинаково хороший результат везде.

Заключение

Цвет могущественен. Составьте хороший набор цветов и придерживайтесь его. Смотрите по-настоящему. Если что-то выглядит странно, то, скорее всего, так оно и есть.

Несколько сайтов со смелым выбором цветов

Внеклассное чтение

Цитирование

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!