Использование цвета с умом

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

Первый шаг — выбор вашего основного цвета. Этот цвет представляет ваш веб-сайт или его тему. Так же, как мы связываем зеленый цвет с напитком Mountain Dew, синий — с небом или океаном, выбор подходящего основного цвета для представления вашего сайта — хорошая отправная точка. Существует множество способов выбора основного цвета; несколько идей включают:

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

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

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

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

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

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

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

Науки о цвете (Khan Academy в сотрудничестве с Pixar)

Онлайн-курс, который знакомит с такими понятиями, как что такое цвет, как он воспринимается и как использовать цвета для выражения идей. Представлен художниками и дизайнерами Pixar.

Теория цвета на Википедии

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

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

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

Хотя более высокий контрастность цвета часто является хорошей вещью, когда речь идет о доступности, при анимации, особенно быстро, снижение контрастности цвета на анимационных элементах снижает риск припадков. Если вы включаете анимации, используйте prefers-reduced-motion @media запрос, чтобы уменьшить анимацию для пользователей, которые выбрали это предпочтение.

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

В этом примере мы создадим подходящую цветовую палитру для веб-сайта игры, действие которой происходит на планете Марс. Поиск в Google по фотографиям Марса выведет несколько цветовых фотографий.

Используйте инструмент выбора цвета, чтобы выбрать образец основного цвета. В этом примере мы выбрали #D79C7A, который представляет собой ржаво-оранжево-красный цвет. Мы можем использовать Paletton, чтобы придумать другие цвета для нашей палитры. При открытии Paletton мы видим:

Далее, мы вводим код цвета в шестнадцатеричном формате (D79C7A) в поле «Основной RGB» в нижнем левом углу инструмента:

Теперь мы видим монохромную палитру, основанную на цвете, который мы выбрали на фотографии Марса. Если вам нужны родственные цвета, эти варианты, вероятно, подойдут. Чтобы найти акцентный цвет, который хорошо сочетается с основным цветом, мы нажимаем переключатель «добавить дополнительный» под меню, которое позволяет вам выбрать тип палитры. По умолчанию это был «Монохромный». Paletton вычисляет подходящий акцентный цвет; нажав на акцентный цвет в правом нижнем углу, мы узнаем, что этот цвет — #508D7C.

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

Нажмите на серовато-синий цвет в верхнем правом углу. Цвет — #556E8D. Его можно использовать в качестве акцентного цвета для выделения элементов, таких как заголовки, вкладки, выделения или других индикаторов на сайте:

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

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

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

Наиболее важным обычно является сам текст, но если ваши фоновые цвета и изображения были выбраны тщательно и/или критически важны для полезности содержимого, вы можете использовать свойство CSS print-color-adjust, чтобы сообщить браузеру, что он не должен вносить коррективы в отображение содержимого.

Значение по умолчанию print-color-adjust: economy, указывает, что браузеру разрешено вносить изменения в отображение, как он сочтёт необходимым для оптимизации удобочитаемости и/или экономичности печати содержимого, с учётом типа устройства вывода, на которое выводится документ.

Вы можете установить print-color-adjust: exact , чтобы сообщить браузеру, что элементы, к которым вы это применяете, разработаны специально для наилучшей работы с цветами и изображениями в их текущем виде. При этом браузер не будет изменять внешний вид элемента, к которому применяется это значение, и отобразит его так, как указано в вашем CSS.

• Применение цвета к элементам HTML с помощью CSS
• Значения цветов CSS
• Использование относительных цветов
• Модуль цвета CSS
• Понимание цвета и яркости
• WCAG 1.4.1: Контрастность цветов
• Paletton