Farbkonverter

Farben zwischen HEX konvertieren, RGB- und HSL-Formate

Wählen Sie eine Farbe

Oder geben Sie unten Werte ein

HEX

RGB

HSL

Verständnis Farbformate

Digitale Farben können in mehreren Formaten dargestellt werden, jedes mit unterschiedlichen Vorteilen. Dieses Werkzeug Konvertiert nahtlos zwischen den drei gängigsten Web-Farbformaten: HEX, RGB und HSL. Alle Die Verarbeitung erfolgt in Ihrem Browser – Ihre Farbauswahl wird niemals verfolgt oder gespeichert.

#️⃣ HEX (Hexadezimal)

Format: #RRGGBB (6 Zeichen) oder #RGB (3-Zeichen-Kurzschrift)
Beispiel: #2563EB oder #F00 (rot)
Am besten geeignet für: CSS, HTML-Attribute, Design-Tools. Kompaktestes Format für Webentwicklung.

🔴🟢🔵 RGB (Rot, Grün, Blau)

Format: rgb(R, G, B) , wobei jeder Wert 0-255 ist
Beispiel: rgb(37, 99, 235)
Am besten geeignet für: CSS-Funktionen, JavaScript-Farbmanipulation, programmgesteuert Farberzeugung. Leicht zu verstehen als leichtes Mischen.

🌈 HSL (Farbton, Sättigung, Helligkeit)

Format: hsl(H, S%, L%) wobei H 0–360° ist, S und L 0–100 % sind
Beispiel: hsl(221, 83%, 53%)
Am besten geeignet für: Farbschemata erstellen, Helligkeit/Sättigung anpassen. Die meisten intuitiv für die menschliche Wahrnehmung.

Häufige Anwendungsfälle

CSS-Styling: Konvertieren zwischen Formaten für verschiedene CSS-Eigenschaften und Browserkompatibilität
Design-Übergabe: Farben übersetzen aus Design-Tools (häufig HEX) in codefreundliche Formate
Farbschemata: Verwenden Sie HSL zum Erstellen Variationen (Helligkeit für Schwebezustände anpassen)
Zugänglichkeit: Kontrast berechnen Verhältnisse unter Verwendung von RGB-Werten
Markenrichtlinien: Dokumentfarben in Mehrere Formate für verschiedene Anwendungsfälle

Kurztipps zur Farbtheorie

Erstellen Hover-Zustände

Verwenden Sie HSL: Verringern Sie die Helligkeit um 10–15 % für dunklere Hover-Effekte oder erhöhen Sie sie für hellere diejenigen. Viel einfacher als die Berechnung von RGB-Änderungen.

Sicherstellen Kontrast

Für die WCAG AA-Konformität benötigt Text ein Kontrastverhältnis von 4,5:1. HSL Helligkeitsunterschiede von 40 %+ erfüllen diese Anforderung normalerweise.

Häufig gestellte Fragen

Welches Format soll ich verwenden? in CSS?

Alle drei funktionieren in modernen Browsern. HEX ist am gebräuchlichsten und kompaktesten. Verwenden Sie bei Bedarf RGB/HSL Transparenz (rgba() oder hsla()) oder dynamische Farbmanipulation.

Was bedeutet das # in HEX meine?

Das #-Symbol gibt einen hexadezimalen Farbwert an. Es ist in CSS erforderlich, in jedoch oft optional Design-Tools. Die folgenden 6 Zeichen stellen Rot, Grün und Blau in der Basis 16 dar (00-FF = 0-255).

Wie funktioniert HSL Hue?

Der Farbton ist ein Grad im Farbkreis: 0° = Rot, 60° = Gelb, 120° = Grün, 180° = Cyan, 240° = Blau, 300° = Magenta, 360° = zurück zu Rot. Es erleichtert die Auswahl von Komplementärfarben (180°). auseinander) intuitiv.

Kann ich Transparenz hinzufügen?

Ja! Verwenden Sie rgba(R, G, B, A) oder hsla(H, S%, L%, A) , wobei A 0-1 ist. Modernes CSS unterstützt auch 8-stelliges HEX: #RRGGBBAA.

CSS-Farbreferenz

                            /* HEX */

                            color: #2563EB;

                            /* RGB */

                            color: rgb(37, 99, 235);

                            /* HSL */

                            color: hsl(221, 83%, 53%);

                            /* With transparency */

                            color: rgba(37, 99, 235, 0.5);

                            color: hsla(221, 83%, 53%, 0.5);