Farbkonverter (HEX, RGB, HSL, CSS)

Übersetzen Sie Farben zwischen Entwickler- und Designer-Notation. Enthält integrierte Validierung und Schnellkopier-Buttons für jedes Format.

Wechseln Sie sofort zwischen HEX, RGB, HSL und CSS-Variablen.

Fügen Sie einen beliebigen Farbwert ein, um passende Formate zu sehen, die Helligkeit anzupassen und CSS-freundliche Token zu kopieren, ohne eine schwere Design-App zu öffnen.

Wie diese Seite gepflegt wird

Schritte und Texte werden gegen das aktuelle Tool-Verhalten geprueft.
Browser-Limits, Dateigroessen und Kompatibilitaetsgrenzen werden dokumentiert, wenn sie relevant sind.
Wenn nicht anders angegeben, bleiben Dateien und Texte bei der Verarbeitung lokal im Browser.

Farbformate erklärt

Designer und Entwickler sprechen oft unterschiedliche Sprachen. Ein Designer arbeitet vielleicht in HSL wegen der intuitiven Farbmischung, während ein Entwickler HEX-Codes für CSS oder RGB-Werte für ein Backend-Skript benötigt.

Dieses Tool übersetzt zwischen:

HEX: Der Standard-6-stellige Code im Webdesign (z. B. #FF5733).
RGB: Rot, Grün, Blau Werte (0-255), oft in digitalen Displays verwendet.
HSL: Farbton, Sättigung, Helligkeit. Das menschenlesbarste Format, das es einfach macht, "hellere" oder "mattere" Variationen einer Farbe zu erstellen.

Sofortige Vorschau

Sehen heißt glauben. Während Sie tippen, zeigen wir eine große Live-Vorschau der Farbe, um sicherzustellen, dass Sie keinen Tippfehler gemacht haben. Wir zeigen auch, wie Text darauf aussieht, um Probleme mit der Barrierefreiheit frühzeitig zu erkennen.

Wichtige Funktionen

Multi-Format-Unterstützung: Tippen oder fügen Sie einen Hex-Code, RGB-String oder HSL-Wert ein, um sofort alle äquivalenten Formate anzuzeigen.
Kontrastfreundliche Vorschau: Ein Live-Farbfeld mit hellen/dunklen Textüberlagerungen hilft Ihnen zu sehen, ob Ihre Farbe auf markierten Oberflächen lesbar bleibt.
Kopierfertige Token: Greifen Sie sich Hex-, RGB-, HSL- oder CSS-Variablen-Schnipsel ohne zusätzliches Formatieren oder manuelles Bearbeiten.

Häufige Fragen

Was ist der Unterschied zwischen HEX und RGB?

HEX ist ein 6-stelliger Code, der im Webdesign verwendet wird, während RGB (Rot, Grün, Blau) definiert, wie Bildschirme Farben durch Licht emittieren. Sie repräsentieren dieselbe Farbe unterschiedlich.

Warum sollte ich HSL verwenden?

HSL (Farbton, Sättigung, Helligkeit) ist für Menschen intuitiver. Es ist einfacher, '50% heller' zu sagen, als RGB-Werte anzupassen.

Unterstützt dieses Tool Transparenz?

Ja. Wir unterstützen RGBA- und HSLA-Werte, die einen Alphakanal für die Deckkraft enthalten.

Wofür wird CMYK verwendet?

CMYK (Cyan, Magenta, Gelb, Schwarz) ist das Standardfarbmodell für den Druck. Verwenden Sie es, wenn Sie Designs für physische Medien entwerfen.

Wie stelle ich Barrierefreiheit sicher?

Achten Sie auf hohe Kontrastverhältnisse zwischen Text- und Hintergrundfarben. Verwenden Sie Tools, um die WCAG-Konformität zu überprüfen.