Color Palette Generator
Generate color palettes
Generate color palettes Läuft lokal in Ihrem Browser
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
Der Farbpalettengenerator nimmt eine Grundfarbe und leitet daraus die Standardharmonieschemata ab: Komplementär, Analog, Triadisch, Split-Komplementär und Tetradisch sowie eine Rampe von Farbtönen in Richtung Weiß und Schattierungen in Richtung Schwarz. Harmonien werden in HSL durch Drehen des Farbtons unter Beibehaltung von Sättigung und Helligkeit berechnet, weshalb die Ergebnisse im Zusammenhang mit Ihrer Basis bleiben und nicht driften. Die Rampe ist der Teil, den die meisten Paletten tatsächlich benötigen, da eine Arbeitsoberfläche mehrere Werte desselben Farbtons für den Schwebezustand, den aktiven und den deaktivierten Zustand benötigt und nicht nur eine Akzentfarbe.
Where people use the
- Erstellen Sie eine Palette rund um eine einzelne Markenfarbe.
- Erstellen von Hover-, aktiven und deaktivierten Varianten aus einem Akzent.
- Erforschung von Alternativen zu einer Farbe, die eine Kontrastprüfung nicht bestanden hat.
- Erzeugen einer neutralen Rampe für Flächen und Ränder.
How to use the
- 1
Wählen Sie eine Grundfarbe
Geben Sie einen Hexadezimalwert ein, z. B. 4ECDC4, oder verwenden Sie die Auswahl. Alles andere leitet sich von dieser einen Farbe ab.
- 2
Lesen Sie die Harmonieschemata
Jedes Schema ist eine andere Farbtonrotation. Komplementär ist 180 Grad, Triadisch ist 120 und 240 und so weiter.
- 3
Nehmen Sie die Tönungs- und Schattierungsrampe
Fünf Farbtöne in Richtung Weiß und fünf Schattierungen in Richtung Schwarz geben Ihnen die Zustände und Höhen, die Sie in einer echten Benutzeroberfläche benötigen.
- 4
Kopieren Sie die Werte
Die vollständige Liste der generierten Hex-Werte befindet sich in einem Block und kann in ein Stylesheet oder eine Design-Token-Datei eingefügt werden.
- 5
Prüfen Sie den Kontrast vor dem Versand
Führen Sie ein beliebiges Text- und Hintergrundpaar aus der Palette durch den Kontrastprüfer. Harmonisch ist nicht dasselbe wie lesbar.
Tipps und Best Practices
- Wählen Sie die Grundfarbe der Marke aus und passen Sie dann nur die Helligkeit für die einzelnen Bundesstaaten an.
- Reservieren Sie die Komplementärfarbe für die Aktion, die Sie bemerken möchten.
- Führen Sie bei der endgültigen Paarung vor dem Versand immer eine Kontrastprüfung durch.
Häufig gestellte Fragen
Was ist der Unterschied zwischen den Schemata?
„Complementary“ verwendet den entgegengesetzten Farbton, der den stärksten Kontrast bietet und zu einem Aufruf zum Handeln passt. Analog verwendet die Nachbarn 30 Grad auf beiden Seiten, was ruhig und sicher ist. Triadic verteilt drei Farbtöne gleichmäßig, was lebendiger und schwerer zu kontrollieren ist. Split Complementary mildert den komplementären Konflikt, indem die beiden Farbtöne auf beiden Seiten des Gegenteils verwendet werden. Tetradic verwendet vier Farbtöne im rechten Winkel, was für komplexe Dashboards geeignet ist.
Warum haben die erzeugten Farben die gleiche Sättigung und Helligkeit?
Denn nur durch die Rotation des Farbtons bleiben sie erkennbar in Beziehung zueinander. Die gleichzeitige Variation der Helligkeit erzeugt Farben, die nichts miteinander zu tun haben, was den Sinn einer Palette zunichte macht.
Handelt es sich bei Tönungen nur um die mit Weiß gemischte Farbe?
Tatsächlich ja, aber in HSL berechnet, indem die Helligkeit erhöht wird, während Farbton und Sättigung beibehalten werden. Dadurch bleibt der Farbton stabil, während die naive Mischung in RGB in Richtung Grau tendiert.
Wie viele Farben sollte eine Palette haben?
Für die meisten Schnittstellen reichen zwei oder drei Farbtöne plus eine neutrale Rampe aus. Ein Schema mit fünf gesättigten Farbtönen lässt sich nur schwer konsistent verwenden und sieht am Ende meist zufällig aus.
Überprüft es die Barrierefreiheit?
Nein, es werden nur Farben erzeugt. Verwenden Sie den Kontrastprüfer für jede Paarung, die Sie für Text verwenden möchten.