От тьмы к свету: универсальность цвета с использованием оттенков, тонов и оттенков

1. Оттенки, тона и оттенки
2. В пятерках
3. Параметры контраста
4. Оповещения
5. Кнопочные градиенты
6. В итоге

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

Оттенки, тона и оттенки

Сначала немного информации о оттенках, тонах и оттенках. Проще говоря, эти цветовые вариации создаются путем добавления белого, серого или черного к оттенку (или чистому цвету), чтобы изменить его яркость. Более конкретно :

• Оттенок: это смесь цвета с белым, которая увеличивает легкость
• Тон: получается либо смесью цвета с серым, либо путем тонирования и затенения
• Оттенок: это смесь цвета с черным, которая уменьшает легкость

В пятерках

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

Темнее> Темнее> Оттенок <Светлее <Светлее

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

Самый темный коралл> Темный коралл> Коралл <Светлый коралл <Самый легкий коралл

Примечание: в этом примере серый тон определяется как 50% черного (или средний серый) с непрозрачностью 20% для создания «более темного» эффекта.

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

Параметры контраста

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

Оповещения

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

Кнопочные градиенты

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

В итоге

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

Для CSS дружественного подхода я настоятельно рекомендую Крис Койер Yay для статьи HSLa а также Инструмент HSLa Explorer а также Кайл Фидлер Управление цветом с помощью цветовых функций Sass ,

Смотрите также:

Похожие

Комментарии