Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
Baut aus einer Farbe eine Skala von 50 bis 950, so wie ein Designsystem sie will. Die Helligkeitsziele sind der Mittelwert von Tailwinds eigenen bunten Familien, aus dem installierten Paket gemessen statt von Hand gewählt, das Ergebnis landet also dort, wo Ihr Auge jede Stufe schon erwartet. Ein Regler bewegt sich zwischen dieser vertrauten Kurve und einer gleichmäßig verteilten.
Basisfarbe
Farbton und Chroma säen die Reihe; die Helligkeit entscheidet, welche Stufe als die von Ihnen gewählte markiert wird.
Reihe
Die Helligkeitsziele sind der Mittelwert von Tailwinds eigenen bunten Familien, aus dem installierten Paket gemessen statt hier festgelegt.
Dunkler Modus
Aus Stufe 50 wird 950, aus 100 wird 900, und so weiter. Die Token-Namen behalten ihre Bedeutung — 500 ist weiterhin der mittlere Ton — und eine gegen die Skala geschriebene Komponente braucht überhaupt keine Änderung.
Hell
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Export
Sie suchen einen Satz Farbtöne statt der Reihe eines einzigen? Der Palettengenerator baut Harmonien. Um zu einer davon das nächste Tailwind-Token zu finden, misst die Suche nach der nächsten Farbe den Abstand in ΔE.
So funktioniert es
Geben Sie die Grundfarbe ein
Ihr Farbton und ihr Chroma säen die Skala. Ihre Helligkeit entscheidet, welche Stufe den Ring bekommt – die Stufe, die der mitgebrachten Farbe am nächsten ist.
Entscheiden Sie, wie vertraut die Kurve sein soll
Bei 100 % sitzen die Stufen dort, wo Tailwind sie setzt, und das ist, was jeder im Team schon im Kopf hat. Bei 0 ist die Skala eine gerade Linie von 0,97 bis 0,25 – gleichmäßiger verteilt und weniger vertraut. Es gibt keine richtige Antwort; ein bestehendes Produkt zu treffen ist der übliche Grund, bei 100 % zu bleiben.
Fügen Sie Farbtondrift hinzu, wenn das dunkle Ende falsch aussieht
Echte Familien driften: Tailwind-Rot läuft von 17° bei Stufe 50 bis 26° bei 950, weil ein dunkles Rot etwas wärmer besser wirkt. Ein paar Grad reichen gewöhnlich; der Regler geht in beide Richtungen bis 40.
Entscheiden Sie, ob Sie in sRGB bleiben
An: Jede Stufe ist eine Farbe, die jeder Bildschirm zeigen kann, und das Hex ist exakt. Aus: Die mittleren Stufen eines gesättigten Farbtons behalten ihr Chroma, ein P3-Display zeigt sie, und das Hex wird zur Näherung – die überlaufenden Stufen sind markiert.
Exportieren Sie als Variablen, Tailwind-Theme oder JSON
Das Präfix ist Ihres. Die JSON-Form trägt außerdem die Helligkeitsanker, was nützlich ist, wenn etwas nachgelagert dieselbe Skala neu bauen muss.
Häufige Fragen
Mein Marken-Hex kommt nirgends in der Skala vor. Ist das ein Fehler?
Nein, und es ist das ehrliche Verhalten. Die Skala wird aus Helligkeitszielen gebaut, nicht durch Ihre Farbe gefädelt, sofern Ihre Farbe also nicht zufällig genau auf einem der elf Ziele sitzt, erscheint sie nicht wörtlich. Die Stufe mit dem Ring ist die nächste. Wenn das exakte Hex drin sein muss, verwenden Sie es direkt für diesen Token und lassen Sie die Skala den Rest liefern.
Sind das Tailwind-Farben?
Nein. Was von Tailwind kommt, ist die *Form* der Kurve – die elf Helligkeitswerte, über seine bunten Familien gemittelt. Farbton und Chroma sind Ihre. Um herauszufinden, welcher Tailwind-Token einer Farbe, die Sie haben, am nächsten liegt, misst die Nächste-Farbe-Suche das in ΔE.
Bedeutet „wahrnehmungsbezogen gleichmäßig“, dass sich jede Stufe um denselben Betrag unterscheidet?
Nur bei 0 % Verankerung. Bei 100 % folgt die Skala absichtlich Tailwinds Kurve, die nicht gleichmäßig verteilt ist – sie drängt das helle Ende zusammen, damit es genug brauchbare Hintergrundtöne gibt. Was OKLCH so oder so kauft, ist, dass die Zahlen wahrnehmungsbezogen etwas bedeuten, sodass zwei so gebaute Familien im Gleichschritt miteinander stufen.
Bestehen die Stufen WCAG gegeneinander?
Diese Seite prüft das nicht, über das Nachweis-Panel auf dem Dunkelmodus-Tab hinaus. Gleiche Helligkeitsstufen sind keine gleichen Kontraststufen, weil der WCAG-Kontrast auf der relativen Leuchtdichte berechnet wird und OKLCH-Helligkeit keine lineare Funktion davon ist. Bringen Sie das Paar, das Sie tatsächlich verwenden wollen, zum Kontrastprüfer.
Eingabe aus
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
Dark-Mode-Palette
Dark Mode Palette
Baut aus einer Farbe eine Rampe von 50 bis 950 und spiegelt sie in eine dunkle, sodass jedes Token-Paar seinen Kontrast behält.
Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
Nächste Tailwind-Farbe
Nearest Tailwind Colour
Findet zu jeder Farbe den nächstgelegenen Eintrag der Tailwind-Palette und zeigt den wahrnehmbaren Abstand.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.