Color Converter

Ein Farbkonverter übersetzt Farbwerte zwischen verschiedenen CSS-Farbformaten - HEX, RGB, RGBA, HSL und HSLA. Jedes Format stellt dieselbe Farbe unterschiedlich dar: HEX verwendet Hexadezimalnotation (#3b82f6), RGB verwendet Rot/Grün/Blau-Kanalwerte (rgb(59, 130, 246)), und HSL verwendet Farbton/Sättigung/Helligkeit (hsl(217, 91%, 60%)). Designer und Entwickler müssen ständig zwischen diesen Formaten konvertieren, wenn sie mit verschiedenen Tools und Codebasen arbeiten.

Modernes CSS unterstützt mehrere Farbformate, und verschiedene Kontexte bevorzugen verschiedene Formate. HEX-Codes sind kompakt und in Design-Tools allgegenwärtig. RGB ist intuitiv für programmatische Farbmanipulation. HSL macht es einfach, Farbvariationen durch Anpassung von Helligkeit oder Sättigung zu erstellen. RGBA und HSLA fügen Alpha-Kanal-Unterstützung für Transparenz hinzu. Das Verstehen und Konvertieren zwischen diesen Formaten ist eine tägliche Aufgabe in der Frontend-Entwicklung.

Dieser Farbkonverter konvertiert jeden Farbeingabewert sofort in alle wichtigen CSS-Formate gleichzeitig. Er enthält einen visuellen Farbwähler, Alpha-Kanal-Schieberegler, Live-Vorschau mit Transparenz-Schachbrettmuster und individuelle RGB/HSL-Komponentenwerte. Alle Konvertierungen finden in Ihrem Browser statt - keine Daten werden gesendet.

1. Farbwert eingeben — Geben Sie eine beliebige Farbe in HEX (#3b82f6), RGB (rgb(59, 130, 246)), RGBA, HSL oder HSLA Format ein oder fügen Sie sie ein. Das Tool erkennt das Format automatisch.
2. Farbwähler verwenden — Klicken Sie auf den visuellen Farbwähler, um eine Farbe interaktiv auszuwählen. Die ausgewählte Farbe aktualisiert alle Formatausgaben in Echtzeit.
3. Alpha-Kanal anpassen — Verwenden Sie den Alpha-Schieberegler, um die Transparenz von 0 (vollständig transparent) bis 1 (vollständig undurchsichtig) einzustellen. Die Vorschau zeigt ein Schachbrettmuster hinter der Farbe, um die Transparenz zu visualisieren.
4. Beliebiges Format kopieren — Jedes Ausgabeformat (HEX, HEX8, RGB, RGBA, HSL, HSLA, CSS Custom Property) hat einen eigenen Kopier-Button. Klicken Sie, um den benötigten Wert zu kopieren.

• Alle wichtigen CSS-Formate — Konvertiert zwischen HEX (3, 4, 6 und 8-stellig), RGB, RGBA, HSL, HSLA und CSS Custom Property Format in einem Tool.
• Auto-Formaterkennung — Fügen Sie einen beliebigen Farbwert ein und das Tool erkennt automatisch, ob es HEX, RGB, HSL oder deren Alpha-Varianten ist.
• Visueller Farbwähler — Interaktiver nativer Farbwähler zur visuellen Farbauswahl, wenn Sie keinen bestimmten Wert im Sinn haben.
• Alpha-Kanal-Unterstützung — Volle Transparenzkontrolle mit HEX8-, RGBA- und HSLA-Ausgabe. Die Vorschau verwendet einen Schachbretthintergrund zur Visualisierung der Transparenz.
• Komponentenaufschlüsselung — Sehen Sie individuelle R-, G-, B-, Alpha-, Farbton-, Sättigungs- und Helligkeitswerte für jede Farbe auf einen Blick.
• 100% clientseitig — Alle Farbberechnungen finden in Ihrem Browser statt. Keine Serverkommunikation, kein Tracking.

• Design-zu-Code-Übersetzung — Konvertieren Sie Farben aus Figma, Sketch oder Adobe XD (normalerweise HEX) in das CSS-Format, das Ihr Projekt verwendet (RGB, HSL oder Custom Properties).
• Farbvariationen erstellen — Verwenden Sie die HSL-Ausgabe, um einfach hellere/dunklere Varianten durch Anpassung des Helligkeitswerts oder entsättigte Versionen durch Verringerung der Sättigung zu erstellen.
• Transparenz hinzufügen — Konvertieren Sie undurchsichtige HEX-Farben in RGBA oder HSLA mit einem bestimmten Alpha-Wert für Overlays, Hintergründe und Hover-Zustände.
• CSS Custom Properties — Erhalten Sie das durch Leerzeichen getrennte RGB-Format (z.B. 59 130 246) für CSS Custom Properties und Tailwind CSS: rgb(var(--color-primary) / 0.5).
• Barrierefreiheitsprüfungen — Sehen Sie die genauen RGB- und HSL-Komponenten, um Kontrastverhältnisse und Farbzugänglichkeits-Konformität zu bewerten.