Die meisten Paletten beginnen mit einer Farbe, die jemand bereits mag: ein Markenblau, das Grün eines Logos, ein Stoffmuster für eine Hochzeit. Der schwierige Teil ist alles nach dieser ersten Wahl. Welche Farben passen dazu, wie viele braucht man und warum zerfällt ein Set, das in einem Designtool ausgewogen aussieht, sobald Text darauf sitzt?
Farbharmonie beantwortet die ersten beiden Fragen mit einfacher Geometrie auf einem Farbkreis Kontrast beantwortet die dritte, und es ist die eine Person überspringen Diese Anleitung behandelt beide, mit echten HEX-Werten können Sie überprüfen, und zeigt, wie die freie Farbpalettengenerator Verwandeln Sie eine Grundfarbe in sechs Arten von Paletten.
tl; dr: Ein Farbpalettengenerator dreht einen Basisfarb-' s-Farbton um den HSL-Farbkreis um feste Winkel (180 Grad für komplementäre, 120 Grad für triadische, 90 für tetradische, 30 und 60 für analoge) oder bewegt seine Leichtigkeit, um Farbtöne, Tönungen und monochromatische Sets zu bilden. Der Toolz-Farbpalettengenerator macht dies clientseitig, kostenlos, ohne Anmeldung: Wählen Sie eine Basis, wählen Sie einen von sechs Modi, klicken Sie auf einen Swatch, um seinen HEX-Code zu kopieren, oder kopieren Sie den gesamten Satz als benutzerdefinierte Eigenschaften. HSL ist nicht wahrnehmungsgleich.
Was ist ein Farbpalettengenerator?
Ein Farbpalettengenerator ist ein Werkzeug, das eine Startfarbe nimmt und daraus verwandte Farben mit festen Regeln berechnet, so sieht das Set ohne Versuch und Irrtum koordiniert aus Die Regeln stammen aus dem Farbkreis: einander gegenüberliegende Farben kontrastieren, nebeneinander blendende Farben, und gleichmäßig um die Radwaage verteilte Farben.
Der Toolz-Generator arbeitet in HSL, das eine Farbe als Farbton, Sättigung und Helligkeit beschreibt Farbton ist ein Winkel von 0 bis 360 Grad um das Rad (rot bei 0, grün bei 120, blau bei 240).Sättigung ist wie lebendig die Farbe ist, von 0% grau bis 100% Vollfarbe Die Helligkeit verläuft von 0% schwarz bis 100% weiß. HSL ist für das Web in der definiert CSS-Farbmodul Level 4 Spezifikation, und jeder Browser wandelt sie in die gleichen RGB-Werte um.
Durch die Arbeit in HSL lassen sich Harmonieregeln leicht ausdrücken. Eine Komplementärfarbe ist die gleiche Sättigung und Leichtigkeit, wobei dem Farbton 180 hinzugefügt werden. Das ist eine Ergänzung statt viel Herumfummeln mit RGB-Sliders.
Was sind die sechs Harmonymodi?
Jeder Modus ist ein Rezept, um sich von der Grundfarbe zu entfernen Hier ist genau das, was der Toolz-Generator in jedem einzelnen macht, entnommen aus seinem Quellcode.
| Mode | Was ändert sich | Swatches | Farbtonpositionen |
|---|---|---|---|
| Schattierungen & amp; Tönungen | Nur Leichtigkeit, eingestellt auf 90, 75, 60, den Basiswert, 35, 22 und 12 | 7 | Grundton |
| einfarbig | Leichtigkeit und Sättigung zusammen | 5 | Grundton |
| ergänzend | Der Farbton dreht sich um 180 Grad, mit einer helleren Basis und einer dunkleren Ergänzung | 4 | Basis, Basis + 180 |
| analog | Farbtonschritte 30 Grad pro Strecke | 5 | -60, -30, Basis, +30, +60 |
| triadisch | Farbton ein Drittel des Kreises voneinander entfernt | 3 | Basis, +120, +240 |
| Tetradisch | Farbton im Abstand von einem Viertel des Kreises | 4 | Basis, +90, +180, +270 |
Zwei Details sind in der Praxis wichtig Analog, triadisch und tetradisch behalten die Grundfarbe' s Sättigung und Helligkeit auf jedem Swatch, so dass sie nur den Farbton ändern Schattierungen & amp; Farbtöne und monochromatisch behalten den Farbton und verändern die Helligkeit, sodass sie helle und dunkle Versionen einer Farbe erzeugen.
Ein funktioniertes Beispiel: Jeder Modus von #4466ee
Der Generator öffnet sich mit #4466 ee, einem mittleren Blau Umgerechnet auf HSL ist es Farbton 228, Sättigung 83%, Leichtigkeit 60%. Hier ist, was jeder Modus für diese Basis zurückgibt. Dies sind die HEX-Codes, die das Tool druckt, und Sie können sie mit der Standard-HSL-zu-RGB-Umwandlung in der CSS-Spezifikation reproduzieren.
triadisch Fügt dem Farbton 120 und 240 hinzu: 228, dann 348, dann 108 (468 umschließt 108).
#4466ee hsl(228, 83%, 60%) blue
#ee4466 hsl(348, 83%, 60%) pink-red
#66ee44 hsl(108, 83%, 60%) green
Beachten Sie das Muster Bei gleicher Sättigung und Leichtigkeit werden durch Drehen um genau ein Drittel des Rades dieselben drei RGB-Kanalwerte neu gemischt: 44, 66 und ee-Handelsplätze.
ergänzend Fügt 180 hinzu, das auf Farbton 48 landet, ein warmes Gelb Der Modus beinhaltet auch eine hellere Version der Basis und eine dunklere Version des Komplements, sodass Sie vier Swatches erhalten: #8aa0f4, #4466ee, #eecc44 und #d2ac14.
analog Schritte jeweils 30 Grad von 168 bis 288: #44eecc, #44bbee, #4466ee, #7744ee, #cc44ee. Es liest sich als Band von blaugrün über blau bis violett.
Tetradisch Fügt 90, 180 und 270 hinzu: #4466ee, #ee44bb, #eecc44, #44ee77.
einfarbig behält Farbton 228 und tauscht Sättigung gegen Leichtigkeit in beide Richtungen: #c4cded, #879ae8, #4466ee, #0936ec, #0225b1.
Schattierungen & amp; Tönungen Setzt die Leichtigkeit auf 90, 75, 60, den Basiswert, 35, 22 und 12: #d0d9fb, #8aa0f4, #4466ee, #4466ee, #0f2da3, #0a1c67, #050f38.
Die letzte zeigt eine wissenswerte Macke Die Schattenskala verwendet feste Helligkeitsschritte plus die Basis's eigene Leichtigkeit, wenn die Basis zufällig bei genau 90, 75, 60, 35, 22 oder 12 Prozent Leichtigkeit sitzt, wie es #4466ee bei 60 tut, kommen zwei Muster identisch heraus Stupsen Sie die Basisleichtigkeit um einen Schritt an, wenn Sie sieben verschiedene Farben wollen.
Wie wählt man die richtige Harmonie für einen Job?
Wählen Sie die Harmonie danach, wie viel Kontrast das Design benötigt. Kontrastarme Schemata fühlen sich ruhig an und lassen sich leicht konsistent halten; kontrastreiche Schemata erregen Aufmerksamkeit und sind leicht zu übertreiben.
| Tor | Guter Startmodus | wieso |
|---|---|---|
| Eine UI-Farbskala (100 bis 700) | Schattierungen & amp; Tönungen | Einfarbige, vorhersehbare Hell-Dunkel-Schritte |
| Eine minimale, zusammenhängende Marke | einfarbig | Alles hat einen gemeinsamen Farbton, nichts kollidiert |
| Ein Call-to-Action, der auffällt | ergänzend | Der entgegengesetzte Farbton ist der stärkste Kontrast |
| Ein weicher, natürlicher Look | analog | Nachbarfarbenmischung |
| Ein spielerisches, ausgewogenes Set | triadisch | Drei gleichmäßig verteilte Farbtöne, keiner dominant |
| Charts mit mehreren Serien | Tetradisch | Vier verschiedene Farbtöne, die sich immer noch darauf beziehen |
Eine gängige Faustregel für Layouts ist, eine Farbe den größten Teil der Fläche abdecken zu lassen, eine zweite einen kleineren Anteil, und ein Akzent sparsam erscheinen zu lassen, Es funktioniert gut mit komplementären und triadischen Paletten, wo es tendenziell laut aussieht, allen Farben gleichen Raum zu geben.
Warum sieht eine Palette ausgewogen aus, liest sich aber schlecht?
Eine Palette kann in HSL ausgewogen aussehen und dennoch auf dem Bildschirm ausfallen, da die HSL-Leichtheit nicht so hell ist, wie eine Farbe für eine Person aussieht. HSL behandelt jeden Farbton mit 60% Helligkeit als gleichermaßen leicht. Das menschliche Sehen tut dies nicht.
Das ergänzende Beispiel oben macht dies konkret. #4466 ee und #eecc44 haben beide eine HSL-Helligkeit von 60%. Ihre relative Leuchtdichte, das Maß, das die Web Content Accessibility Guidelines für die wahrgenommene Helligkeit verwenden, ist sehr unterschiedlich: etwa 0,17 für das Blau und etwa 0,62 für das Gelb Das Gelb ist um ein Vielfaches heller für das Auge.
Diese Lücke zeigt sich als Kontrast unter Verwendung der WCAG-Formel Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist' s Leuchtdichte:
| Paar | Kontrastverhältnis | WCAG AA für normalen Text (4,5:1) |
|---|---|---|
| Weißer Text auf #4466ee | etwa 4,77:1 | Pässe |
| Weißer Text auf #eecc44 | ungefähr 1,57:1 | fehlschlagen |
| Schwarzer Text auf #eecc44 | ungefähr 13,4:1 | Pässe |
Der Generator selbst reagiert bereits darauf: Jeder Swatch wählt aus einer Helligkeitsschätzung dunklen oder weißen Beschriftungstext aus, weshalb die gelben Swatches dunkle Beschriftungen erhalten. Führen Sie für echte Designs die Text- und Hintergrundpaare aus, die Sie verwenden möchten, durch a Farbkontrastprüfung. Die Schwellenwerte stammen aus WCAG 2.2: 4,5:1 für normalen Text und 3:1 für großen Text auf Stufe AA. Die Farbkontrastführer Schritt für Schritt durch die Luminanz-Mathe geht.
Wie exportiert man eine Palette als CSS-Variablen?
Klicken Sie auf CSS kopieren und der Generator legt die aktuelle Palette als benutzerdefinierte CSS-Eigenschaften in Ihre Zwischenablage ein :root. Die Namen sind in Schritt 100 in Swatch-Reihenfolge nummeriert Für das triadische Beispiel:
:root {
--color-100: #4466ee;
--color-200: #ee4466;
--color-300: #66ee44;
}
Fügen Sie dies oben in ein Stylesheet ein und verweisen Sie überall auf die Farben:
.button-primary {
background: var(--color-100);
color: #ffffff;
}
Die Nummerierung folgt der Reihenfolge der Swatch, nicht der Helligkeit. In Shades & amp; Tönungsmodus, der zufällig hell bis dunkel läuft, also --color-100 Leichteste Tönung ist Im triadischen oder analogen Modus sind die Zahlen nur Positionen Benennen Sie die Variablen in etwas Sinnvolles wie --brand, --accent und --surface Wenn man sich einmal entschieden hat, denn --color-200 Bedeutet nichts für die nächste Person, die Ihr CSS liest.
Um stattdessen eine einzelne Farbe zu kopieren, klicken Sie auf deren Swatch Der HEX-Code geht in die Zwischenablage und der Swatch zeigt & quot; Copied" für einen Moment an.
Kann man damit eine Hochzeits - oder Pastellpalette machen?
Ja, solange du die Startfarbe mitbringst Es gibt keine Hochzeitsvoreinstellungen oder kuratierte Themes, daher ist die Palette nur so gut wie die Basis, die du wählst.
Für eine Hochzeit nehmen Sie eine Farbe von etwas Realem: die Blumen, die Einladungskarten-Stock, ein Brautjungfernkleid Stoff Geben Sie seinen HEX-Code ein und versuchen Sie jeden Modus Ausgehend von einem Salbeigrün, #9caf88, Complementary gibt #c2ceb6, #9caf88, ein staubiger Lavendel #9b88af und eine tiefere #755e8 d. Dieser Lavendel gegen Salbei ist eine klassische Paarung, und die Mathematik fand es in einem Klick.
Bei Pastellkreiden von einer blassen, weich gesättigten Basis wie #a7c7e7. Analog, triadisch und tetradisch halten diese Leichtigkeit und Sättigung auf jedem Farbmuster, so dass das ganze Set weich bleibt Schattierungen & amp; Farbtöne und monochromatisch bewegen absichtlich die Leichtigkeit, so fügen sie dunkle Farben hinzu, bis zu #0d1f30 für dieses Blau Es gibt keinen separaten Helligkeitsschieber; die Grundfarbe ist die Steuerung.
Bildschirmfarben und Druckfarben unterscheiden sich Ein Monitor mischt rotes, grünes und blaues Licht, während ein Drucker cyan, magenta, gelbe und schwarze Tinte auf Papier legt, und einige helle Bildschirmfarben haben kein genaues Tintenäquivalent Wenn eine Palette auf Briefpapier geht, bestellen Sie einen gedruckten Proof vor einem vollständigen Lauf.
Was sind die häufigen Fehler und Fehlerfälle?
Die meisten Palettenprobleme entstehen durch die Eingabe oder dadurch, dass man der Mathematik zu weit vertraut.
Die Palette wird beim Tippen blau. Bis das Textfeld einen gültigen HEX-Code enthält, fällt der Generator auf #4466ee zurück Ein halb typisierter Wert wie #9c oder #9caf8 Zeigt die standardmäßige blaue Palette an Das Feld akzeptiert drei oder sechs Hex-Ziffern, mit oder ohne die #, So #9ca Auf dem Weg zu #9caf88 Zeigt kurz eine Palette für #99ccaa.
Der Basis-Swatch ist einen Schritt entfernt. Farben werden auf ganze HSL-Nummern gerundet, bevor sie zurück konvertiert werden, so dass einige Basen nicht genau hin - und hergehen. #c08081 zum Beispiel kommt als #c18182 zurück Der Unterschied ist eine Einheit pro Kanal und unsichtbar, aber es ist wichtig, wenn Sie einen Markencode genau abgleichen: Behalten Sie den offiziellen HEX für die Basis und verwenden Sie die generierten für den Rest.
Jede Farbe überall verwenden. Eine analoge Fünf-Farben-Palette ist ein Bereich zur Auswahl, nicht fünf Farben, die alle einen Auftrag benötigen.
Kontrast überspringen. Wie oben gezeigt, können sich zwei Farben bei gleicher HSL-Leichtigkeit in der Leuchtdichte mehr als dreifach unterscheiden Textpaare prüfen.
Wahrnehmungsgerechtigkeit erwarten. Schattenschritte sind sogar in HSL-Leichtigkeit, nicht in ihrem Aussehen, wenn Sie eine Skala benötigen, die gleichmäßig aussieht, passen Sie einzelne Schritte nach Augenmaß an oder arbeiten Sie in einem Wahrnehmungsraum wie OKLCH, den auch CSS Color 4 definiert.
Wie ist das im Vergleich zu anderen Farbwerkzeugen?
Die Palettengenerierung ist ein Schritt in einem längeren Workflow, die Tabelle zeigt, welches Werkzeug zu jedem Schritt passt.
| Aufgabe | Werkzeug | Was es dir gibt |
|---|---|---|
| Eine Startfarbe finden oder probieren | Farbwähler | HEX, RGB und HSL für jede Farbe |
| Bauen Sie ein koordiniertes Set auf | Farbpalettengenerator | Sechs Harmonymodi, CSS-Export |
| Machen Sie eine feinkörnige Skala aus einer Farbe | Farbschattierungen Generator | Eine spezielle Tönungs- und Schattenrampe |
| Zwei Farben mischen | Farbmischer | Zwischenfarben zwischen zwei Eingängen |
| Textlesbarkeit prüfen | Farbkontrastprüfung | WCAG-Verhältnis und Bestehen oder Versagen |
Wenn die Skala wichtiger ist als die Harmonie, ist die Leitfaden zur Erzeugung von Schattierungen und Tönungen Tiefer geht es auf Gebäude 50 bis 900 Rampen Jedes Farbwerkzeug ist auf der Farbwerkzeuge Hubdrohen
Ist der Generator privat und funktioniert er offline?
Ja. Die ganze HSL-Mathe und das Rendering laufen in deinem Browser mit JavaScript, nichts was du eingibst wird hochgeladen, und nachdem die Seite geladen hat, wird die Palettengenerator Arbeitet weiterhin ohne Netzwerkverbindung. Das Kopieren eines Swatch oder des CSS zählt zu einem täglichen Nutzungslimit, das den Modus aufzeichnet, in dem Sie sich befanden, nicht Ihre Farben.
