Как создать более светлый/темный оттенок цвета для состояния наведения кнопки

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

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

Насколько темным я должен уйти от оригинала?

Как я могу определить более светлые или более темные оттенки «того же самого» цвета?

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

Ответы (2)

Когда я ищу легкое изменение яркости, я обычно прибегаю к математике — на самом деле простому подсчету.

Шестнадцатеричный формат цветов RRGGBB, что означает красный, зеленый и синий. Шестнадцатеричный считается от 0 до F (поэтому после 9 идет А).

Если у меня есть #191970основной цвет кнопки, я добавляю 1 или 2 к каждому значению цвета, в результате чего получается похожий, но более светлый цвет. Добавление 1 к каждому приведет к #1A1A71.

То же самое можно сделать для поиска более темного оттенка. Вычитание 1 из каждого значения цвета в #191970результате даст #18186F.

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

Если вы используете числовой формат (255, 255, 255), вы можете просто добавить к каждому числу, используя обычные операции с основанием 10.

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

Это довольно умная техника, спасибо, что поделились! Из любопытства, это условность, которую вы создали сами, или что-то фундаментальное?

Или вы можете позволить какому-нибудь онлайн-генератору сделать выбор цвета за вас и просто выбрать код, который вам нужен: кнопка градиента CSS — это только один пример.