Jedes Designsystem, das ich je ausgeliefert habe, begann mit einer einzigen Markenfarbe und brauchte dann sofort ein Dutzend mehr Ein Blau reicht nie, Man braucht ein helleres Blau für einen Hover-Zustand, ein viel helleres Blau für einen ausgewählten Zeilenhintergrund, ein dunkleres Blau für Text, der auf einer blassen Oberfläche sitzt, und ein gedämpftes Blau für einen deaktivierten Knopf, der nicht schreien sollte Als ich die Schnittstelle für [Toolz.dev] baute (/, ich öffnete ständig einen Farbwähler, stieß den Helligkeitsschieber an, überlegte, ob das Ergebnis noch wie dieselbe Familie aussah, und klebte Hexcodes gleichzeitig in mein Stylesheet ein. Es funktionierte aber langsam, und die Ergebnisse waren bis zu nicht uneinheitlich; & es ist nicht repeotnotnot;
Also habe ich das gebaut Farbschattierungen Generator. Sie geben ihm eine Farbe und es erhalten drei vollständige Maßstäbe, berechnet im Farbraum CSS-Farbmodul Level 4 Definiert und nicht durch Anstoßen von Hex-Ziffern: Tönungen, die in Richtung Weiß gehen, Schattierungen, die in Richtung Schwarz treten, und Töne, die in Richtung Grau treten. In diesem Leitfaden wird erklärt, was diese drei Wörter tatsächlich bedeuten, wie die Mathematik funktioniert und wie man eine einzelne Markenfarbe in eine kohärente Palette umwandelt Sie können direkt in CSS verfallen.
tl; dr: Eine Tönung ist Ihre Farbe gemischt mit Weiß, ein Farbton ist Ihre Farbe gemischt mit Schwarz, und ein Ton ist Ihre Farbe gemischt mit Grau Jeder behält den ursprünglichen Farbton und ändert nur, wie hell, dunkel oder gedämpft die Farbe aussieht Fügen Sie einen HEX-, RGB- oder HSL-Wert ein, wählen Sie aus, wie viele Schritte Sie möchten, und der Generator erstellt alle drei Skalen auf einmal, wobei jeder Swatch als HEX, RGB oder HSL kopierbar ist. Alles läuft in Ihrem Browser.
Was ist der Unterschied zwischen einer Tönung, einem Farbton und einem Ton?
Diese drei Wörter stammen aus der traditionellen Farbtheorie, und sie beschreiben drei verschiedene Möglichkeiten, eine Farbe zu ändern, ohne zu ändern, welche Farbe sie grundsätzlich ist. Die Unterscheidung lohnt sich, richtig zu werden, da Designer und zunehmend Design-Token die Wörter präzise verwenden.
Ein Tönung ist eine Farbe, die mit Weiß gemischt wird Das Hinzufügen von Weiß erhöht die Leichtigkeit und mildert die Farbe Rosa ist ein Rottönung, und Babyblau ist ein Tönung eines stärkeren Blaus Tönungen sind das, wonach Sie greifen, wenn Sie blasse Hintergründe, dezente Füllungen und die hellsten Oberflächen in einer Oberfläche benötigen.
Ein Farbton ist eine Farbe, die mit Schwarz gemischt wird Das Hinzufügen von Schwarz senkt die Helligkeit und vertieft die Farbe Maroon ist ein Rotton, und Marineblau ist ein Blauton Farbtöne geben Ihnen das dunklere Ende einer Skala: Textfarben, Zustände mit gepresstem Knopf und Ränder, die mehr Gewicht als die Basis benötigen.
Ein Ton ist eine Farbe, die mit Grau vermischt ist Das Hinzufügen von Grau reduziert die Farbe' s Intensität, ohne sie dramatisch heller oder dunkler zu machen Töne sind die am wenigsten verwendeten der drei, und sie sind das Geheimnis hinter Paletten, die sich raffiniert anfühlen, anstatt zu grillen Eine abgeschwächte Farbe liest sich als ruhiger und professioneller, weshalb gedämpfte Paletten das ernsthafte Produktdesign dominieren.
Das Wichtigste, was alle drei teilen, ist, dass sie den Farbton bewahren Ein Blauton ist immer noch blau, ein Blauton ist immer noch blau und ein Blauton ist immer noch blau Das ist es, was eine Reihe von Farbtönen, Schattierungen und Tönen wie eine Familie und nicht wie ein zufälliges Sortiment aussehen lässt.
Wie wird eigentlich jede Skala berechnet?
Unter der Haube ist jeder Swatch eine geradlinige Mischung zwischen zwei Farben im RGB-Raum, Der Generator nimmt Ihre Grundfarbe als Rot, Grün und Blau-Triple, und er nimmt eine Zielfarbe, dann geht er in geraden Schritten von einer zur anderen Für Tönungen ist das Ziel weiß, das ist (255, 255, 255)Bei Farbtönen ist das Ziel schwarz (0, 0, 0). Bei Tönen ist das Ziel mittelgrau, (128, 128, 128)drohen
Der Mix für jeden einzelnen Kanal ist eine einfache Arithmetik Um einen Swatch zu erhalten, der dreißig Prozent der Strecke von der Basis zum Ziel beträgt, berechnen Sie base + (target - base) * 0.30 Für den roten Kanal, dann den grünen Kanal, dann den blauen Kanal, und auf ganze Zahlen runden Eine zehnstufige Tönungsskala führt diese Berechnung mit zehn Prozent, zwanzig Prozent und so weiter bis zu hundert Prozent durch, wobei die Farbe reinweiß geworden ist Die Grundfarbe selbst ist als Null-Prozent-Swatch oben auf jeder Skala enthalten, sodass Sie immer sehen können, wo Sie angefangen haben.
Da die Mischung pro Kanal in RGB geschieht, bleibt der Farbton im Wesentlichen für Farbtöne und Farbtöne fixiert, Durch die Mischung in Richtung reines Weiß oder reines Schwarz ändert sich, wie viel Licht die Farbe reflektiert, aber nicht ihr zugrunde liegender Charakter, so dass eine Tönung und ein Farbton derselben Basis bei unterschiedlicher Helligkeit als dieselbe Farbe gelesen werden. Töne können den wahrgenommenen Farbton eines Haares verschieben, da Grau in der neutralen Mitte sitzt und zu ihm zieht, jeden Kanal leicht entsättigt, aber in der Praxis liest sich die gesamte Skala immer noch als eine Farbe. Wenn Sie genau untersuchen möchten, wie ein bestimmter Farbwechsel formatübergreifend landet, wird die Farbkonverter Zeigt Ihnen die HEX-, RGB-, HSL- und HWB-Werte nebeneinander an.
Warum nicht einfach die Leichtigkeit in HSL ändern?
Eine vernünftige Frage ist, warum sich das Tool in RGB mischt, anstatt es einfach anzuheben oder zu senken L Wert in HSL. Beide Ansätze erzeugen eine monochromatische Skala, und beide sind gültig Die Mischung in Richtung Weiß und Schwarz in RGB ist das klassische Modell von Malern's von Farbtönen und Farbtönen, und es bildet sich sauber auf die Wörter ab, die Designer bereits verwenden Es hält auch die Endpunkte ehrlich: Eine hundertprozentige Tönung ist genau weiß und eine hundertprozentige Farbtönung ist genau schwarz, was nicht immer zutrifft, wenn man die HSL-Leichtheit nur manipuliert, weil die Sättigung mit ihr interagiert Der Generator gibt Ihnen Töne als dritte Skala speziell, um die " Achse abzudecken intensive" Achse, die eine reine Helligkeitsänderung nicht berücksichtigt.
Wie viele Schritte soll ich generieren?
Mit dem Generator können Sie zwischen zwei und zwanzig Schritten pro Skala auswählen, und die richtige Anzahl hängt davon ab, was Sie bauen. Für ein Designsystem, bei dem Sie eine benannte Rampe wie wünschen blue-50 durchgehend blue-900„Eine größere Schrittanzahl ergibt einen feinen Farbverlauf, aus dem Sie probieren können. Für ein schnelles Paar Schwebe- und Aktivzustände sind drei oder vier Schritte reichlich. Meine Standardeinstellung ist zehn, denn zehn Farbtöne, zehn Farbtöne und zehn Töne von einer Basis ergeben eine vollständige Arbeitspalette ohne eine überwältigende Wand aus Swatches.
Mehr Schritte bedeuten kleinere Sprünge zwischen benachbarten Farben, was Sie wollen, wenn benachbarte Farbtöne optisch deutlich, aber nah sein müssen, wie die abwechselnden Bänder einer Datentabelle Weniger Schritte bedeuten mutigere Sprünge, was zu einer kompakten Palette passt, bei der jede Farbe einen deutlich anderen Job hat Es gibt keine falsche Antwort, und weil das Tool sofort neu berechnet, können Sie die Schrittanzahl auf und ab verschieben, bis der Abstand richtig aussieht.
Wie unterscheiden sich Tönungen von der Verringerung der Opazität?
Eine Falle, in die ich früh tappte, war die Verwendung von Deckkraft, um einen Farbton vorzutäuschen Es scheint gleichwertig: Einen blauen Knopf auf fünfzig Prozent Deckkraft über eine weiße Seite fallen lassen und es sieht aus wie ein helleres Blau Das Problem ist, dass Deckkraft keine Farbe ist, es ist eine Compositing-Anweisung, und es hängt ganz davon ab, was auch immer hinter dem Element sitzt Dasselbe fünfzigprozentige Blau über einer dunklen Oberfläche wird zu einem schlammigen Dunkelblau, und über einem Foto wird es unvorhersehbar Ihr & quot; Hellblau&Quot; verändert die Identität je nach Hintergrund, was das Gegenteil von dem ist, was ein Designsystem braucht.
Eine Tönung löst dies, indem sie die Leichtigkeit in eine echte, undurchsichtige Farbe backt, Der Swatch, den der Generator Ihnen gibt, ist ein fester Hex-Wert, der gleich aussieht, egal was dahinter steckt, denn er ist voll undurchsichtig Wenn Sie eine konsistente hellere Version einer Farbe benötigen, die sich vorhersehbar über jede Oberfläche Ihres Produkts hinweg verhält, verwenden Sie eine Tönung statt einer Transparenz Reservieren Sie Opazität für echte Transparenzeffekte, wie Überlagerungen und Gelege, bei denen Sie tatsächlich möchten, dass der Hintergrund durchschaut. Diese beiden Ideen getrennt zu halten, ist eines der ruhigen Gewohnheiten, die eine Palette fest und nicht zufällig anfühlen lassen.
Wie mache ich aus diesen Waagen eine brauchbare Palette?
Eine Palette ist nicht nur ein Haufen Farben, es ist eine Menge von Zuweisungen Hier ist der Workflow, den ich verwende, wenn ich von einer einzelnen Markenfarbe ausgehe Nimm die Basis als deine primäre Aktionsfarbe, die auf deinen Hauptknöpfen und Links Greife in die Farbtöne für Hintergründe: eine sehr leichte Tönung für Seiten - oder Kartenoberflächen, eine etwas stärkere Tönung für den Schwebezustand eines hellen Elements Greife in die Farbtöne für Text und Betonung: eine tiefe Farbtönung für Körperkopie, die Kontrast gegen eine blasse Tönung benötigt, eine mittlere Farbtönung für den gedrückten Zustand deiner Primärtaste Benutze einen Ton, wenn du die Farbe vorhanden, aber leise brauchst, wie eine deaktivierte Steuerung oder ein sekundäres Abzeichen.
Die eine Regel, die Sie nicht überspringen können, ist Kontrast Eine Tönung, die als Knopfhintergrund schön aussieht, ist nutzlos, wenn der darauf befindliche Beschriftungstext die Anforderungen an den Barrierefreiheitskontrast nicht erfüllt Sobald Sie die Farbpaare ausgewählt haben, die übereinander sitzen, führen Sie sie durch die Farbkontrast-Checker Um zu bestätigen, dass sie die WCAG-Schwellenwerte löschen Das Aussuchen schöner Farbtöne ist der einfache Teil. Sicherzustellen, dass der Text darauf lesbar ist, ist der Teil, der eine echte Palette von einem Moodboard trennt.
Die folgende Tabelle zeigt, wie ich normalerweise eine zehnstufige Skala auf Schnittstellenrollen abbilde.
| Swatch-quelle | Typische Rolle | Beispielverwendung |
|---|---|---|
| Leichteste Tönungen | Oberflächen und Hintergründe | Seitenhintergrund, Kartenfüllung, ausgewählte Zeile |
| Leichte Tönungen | Schwebezustände auf leichten Elementen | Knopf-Hover, Listen-Item-Hover |
| Grundfarbe | Primäre Aktion | Haupttaste, aktiver Link, Markenakzent |
| Mitteltöne | Gedrückte und aktive Zustände | Knopf aktiv, fokussierte Grenze |
| Dunkle Farbtöne | Text und hohe Betonung | Fließtext auf Lichtflächen, Überschriften |
| Töne | Gedämpfte Nebenelemente | Behindertengerechte Bedienelemente, sekundäre Abzeichen |
Wie passt das neben andere Farbwerkzeuge?
Der Shades Generator ist ein Instrument in einem kleinen Orchester Es beantwortet die Frage & quot; gib mir mehr von dieser einen Farbe, & quot; aber echte Palettenarbeit berührt auch ein paar benachbarte Fragen Wenn du harmonische Farben brauchst, die nicht den gleichen Farbton haben, wie ein komplementäres oder analoges Set, wird die Farbpalettengenerator Baut diese Beziehungen auf Wenn Sie eine Startfarbe aus einem Bild oder einem Design abtasten und deren genauen Wert lesen müssen, ist die Farbpflücker Holt Ihnen den Hex-Code Und wenn Ihre Farbtöne für einen CSS-Hintergrund bestimmt sind, der von einem zum anderen verblasst, wird die Gradientengenerator Zwei davon zu einem einpackfertigen linear-gradientdrohen
Die natürliche Pipeline sieht so aus: Wählen oder fügen Sie eine Grundfarbe ein, generieren Sie ihre Farbtöne, Schattierungen und Töne, überprüfen Sie die Paare, die Sie stapeln möchten, anhand des Kontrastprüfers und kopieren Sie die Gewinner in Ihr Stylesheet oder Ihre Design-Token. Jedes dieser Tools läuft vollständig im Browser, sodass eine Markenfarbe, die Sie noch nicht angekündigt haben, niemals an irgendjemanden weitergeleitet wird' s-Server. Wenn Local-First-Tooling ein Wert ist, den Sie teilen, ist das Stück auf Datenschutz und Online-Tools Erklärt, warum ich alles so baue, und die Webentwickler-Toolkit Sammelt den Rest der Dienstprogramme, die in meinem täglichen Arbeitsablauf leben.
Ein schnell gearbeitetes Beispiel
Beginnen Sie mit der Marke blau #4466EE. Stellen Sie die Schrittanzahl auf zehn ein und lassen Sie das Kopierformat auf HEX. Der Generator gibt drei Spalten zurück.
Die Tönungssäule beginnt bei #4466EE und klettert in Richtung Weiß, durch immer blassere Blautöne, bis der letzte Schwung erreicht ist #FFFFFF. Irgendwo in der Mitte bekommt man ein weiches Immergrün, das einen hervorragenden ausgewählten Reihenhintergrund ergibt Die Farbtonspalte beginnt gleich #4466EE Und steigt nach Schwarz hinab, wodurch Sie tiefe Indigos erhalten, die für Text und gedrückte Zustände geeignet sind und bei enden #000000. Die Tonspalte beginnt bei #4466EE Und bewegt sich in Richtung Grau, wodurch gedämpfte Schieferblau-Stücke entstehen, die sich ruhig und zurückhaltend lesen und bei enden #808080drohen
Von dieser einen Eingabe haben Sie nun einen Hintergrund (einen hellen Farbton), eine Hover-Füllung (einen etwas dunkleren Farbton), eine Primärfarbe (die Basis), eine Textfarbe (einen dunklen Farbton) und eine deaktivierte Farbe (einen Ton). Klicken Sie auf einen beliebigen Swatch, um ihn zu kopieren, wechseln Sie das Kopierformat auf RGB oder HSL, wenn Ihr Projekt diese bevorzugt, und fügen Sie ein. Früher gab es zwanzig Ausflüge zu einem Farbwähler, jetzt sind es ein Einfügen und eine Handvoll Klicks, und da die Mathematik deterministisch ist, ist die Palette jedes Mal konsistent.
Häufig gestellte Fragen
Was ist der Unterschied zwischen einer Tönung, einem Farbton und einem Ton?
Eine Tönung ist eine Farbe, die mit Weiß gemischt wird, wodurch sie heller wird Ein Farbton ist eine Farbe, die mit Schwarz gemischt wird, wodurch sie dunkler wird Ein Ton ist eine Farbe, die mit Grau gemischt wird, wodurch sie stummgeschaltet wird, ohne dass sich ändert, ob sie hell oder dunkel ist Alle drei behalten den ursprünglichen Farbton und verändern nur, wie hell, dunkel oder gesättigt die Farbe erscheint.
Wie erzeuge ich Farbtöne?
Geben Sie Ihre Grundfarbe ein, lesen Sie dann die Farbtonspalte, die die Farbe mit zunehmenden Mengen von Schwarz mischt Jede Zeile ist eine dunklere Version des Originals in einem geraden Schritt, und Sie können jede von ihnen als HEX, RGB, oder HSL. Erhöhen Sie die Schrittanzahl für einen glatteren Bereich von dunklen Werten.
Wie werden die helleren und dunkleren Farben berechnet?
Jede Tonleiter ist eine lineare Mischung der Grundfarbe in Richtung eines Ziels. Farbtöne verschmelzen zu Weiß (255, 255, 255), Farbtöne verschmelzen zu Schwarz (0, 0, 0) und Farbtöne verschmelzen zu Mittelgrau (128, 128, 128).Eine 30% ige Tönung bewegt beispielsweise jeden roten, grünen und blauen Kanal zu 30% von der Basis nach Weiß.
In welche Farbformate kann ich einfügen?
Sie können einen HEX-Code (3 oder 6 Ziffern, mit oder ohne führenden Hash), einen rgb () - Wert, einen hsl () - Wert oder einen gängigen CSS-Farbnamen wie Crimson oder Steelblue eingeben Das Tool wandelt Ihre Eingabe intern in RGB um und meldet jeden Swatch in HEX, RGB und HSL.
Wie viele Farbtöne kann ich generieren?
Sie können zwischen 2 und 20 Schritte pro Tonleiter einstellen Jede Tonleiter enthält auch die ursprüngliche Grundfarbe, so dass eine 10-stufige Einstellung Ihnen die Basis plus zehn Tönungen, zehn Farbtöne und zehn Töne gibt Weniger Schritte geben mutige Sprünge zwischen den Werten, während mehr Schritte einen feinen Verlauf ergeben.
Kann ich mit diesem Tool eine monochromatische Palette erstellen?
Ja. Eine monochromatische Palette verwendet einen Farbton mit unterschiedlichen Helligkeits- und Sättigungsniveaus, was genau die Farbtöne, Farbtöne und Töne erzeugen. Wählen Sie eine Grundmarkenfarbe und verwenden Sie deren Farbtöne für Hintergründe, die Basis für Primärelemente und ihre Farbtöne für Text- oder Schwebezustände.
Behalten die generierten Farben den gleichen Farbton bei?
Farbtöne und Farbtöne behalten den Farbton fast genau bei, da die Mischung mit reinem Weiß oder Schwarz eher die Helligkeit als den Farbton verändert. Töne können sich sehr leicht verschieben, da Grau im Zentrum des Farbraums steht, aber für praktische Designarbeiten liest sich die gesamte Tonleiter als eine Familie derselben Farbe.
Ist der Farbschattierungsgenerator kostenlos und privat?
Ja. Es ist völlig kostenlos ohne Anmeldung und ohne Grenzen. Alle Pars und Farbmathematik laufen in Ihrem Browser mit clientseitigem JavaScript, sodass die von Ihnen eingegebenen Farben Ihr Gerät nie verlassen und das Tool nach dem Laden der Seite offline weiterarbeitet.
