Farben Auswaehlen und Konvertieren

Waehlen Sie eine beliebige Farbe und konvertieren Sie sofort zwischen HEX, RGB, HSL, CMYK und Tailwind CSS-Klassen.

Der interaktive Farbwaehler ermoeglicht es Ihnen, visuell eine beliebige Farbe auszuwaehlen oder einen Wert in einem Format einzugeben und sofort die Konvertierung in HEX, RGB, HSL, CMYK und Tailwind CSS-Klassen zu sehen. Kopieren Sie einzelne Werte oder alle Formate auf einmal. Alles laeuft in Ihrem Browser ohne Serververarbeitung; Ihre Farben bleiben privat.

Deine Daten bleiben in deinem Browser
War dieses Tool hilfreich?
Anleitung

Anleitung

1
1

Waehlen Sie eine Farbe

Verwenden Sie den visuellen Farbwaehler oder geben Sie einen HEX-Wert ein, um die zu konvertierende Farbe auszuwaehlen.

2
2

Alle Formate anzeigen

Sehen Sie sofort Ihre gewaehlte Farbe in HEX, RGB, HSL, CMYK und Tailwind CSS-Klassen-Notation ausgedrueckt.

3
3

Werte kopieren

Klicken Sie auf ein beliebiges einzelnes Format zum Kopieren, oder verwenden Sie Alles Kopieren fuer alle Formate auf einmal.

Guide

Farbformate Verstehen

HEX und RGB

HEX ist ein sechsstelliger Code mit dem Praefix #, der die Rot-, Gruen- und Blau-Kanaele in Hexadezimal darstellt. RGB verwendet Dezimalwerte von 0 bis 255 fuer jeden Kanal. Beide beschreiben denselben additiven Farbraum; HEX ist einfach eine kompakte Notation des gleichen RGB-Triplets.

HSL-Farbmodell

HSL steht fuer Farbton, Saettigung und Helligkeit. Der Farbton ist ein Grad auf dem Farbkreis (0-360), die Saettigung ist die Intensitaet als Prozentsatz und die Helligkeit steuert, wie hell oder dunkel die Farbe erscheint. HSL ist oft einfacher programmatisch anzupassen, da Sie die Helligkeit aendern koennen, ohne den Farbton zu veraendern.

CMYK fuer den Druck

CMYK steht fuer Cyan, Magenta, Gelb und Key (Schwarz) und ist das Standardmodell fuer die Druckproduktion. Die Konvertierung von RGB zu CMYK beinhaltet die Zuordnung additiver Bildschirmfarben zu subtraktiven Tintenprozentsaetzen. Die Ergebnisse koennen je nach Druckerprofil und Papiersorte variieren.

Tailwind CSS-Farbklassen

Tailwind CSS liefert eine kuratierte Palette benannter Farbklassen wie bg-blue-500 oder text-emerald-700. Dieses Tool findet die naechstgelegene Tailwind-Klasse zu Ihrer gewaehlten Farbe, um innerhalb der Framework-Palette zu bleiben und gleichzeitig eine bestimmte Farbe aus einem Design-Entwurf abzugleichen.

Examples

Geloeste Beispiele

Beispiel: Marken-Orange Konvertieren

Ziel: Die Markenfarbe #FF5733 in alle unterstuetzten Formate fuer einen Styleguide konvertieren.

1

Schritt 1: Geben Sie #FF5733 in das HEX-Eingabefeld ein.

2

Schritt 2: Lesen Sie das RGB-Ergebnis: rgb(255, 87, 51).

3

Schritt 3: Lesen Sie das HSL-Ergebnis: hsl(11, 100%, 60%).

4

Schritt 4: Lesen Sie das CMYK-Ergebnis: cmyk(0%, 66%, 80%, 0%).

5

Schritt 5: Notieren Sie die angezeigte naechstgelegene Tailwind-Klasse.

Ergebnis: Alle fuenf Formate sind dokumentiert und bereit zum Einfuegen in den Marken-Styleguide.

Beispiel: Tailwind-Entsprechung Finden

Ziel: Bestimmen, welche Tailwind CSS-Klasse dem vom Designer gewaehlten Blau #3B82F6 am naechsten kommt.

1

Schritt 1: Geben Sie #3B82F6 in die HEX-Eingabe ein.

2

Schritt 2: Das Tool zeigt die naechstgelegene Tailwind-Klasse: blue-500.

3

Schritt 3: Kopieren Sie den Klassennamen und verwenden Sie ihn in der Komponente.

Ergebnis: Die Komponente verwendet jetzt die richtige Tailwind-Utility-Klasse und haelt das Projekt konsistent mit der Framework-Palette.

Anwendungsfälle

Anwendungsfaelle

Dokumentation von Markenfarben

Beim Erstellen eines Marken-Styleguides benoetigen Sie jede Farbe in mehreren Formaten. Waehlen Sie Ihre Markenfarbe einmal und erhalten Sie sofort HEX fuer Web, RGB fuer digitale Assets, CMYK fuer Druckdateien und Tailwind-Klassen fuer Komponentenbibliotheken.

CSS-Entwicklungs-Workflow

Front-End-Entwickler muessen beim Schreiben von Stylesheets haeufig zwischen Farbformaten konvertieren. Nehmen Sie eine Farbe aus einem Design-Mockup in HEX und konvertieren Sie sie in HSL fuer einfachere Helligkeitsanpassungen oder in einen RGB-Wert fuer Opazitaetsberechnungen in CSS.

Farbabstimmung fuer Druckdesign

Designer, die Dateien fuer den Druck vorbereiten, benoetigen genaue CMYK-Werte, die ihren Bildschirmfarben entsprechen. Waehlen Sie die Farbe visuell aus, ueberpruefen Sie, ob der HEX-Wert mit der Designdatei uebereinstimmt, und kopieren Sie dann die CMYK-Aufschluesselung direkt in die Layoutsoftware.

Haeufig Gestellte Fragen

?Welche Farbformate unterstuetzt dieses Tool?

Es unterstuetzt HEX, RGB, HSL, CMYK und Tailwind CSS-Klassennamen. Alle Formate werden gleichzeitig aktualisiert, wenn Sie eine Farbe auswaehlen.

?Wie genau ist die CMYK-Konvertierung?

Die Konvertierung verwendet Standardformeln zur Approximation von CMYK aus RGB-Werten. Fuer professionellen Druck ueberpruefen Sie mit einem kalibrierten Farbprofil.

?Kann ich einen Farbwert einfuegen, anstatt den Waehler zu verwenden?

Ja; geben Sie einen gueltigen HEX-Farbcode in das Eingabefeld ein und alle anderen Formate werden sofort aktualisiert.

?Was sind Tailwind CSS-Klassen?

Tailwind CSS verwendet Utility-Klassennamen wie bg-red-500, um Farben anzuwenden. Dieses Tool zeigt die naechstgelegene Tailwind-Klasse fuer Ihre Farbe.

?Sind meine Daten privat?

Ja; alles laeuft vollstaendig in Ihrem Browser. Keine Farbdaten werden an einen Server gesendet. Ihre Auswahl bleibt auf Ihrem Geraet.

?Ist dieses Tool kostenlos?

Ja; voellig kostenlos ohne Einschraenkungen, ohne Registrierung und ohne Premium-Funktionen. Verwenden Sie es so oft Sie moechten ohne Kosten.

Hilf uns besser zu werden

Wie gefällt Ihnen dieses Tool?

Jedes Tool bei Kitmul wird auf Basis echter Nutzeranfragen gebaut. Ihre Bewertung und Ihre Vorschläge helfen uns, Bugs zu beheben, fehlende Funktionen hinzuzufügen und die Tools zu bauen, die Sie wirklich brauchen.

Dieses Tool bewerten

Tippen Sie auf einen Stern, um uns zu sagen, wie nützlich dieses Tool für Sie war.

Vorschlag machen oder Bug melden

Eine Funktion fehlt? Einen Bug gefunden? Haben Sie eine Idee? Sagen Sie es uns und wir schauen es uns an.

Ähnliche Tools

Empfohlene Lektüre

Empfohlene Bücher über Farbtheorie & Design

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Erweitern Sie Ihre Fähigkeiten

Empfohlene Produkte fuer Farbarbeit

Als Amazon-Partner verdienen wir an qualifizierten Verkäufen.

Newsletter

Erhalte Produktivitätstipps und Neue Tools Zuerst

Schließe dich Machern und Entwicklern an, die Datenschutz schätzen. Jede Ausgabe: neue Tools, Produktivitäts-Hacks und Updates — kein Spam.

Prioritätszugang zu neuen Tools
Jederzeit abbestellen, ohne Rückfragen