So erstellen Sie einen helleren/dunkleren Farbton für den Schwebezustand einer Schaltfläche

Ich entwerfe jetzt schon seit einiger Zeit Schaltflächen, aber wenn es darum geht, die Farbe(n) für den Hover-Zustand eines Farbverlaufs oder eines Volltons auszuwählen, war es meistens eine Frage, einen dunkleren Ton ins Auge zu fassen.

Gibt es eine strukturierte Farbtheorie, die helfen würde, besser zu beurteilen, welcher Ton angemessener wäre?

Wie dunkel sollte ich vom Original ausgehen?

Wie kann ich hellere oder dunklere Farbtöne der "gleichen" Farbe definieren?

Es würde von den Farben abhängen, die im Design verwendet werden. Ich würde vorschlagen, zu experimentieren, weil es vom Enddesign abhängen würde.

Antworten (2)

Wenn ich nach einer leichten Änderung der Helligkeit suche, mache ich normalerweise die Mathematik - eigentlich einfaches Zählen.

Das Hexadezimalformat für Farben ist RRGGBB, was Rot, Grün und Blau bedeutet. Hexadezimal wird von 0-F gezählt (nach 9 kommt also A).

Wenn ich #191970meine Hauptfarbe für die Schaltfläche habe, füge ich jedem Farbwert 1 oder 2 hinzu, was zu einer ähnlichen, aber helleren Farbe führt. Das Addieren von 1 zu jedem würde ergeben #1A1A71.

Dasselbe könnte getan werden, um einen dunkleren Farbton zu finden. Das Subtrahieren von 1 von jedem Farbwert in #191970ergibt #18186F.

Das Addieren oder Subtrahieren von 1 oder 2 von jedem Farbwert führt jedoch wahrscheinlich zu einem nicht unterscheidbaren Unterschied, sodass Sie wahrscheinlich mindestens 10 von jedem addieren oder subtrahieren müssen.

Wenn Sie das Zahlenformat verwenden (255, 255, 255), können Sie einfach mit normalen Operationen zur Basis 10 zu jeder Zahl addieren.

Das Hinzufügen der gleichen Menge zu jedem Farbwert stellt sicher, dass der Farbton und die Sättigung konsistent bleiben und sich die resultierenden Farben harmonisch in ein Design einfügen.

Dies ist eine ziemlich clevere Technik, danke fürs Teilen! Ist das aus Neugier eine selbst kreierte Konvention oder etwas Grundlegendes?

Oder Sie könnten die Farbauswahl von einem Online-Generator für Sie vornehmen lassen und einfach den benötigten Code nicken: CSS-Farbverlauf-Schaltfläche ist nur ein Beispiel.