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

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

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

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

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

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

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

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

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

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

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

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

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