Як створити світліший / темніший відтінок кольору для стану наведення кнопки

Я певний час розробляв кнопки, але коли мова заходить про вибір кольору (кольорів) для стану наведення будь-якого градієнта або твердого, то в основному це було питанням більш темного тону.

Чи існує структуралізована теорія кольорів, яка допоможе краще оцінити, який би більш підходящий тон використовувати?

Як темно мені слід переходити від оригіналу?

Як я можу визначити світліші або темніші відтінки "того ж" кольору?

Шукаючи невелику зміну легкості, я зазвичай займаюся математикою - насправді простий підрахунок.

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

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

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

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

Якщо ви використовуєте формат чисел (255, 255, 255), ви можете просто додати до кожного числа, використовуючи звичайні базові 10 операцій.

Додавання однакової кількості до кожного значення кольору гарантує, що відтінок і насиченість залишаються послідовними, а отримані кольори гармонійно поєднуються в дизайні.

Або ви можете дозволити якомусь генератору в Інтернеті зробити вибір кольору для вас, і просто наберіть потрібний код: Кнопка градієнта CSS - лише один приклад.