HEX to Tailwind Converter

Das ist ein HEX-zu-Tailwind-Umrechner. Er findet die nächste Standardklasse per CIEDE2000. In v3 ist #3B82F6 blue-500.

Beispiele

Nahe Alternativen

Vollständige Tailwind-Palette

Mehrere Farben auf einmal umwandeln. Eine pro Zeile, oder Kommas wie #3B82F6, #FF573380. Beispiel einfügen füllt drei Zeilen und die Tabelle darunter.

HEX to Tailwind Converter

Das ist ein HEX-zu-Tailwind-Umrechner: Er findet die nächste Standardklasse per CIEDE2000. In v3 ist #3B82F6 blue-500.

So geht’s

  1. HEX einfügen, Farbe wählen, Zufällig, Beispiel-Swatch oder (wenn der Browser es erlaubt) Pipette.
  2. v4 oder v3 wählen. Nächste Klasse, HEX und ΔE00 ablesen.
  3. bg-, text-, border-, ring-, fill- oder einen beliebigen Wert wie bg-[#1D9BF0] kopieren.
  4. Wenn der Treffer nicht passt, eine Alternative klicken. Das Raster ist die volle Palette der gewählten Version.
  5. Beispiel zeigt #3B82F6. Ergebnis kopieren kopiert die Klasse mit Präfix. Stapel akzeptiert HEX oder Klassennamen.

ΔE lesen

ΔE ≤ 1 ist faktisch dieselbe Farbe. ΔE ≤ 2 reicht für UI. ΔE ≤ 5 für Hintergründe. Darüber bg-[#hex] nutzen, damit die Markenfarbe exakt bleibt.

Hinweise

Nur Standardpalette (slate…rose, 50–950, Schwarz und Weiß). Keine eigenen Theme-Farben. WCAG-Kontrast steht auf Color Converter. Verwandt: HEX to RGB.

Wofür

Mockup-HEX in eine Klasse, prüfen ob es einen Markenzwilling gibt, v3 und v4 vor dem Upgrade vergleichen.

Fragen

v3 oder v4?

Beides. Standard ist v4. Für die alte HEX-Palette v3 wählen. Dasselbe HEX kann auf andere Klassennamen fallen.

Gleich nah?

Das kleinere ΔE gewinnt. Bei Gleichstand die Palettenreihenfolge.

Nichts nah genug?

Den beliebigen Wert kopieren, z. B. bg-[#1D9BF0].