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

14

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

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

Как темно я должен идти от оригинала?

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

Карл Эдвардс
источник
Это будет зависеть от цветов, используемых в дизайне. Я бы предложил экспериментировать, потому что это будет зависеть от конечного дизайна.
DᴀʀᴛʜVᴀᴅᴇʀ

Ответы:

10

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

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

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

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

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

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

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

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