Leitfaden zur Farbformatkonvertierung: HEX, RGB, HSL, OKLCH vollständig abgedeckt

Dienstprogramme

Übersicht der Farbformate

Gängige Farbformate in der Webentwicklung:

Format Beispiel Eigenschaften
HEX #FF6B35 Am häufigsten, kompakt
RGB rgb(255, 107, 53) Intuitiv, Kanalwerte 0-255
HSL hsl(16, 100%, 60%) Farbton/Sättigung/Helligkeit, intuitiv für Anpassungen
OKLCH oklch(0.68 0.17 37) Wahrnehmungsgleichmäßig, modernes CSS empfohlen

Verschiedene Formate stellen dieselbe Farbe dar — nur verschiedene Koordinatensysteme.

HEX-Format erklärt

HEX verwendet Hexadezimal zur Darstellung der drei RGB-Kanäle:

#FF6B35
 ↑ ↑ ↑
 R G B  → Jeder Kanal 00-FF (0-255)
  • 3-stellige Kurzform: #F63 entspricht #FF6633
  • 4-stellige Kurzform mit Alpha: #F63A entspricht #FF6633AA
  • 8-stellige Vollform mit Alpha: #FF6B3580 (80 = 50% Deckkraft)

RGB und Alpha-Kanal

RGB bildet direkt die Anzeigegrundfarben ab:

rgb(255, 107, 53)          /* deckend */
rgba(255, 107, 53, 0.5)    /* 50% transparent */
rgb(255 107 53 / 50%)      /* moderne Syntax */

Alpha-Kanal: 1 = vollständig deckend, 0 = vollständig transparent. Modernes CSS bevorzugt rgb() mit leerzeichengetrennten Werten und / für Transparenz.

HSL: Intuitive Farbanpassung

HSL zerlegt die Farbe in Farbton, Sättigung und Helligkeit:

Parameter Bereich Bedeutung
H (Farbton) 0-360° Farbkreiswinkel: 0=Rot, 120=Grün, 240=Blau
S (Sättigung) 0-100% 0%=Grau, 100%=Reinfarbe
L (Helligkeit) 0-100% 0%=Schwarz, 50%=Reinfarbe, 100%=Weiß

Anpassungstipps:

  • Gleicher Farbton, verschiedene Schattierungen? H und S fixieren, L anpassen
  • Weicherer Ton? S reduzieren
  • Komplementärfarbe? H ± 180°

OKLCH: Der wahrnehmungsgleichmäßige Standard

OKLCH ist ein Farbraum, der in CSS Color Level 4 eingeführt und auf der menschlichen Wahrnehmung modelliert wurde:

Vorteil Beschreibung
Wahrnehmungsgleichmäßig Helligkeitsänderung von 0,5→0,6 sieht gleich aus wie 0,7→0,8
Breiterer Farbraum Unterstützt P3 und andere Breitfarbraum-Displays
Vorhersagbare Anpassungen Festes L mit variablem C/H hält die visuelle Helligkeit konstant 
oklch(0.68 0.17 37)
       ↑    ↑   ↑
       L    C   H  → Lightness/Chroma/Hue

HSLs L=50% variiert stark in der visuellen Helligkeit über verschiedene Farbtöne. OKLCH behebt dies.

Verwendung des Farbkonvertierungstools

Schritt 1: Tool öffnen

Besuchen Sie das Farbkonvertierungstool und geben Sie eine Farbe in einem beliebigen Format ein.

Schritt 2: Eingabeformat auswählen

Geben Sie eine Farbe in das Eingabefeld ein. Unterstützte Formate:

  • HEX: #FF6B35
  • RGB: 255, 107, 53
  • HSL: 16, 100%, 60%
  • OKLCH: 0.68, 0.17, 37

Schritt 3: Konvertierungsergebnisse anzeigen

Das Tool zeigt automatisch alle Formatkonvertierungen an. Kopieren Sie jedes Ergebnis direkt.

Schritt 4: Alpha-Kanal anpassen

Aktivieren Sie „Transparenz einbeziehen" und geben Sie einen Alpha-Wert (0-1) ein. Die Ergebnisse enthalten den Alpha-Kanal.

CSS color-mix() in der Praxis

OKLCH kombiniert mit color-mix() ermöglicht präzise Farbmischungen:

/* Im OKLCH-Raum mischen — wahrnehmungsgleichmäßig */
.button {
  background: color-mix(in oklch, #FF6B35, #3B82F6);
}

/* 30% der Akzentfarbe mischen */
.card {
  border-color: color-mix(in oklch, #FF6B35 30%, white);
}

Verwenden Sie die Kontrastprüfung, um zu überprüfen, dass die gemischte Farbe die Kontrastanforderungen mit Text erfüllt.

Farbformate in Verläufen

Bei Verwendung des Verlaufsgenerators wird das OKLCH-Format empfohlen:

/* OKLCH-Verlaufsübergänge sind gleichmäßiger */
background: linear-gradient(
  in oklch,
  oklch(0.7 0.15 30),
  oklch(0.7 0.15 250)
);

Traditionelle RGB/HSL-Verläufe können stumpfe Mittelpunkte im Farbkreis erzeugen. OKLCH vermeidet dies.

Häufige Probleme

Problem Ursache Lösung
HEX-zu-RGB-Ergebnis falsch Kurzform nicht erweitert Zuerst auf 6-stelligen HEX erweitern
Farbverschiebung HSL zu HEX Genauigkeitsverlust bei Fließkomma Tool für präzise Konvertierung verwenden
OKLCH nicht unterstützt Älterer Browser CSS-Fallback oder PostCSS-Plugin verwenden
Alpha-Wert-Anzeige falsch Prozent und Dezimal gemischt Durchgehend 0-1 Dezimal oder 0%-100% verwenden

Zusammenfassung

Die Beherrschung von HEX-, RGB-, HSL- und OKLCH-Formaten und deren Konvertierung ist eine grundlegende Fähigkeit für Frontend-Entwicklung und Design. OKLCHs Wahrnehmungsgleichmäßigkeit macht es zur ersten Wahl für modernes CSS. Das Farbkonvertierungstool verarbeitet alle Formatkonvertierungen mit einem Klick, während die Kontrastprüfung und der Verlaufsgenerator Ihren Farb-Workflow vervollständigen.

#颜色#HEX#RGB#HSL#色彩转换