Farben Auswaehlen und Konvertieren

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

Der interaktive Farbwaehler ermöglicht 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

Wählen 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 für 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 für jeden Kanal. Beide beschreiben denselben additiven Farbraum; HEX ist einfach eine kompakte Notation des gleichen RGB-Triplets.

HSL-Farbmodell

HSL steht für Farbton, Saettigung und Helligkeit. Der Farbton ist ein Grad auf dem Farbkreis (0-360), die Saettigung ist die Intensität als Prozentsatz und die Helligkeit steuert, wie hell oder dunkel die Farbe erscheint. HSL ist oft einfacher programmatisch anzupassen, da Sie die Helligkeit ändern können, ohne den Farbton zu verändern.

CMYK für den Druck

CMYK steht für Cyan, Magenta, Gelb und Key (Schwarz) und ist das Standardmodell für die Druckproduktion. Die Konvertierung von RGB zu CMYK beinhaltet die Zuordnung additiver Bildschirmfarben zu subtraktiven Tintenprozentsaetzen. Die Ergebnisse können 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 für 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 fünf 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 nächsten 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. Wählen Sie Ihre Markenfarbe einmal und erhalten Sie sofort HEX für Web, RGB für digitale Assets, CMYK für Druckdateien und Tailwind-Klassen für Komponentenbibliotheken.

CSS-Entwicklungs-Workflow

Front-End-Entwickler müssen beim Schreiben von Stylesheets häufig zwischen Farbformaten konvertieren. Nehmen Sie eine Farbe aus einem Design-Mockup in HEX und konvertieren Sie sie in HSL für einfachere Helligkeitsanpassungen oder in einen RGB-Wert für Opazitaetsberechnungen in CSS.

Farbabstimmung für Druckdesign

Designer, die Dateien für den Druck vorbereiten, benoetigen genaue CMYK-Werte, die ihren Bildschirmfarben entsprechen. Wählen Sie die Farbe visuell aus, überprüfen Sie, ob der HEX-Wert mit der Designdatei übereinstimmt, und kopieren Sie dann die CMYK-Aufschluesselung direkt in die Layoutsoftware.

Häufig Gestellte Fragen

?Welche Farbformate unterstützt dieses Tool?

Es unterstützt 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. Für professionellen Druck überprüfen Sie mit einem kalibrierten Farbprofil.

?Kann ich einen Farbwert einfuegen, anstatt den Wähler 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 für Ihre Farbe.

?Sind meine Daten privat?

Ja; alles laeuft vollständig in Ihrem Browser. Keine Farbdaten werden an einen Server gesendet. Ihre Auswahl bleibt auf Ihrem Gerät.

?Ist dieses Tool kostenlos?

Ja; völlig kostenlos ohne Einschränkungen, ohne Registrierung und ohne Premium-Funktionen. Verwenden Sie es so oft Sie möchten 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 für 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