Nächste Tailwind-Farbe
Nearest Tailwind Colour
Findet zu jeder Farbe den nächstgelegenen Eintrag der Tailwind-Palette und zeigt den wahrnehmbaren Abstand.
Findet den Eintrag der Tailwind-Palette, der einer Farbe, die Sie haben, am nächsten liegt, gemessen als ΔE in OKLab statt als Abstand in RGB. Es beantwortet außerdem die andere und oft nützlichere Frage, zu welcher Familie Ihre Farbe gehört.
Ihre Farbe
Womit hier gemessen wird
Der Abstand ist ΔE in OKLab, nicht der euklidische Abstand in RGB. In RGB liegen Marineblau und reines Blau 128 auseinander, und zwei mittlere Grautöne im Abstand von sechzehn kommen viermal näher heraus — bei einem weit sichtbareren Unterschied. OKLab wurde so gebaut, dass der Abstand in gerader Linie dem wahrgenommenen Unterschied nahekommt, und genau danach wird hier gefragt.
- ≤ 0,001 — Identisch — das ist die Tailwind-Farbe.
- ≤ 0,02 — Unterhalb der eben wahrnehmbaren Differenz. Ein sicherer Tausch.
- ≤ 0,05 — Nebeneinander sichtbar verschieden, für sich allein nah genug.
- ≤ 0,1 — Eine sichtbare Änderung. Für einen Hintergrund in Ordnung, für ein Markenzeichen nicht.
- > 0,1 — Eine andere Farbe. Tailwind hat nichts in dieser Nähe — erweitern Sie lieber das Theme.
Palette aus dem installierten Tailwind 4.3.3 gelesen und bei jedem Lauf durch einen Test dagegen geprüft.
Nächste Übereinstimmung
indigo-600
#4f39f6Nebeneinander sichtbar verschieden, für sich allein nah genug.
ΔE OKLab
0,0319
Tailwind-Wert
oklch(51.1% 0.262 276.966)
Nächstbeste
- indigo-700
#432dd7ΔE 0,0545 - blue-700
#1447e6ΔE 0,0580 - blue-600
#155dfcΔE 0,0698 - indigo-500
#6260ffΔE 0,0745 - violet-700
#7008e7ΔE 0,0810 - violet-600
#7f22feΔE 0,0925 - violet-800
#5d0ec0ΔE 0,1010
Nächste Familien
- indigobeste Stufe 600ΔE 0,0319
- bluebeste Stufe 700ΔE 0,0580
- violetbeste Stufe 700ΔE 0,0810
- purplebeste Stufe 700ΔE 0,1132
- skybeste Stufe 700ΔE 0,1415
Eine andere Frage als „die nächste Farbe“, und oft die nützlichere: zu welcher Familie Ihre Markenfarbe gehört, bewertet an deren bester Stufe.
Ist hier nichts nah genug, lautet die Antwort, das Theme zu erweitern statt sich mit dem Nächstbesten zufriedenzugeben — eine ganze Reihe von 50 bis 950 erzeugen aus Ihrer Farbe und in @theme einfügen.
So funktioniert es
Geben Sie Ihre Farbe ein
Gewöhnlich ein Marken-Hex, das Ihnen jemand geschickt hat. Der nächste Token, sein Hex und das ΔE erscheinen sofort.
Überspringen Sie die Neutralen, wenn Sie einen Farbton suchen
slate, gray, zinc, neutral und stone gewinnen jede Anfrage in der Nähe von Grau, was korrekt ist und selten die Antwort, die Sie wollten.
Lesen Sie die Familienliste
Jede Familie mit ihrer besten Stufe bewertet. „Ihre Markenfarbe ist ein Indigo“ ist handlungsfähiger als „das nächste Farbfeld ist indigo-600“.
Häufige Fragen
Warum ΔE statt RGB-Abstand?
Weil der RGB-Abstand nicht zu dem passt, was Sie sehen. Er setzt Marineblau und reines Blau 128 auseinander und nennt zwei Mittelgrautöne mit Abstand sechzehn viermal näher – bei einem Unterschied, der weit sichtbarer ist. OKLab wurde so gebaut, dass der geradlinige Abstand den wahrgenommenen Unterschied annähert.
Was ist ein gutes ΔE?
Unter etwa 0,02 in OKLab ist praktisch dieselbe Farbe; bis 0,05 ist ein Treffer, den niemand hinterfragt; jenseits von 0,1 wählen Sie eine andere Farbe und sollten das laut sagen. Die Schwellen stehen auf der Seite.
Warum ist ein Eintrag als außerhalb von sRGB markiert?
Weil Tailwind seine Palette inzwischen in OKLCH definiert und einige Einträge außerhalb dessen landen, was sRGB zeigen kann. Das Hex ist eine in den Farbraum gemappte Näherung; der `oklch()`-Wert behält die zusätzliche Sättigung auf einem P3-Display.
Nichts ist nah genug. Was jetzt?
Erweitern Sie das Theme, statt das Nächste zu akzeptieren. Erzeugen Sie aus Ihrer Farbe eine volle Skala von 50 bis 950 und fügen Sie sie in `@theme` ein – eine Markenfarbe, die zum nächsten Standard-Farbfeld angenähert wurde, hört auf, die Markenfarbe zu sein.
Eingabe aus
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.
Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
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.
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.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
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.
Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
CSS-Token-Extraktor
CSS Token Extractor
Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.
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.
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.