Jak stworzyć jaśniejszy / ciemniejszy odcień koloru dla stanu najechania przyciskiem

Od jakiegoś czasu projektuję przyciski, ale jeśli chodzi o wybranie koloru (ów) dla stanu najechania gradientem lub bryłą, to w większości kwestia dotyczyła ciemniejszego tonu.

Czy istnieje strukturalna teoria kolorów, która pomogłaby lepiej ocenić, jaki byłby bardziej odpowiedni ton?

Jak ciemno powinienem przejść od oryginału?

Jak zdefiniować jaśniejsze lub ciemniejsze odcienie „tego samego” koloru?

Kiedy szukam lekkiej zmiany lekkości, zwykle wykonuję matematykę - naprawdę proste liczenie.

Format szesnastkowy kolorów to RRGGBBczerwony, zielony i niebieski. Szesnastkowy jest liczony od 0-F (więc po 9 przychodzi A).

Jeśli mam #191970jako główny kolor przycisku, dodam 1 lub 2 do każdej wartości koloru, co daje podobny, ale jaśniejszy kolor. Dodanie 1 do każdego spowoduje #1A1A71.

To samo można zrobić, aby znaleźć ciemniejszy odcień. Odjęcie 1 od każdej wartości koloru #191970spowoduje #18186F.

Jednak dodanie lub odjęcie 1 lub 2 od każdej wartości koloru może spowodować nierozróżnialną różnicę, więc prawdopodobnie będziesz musiał dodać lub odjąć co najmniej 10 od każdej z nich.

Jeśli używasz formatu liczb (255, 255, 255), możesz po prostu dodać do każdego numeru, używając normalnych operacji 10.

Dodanie tej samej ilości do każdej wartości koloru zapewnia spójność odcienia i nasycenia, a uzyskane kolory harmonijnie mieszają się w projekcie.

Możesz też pozwolić, aby jakiś generator online dokonał wyboru koloru i po prostu wymazuj potrzebny kod: przycisk gradientu CSS to tylko jeden przykład.