Farbabstufungen für Markenfarben
Geben Sie die Hauptfarbe Ihrer Marke ein und erhalten Sie eine Palette aus zehn Abstufungen (von 50 bis 900) im Designsystem-Stil, um ein stimmiges Farbkonzept aufzubauen. Berechnung 100% lokal in Ihrem Browser.
So funktioniert es
Ein solides Designsystem beschränkt sich nie auf einen einzigen Farbton: Es braucht hellere Varianten für Hintergründe und deaktivierte Zustände und dunklere Varianten für Text oder Hover-Zustände. Dieses Tool wandelt Ihre Farbe in HSL um, behält den ursprünglichen Farbton bei und variiert nur die Helligkeit (und an den Extremen leicht die Sättigung), um zehn Abstufungen von 50 (sehr hell) bis 900 (sehr dunkel) nach dem Vorbild der Tailwind-CSS-Paletten zu erzeugen.
Welche Abstufung entspricht meiner Ausgangsfarbe am besten?
Die Abstufung 500 wird so berechnet, dass sie der von Ihnen eingegebenen Farbe möglichst nahekommt; die niedrigeren Abstufungen werden schrittweise heller bis hin zu Weiß, die höheren schrittweise dunkler bis hin zu Schwarz.
Kann ich eine einzelne Abstufung oder die ganze Palette kopieren?
Klicken Sie auf ein Farbfeld, um dessen HEX-Code einzeln zu kopieren, oder verwenden Sie die Schaltfläche „Ganze Palette kopieren“, um die vollständige Liste im Format Nummer: #hex zu erhalten, bereit zum Einfügen in eine CSS- oder Tailwind-Konfigurationsdatei.
Die Berechnung der Abstufungen erfolgt vollständig in Ihrem Browser; Ihre Markenfarbe wird niemals an einen Server gesendet.