Farbkonverter (HEX, RGB, HSL) FAQ

Wie konvertiere ich HEX in RGB?

Um einen Hex-Farbcode in RGB zu konvertieren, teilen Sie die sechsstellige Hex-Zeichenfolge #RRGGBB in drei Paare auf und konvertieren dann jedes Paar von hexadezimal (Basis 16) in dezimal (Basis 10).

Beispiel: #FF5733

• FF = 255 (Rot)
• 57 = 87 (Grün)
• 33 = 51 (Blau)
• Ergebnis: rgb(255, 87, 51)

Bei verkürztem Hex (#F53) erweitern Sie zunächst jede Ziffer zu einem Paar: #F53 wird zu #FF5533. Die Ziffern verdoppeln sich: F wird zu FF erweitert, 5 zu 55, 3 zu 33.

Achtstelliges Hex (#RRGGBBAA) funktioniert genauso, nur mit einem zusätzlichen Paar für den Alpha-Kanal. #FF573380 fügt 80 (128, also etwa 50 % Deckkraft) für den Alpha-Kanal hinzu.

Für sofortige Konvertierungen nutzen Sie unseren Color-Converter. Er verarbeitet alle Formate, einschließlich kurzem und langem Hex, mit und ohne Alpha.

Was ist der Unterschied zwischen RGB und RGBA?

RGB definiert eine Farbe über die Kanäle Rot, Grün und Blau. RGBA ist RGB mit einem zusätzlichen Alpha-Kanal, der die Deckkraft steuert. Der Alpha-Wert reicht von 0.0 (vollständig transparent) bis 1.0 (vollständig deckend).

rgb(255, 0, 0)         /* Vollständig deckendes Rot */
rgba(255, 0, 0, 0.5)  /* Rot mit 50 % Deckkraft */

In modernem CSS (CSS Color Level 4) ist das Alias rgba() nicht mehr nötig. Die Funktion rgb() akzeptiert nun einen optionalen Alpha-Kanal:

rgb(255 0 0 / 0.5)  /* Moderne Syntax, Rot mit 50 % Deckkraft */

Alle modernen Browser unterstützen diese Syntax. Die veraltete Funktion rgba() funktioniert überall und wird nicht entfernt, aber die Verwendung von rgb() mit Schrägstrich-Syntax ist der empfohlene Ansatz für neuen Code.

Wie konvertiere ich RGB in HSL?

Die Konvertierung von RGB in HSL umfasst drei Schritte:

1. Normalisieren Sie die RGB-Werte auf den Bereich 0–1 (Division durch 255)
2. Finden Sie Min und Max der drei normalisierten Werte – der Durchschnitt aus Min und Max ist die Helligkeit (L)
3. Berechnen Sie Farbton und Sättigung basierend darauf, welcher Kanal das Maximum ist, und der Differenz zwischen Max und Min

Die Formel variiert je nachdem, welcher Farbkanal dominiert:

• Wenn Rot das Maximum ist: Farbton = (Grün - Blau) / (Max - Min)
• Wenn Grün das Maximum ist: Farbton = 2 + (Blau - Rot) / (Max - Min)
• Wenn Blau das Maximum ist: Farbton = 4 + (Rot - Grün) / (Max - Min)
• Die Sättigung hängt von der Helligkeit ab: wenn L > 0.5, Sättigung = (Max - Min) / (2 - Max - Min), andernfalls Sättigung = (Max - Min) / (Max + Min)

Die Mathematik ist nicht trivial und leicht falsch zu machen, daher wird die Verwendung eines Color-Converter-Tools für sofortige Ergebnisse empfohlen.

Warum sehen meine Farben auf verschiedenen Bildschirmen unterschiedlich aus?

Das Farbbild variiert zwischen Bildschirmen aus mehreren Gründen:

Bildschirmkalibrierung — Die meisten Consumer-Bildschirme sind nicht farbkalibriert. Die Werkseinstellungen unterscheiden sich stark in Helligkeit, Kontrast und Farbtemperatur.

Unterschiede im Farbgamut — Verschiedene Bildschirme unterstützen unterschiedliche Farbräume. sRGB ist der Web-Standard, aber viele moderne Smartphones und Laptops unterstützen DCI-P3 (25 % breiter). Eine Farbe außerhalb des sRGB-Gamuts sieht auf einem Wide-Gamut-Display korrekt aus, wird auf einem Standarddisplay jedoch abgeschnitten oder verschoben.

Anzeigetechnologie — OLED-Bildschirme erzeugen tiefere Schwarztöne und gesättigtere Farben als LCD-Bildschirme. IPS-Panels haben eine bessere Farbgenauigkeit als TN-Panels.

Betrachtungswinkel — Farben verschieben sich, wenn man sie aus einem Winkel betrachtet, besonders auf Displays der unteren Preisklasse.

Helligkeit und Umgebungslicht — Ein Bildschirm mit 50 % Helligkeit in einem dunklen Raum sieht anders aus als derselbe Bildschirm mit 100 % Helligkeit im direkten Sonnenlicht.

Um Unterschiede zu minimieren: Arbeiten Sie im sRGB-Farbraum, kalibrieren Sie Ihren Monitor mit einem Hardware-Kalibrator und testen Sie Ihre Designs auf mehreren Geräten, bevor Sie sie ausliefern.

Wofür ist das HSL-Farbmodell gut?

HSL (Farbton, Sättigung, Helligkeit) ist ideal für programmatische Farbmanipulation. Sein wichtigster Vorteil ist, dass ein Kanal die „Farb"-Information trägt (der Farbton), während die anderen beiden die Erscheinung unabhängig vom Farbtonwert steuern.

Was HSL einfach macht:

• Farbpaletten — Denselben Farbton beibehalten, Helligkeit und Sättigung variieren, um eine vollständige Farbskala zu erstellen
• Hover- und Aktiv-Zustände — Helligkeit um einen festen Prozentsatz ändern: hsl(220, 80%, 50%) -> hsl(220, 80%, 60%)
• Dunkelmodus — Helligkeit über alle Farben reduzieren: 30 % von der Helligkeit jeder Farbe subtrahieren
• Themes — Farbtonwerte austauschen, um aus derselben Sättigungs-/Helligkeitsstruktur völlig neue Farbschemata zu erzeugen
• Deaktivierte Zustände — Sättigung reduzieren, um Elemente zu entsättigen: hsl(220, 80%, 50%) -> hsl(220, 30%, 70%)

Wofür HSL nicht gut ist:

HSL ist nicht wahrnehmungsgleichmäßig (perzeptuell uniform). Zwei Farben mit demselben Helligkeitswert (z. B. hsl(60, 100%, 50%) — helles Gelb und hsl(240, 100%, 50%) — reines Blau) haben eine sehr unterschiedliche wahrgenommene Helligkeit. Für wahrnehmungsgleichmäßige Farbmanipulation verwenden Sie stattdessen OKLCH.

Was bedeutet das # bei Hex-Farben?

Das Präfix # (Hash- oder Rautezeichen) teilt dem CSS-Parser mit, dass die folgenden Zeichen einen hexadezimalen Farbwert darstellen. Es ist die Standardnotation in CSS und HTML für Hex-Farbcodes.

Das vollständige Format ist #RRGGBB oder #RRGGBBAA:

| Komponente | Bedeutung | Beispiel (#FF5733) | |-----------|---------|---------------------| | # | Hex-Präfix | Erforderlicher Indikator | | RR | Rot-Kanal | FF (255) | | GG | Grün-Kanal | 57 (87) | | BB | Blau-Kanal | 33 (51) |

In HTML wird # auch für Ankerlinks verwendet (<a href="#section">), aber in einem CSS-Kontext oder style-Attribut kennzeichnet es immer eine Hex-Farbe. HTML unterstützt außerdem die älteren „benannten Farben" (140 vordefinierte Namen wie red, blue, rebeccapurple), die kein # erfordern.

Was ist ein Farbgamut und warum ist er wichtig?

Der Farbgamut ist der Bereich an Farben, den ein Gerät anzeigen oder ein Farbraum darstellen kann. Betrachten Sie ihn als das „Vokabular" an Farben, das einem Bildschirm oder Dateiformat zur Verfügung steht.

Häufige Farbräume, vom kleinsten zum breitesten:

| Farbraum | Relative Größe | Verwendung | |-------------|--------------|------------| | sRGB | Grundlinie | Web-Standard, die meisten Monitore, alle Browser | | Adobe RGB | ~50 % breiter | Professionelle Fotografie, Druck | | DCI-P3 | ~25 % breiter | Moderne Smartphones, Macs, viele Laptops | | Rec. 2020 | ~75 % breiter | HDR-Fernsehen, High-End-Displays |

Warum es wichtig ist: Eine Farbe außerhalb des Gamuts eines Bildschirms kann nicht genau angezeigt werden. Das Gerät schneidet die Farbe auf den nächstliegenden In-Gamut-Wert zurecht oder nähert sie an. Deshalb kann ein kräftiges Tiefrot aus einer Designdatei auf einem Standard-Laptop-Bildschirm matt oder schmutzig erscheinen.

Für Webdesign: Entwerfen Sie immer in sRGB oder prüfen Sie, dass Ihre Farben sRGB-sicher sind. OKLCH und der display-p3-Farbraum ermöglichen es Ihnen, breitere Farbräume anzusteuern, aber Sie sollten für Standardbildschirme einen sRGB-Fallback bereitstellen.

Was ist der Unterschied zwischen Hex und Hex mit Alpha?

Standard-Hex (#FF5733) verwendet sechs Ziffern und hat keinen Alpha-Kanal – die Farbe ist immer vollständig deckend. Hex mit Alpha (#FF573380) verwendet acht Ziffern und fügt am Ende zwei weitere Hex-Ziffern für den Alpha-Kanal (Deckkraft) hinzu.

Alpha-Werte in Hex:

| Hex-Paar | Dezimal | Deckkraft | |----------|---------|---------| | 00 | 0 | Vollständig transparent | | 80 | 128 | ~50 % Deckkraft | | FF | 255 | Vollständig deckend |

Beispiele:

#FF5733     — Kräftiges Rot-Orange, keine Transparenz
#FF5733FF   — Gleiche Farbe, vollständig deckend (redundantes FF)
#FF573380   — Gleiche Farbe, 50 % transparent
#FF573300   — Gleiche Farbe, vollständig unsichtbar

Es gibt auch eine vierstellige Kurzform von Hex mit Alpha: #F538 wird zu #FF553388 erweitert (50 % Deckkraft).

Browserunterstützung: Achtstelliges Hex wird in allen modernen Browsern unterstützt. Für ältere Browser (Internet Explorer) verwenden Sie stattdessen rgba().

Wie wähle ich barrierefreie Farben für meine Website?

Befolgen Sie diesen Schritt-für-Schritt-Prozess, um ein barrierefreies Farbsystem aufzubauen:

1. Beginnen Sie mit einer primären Markenfarbe. Wählen Sie einen Farbton, der Ihre Marke repräsentiert, und erstellen Sie dann mit HSL oder OKLCH eine vollständige Skala von sehr hell (Hintergründe) bis sehr dunkel (Text).

2. Setzen Sie Ihren Text auf nahezu Schwarz. Fließtext auf weißen Hintergründen sollte #1A1A1A bis #333333 sein. Verwenden Sie niemals reines Schwarz (#000000) auf reinem Weiß – es verursacht bei manchen Lesern Augenbelastung. Dunkelgrau auf Weiß bietet bessere Lesbarkeit.

3. Prüfen Sie jedes Vordergrund-Hintergrund-Paar. Jede Kombination aus Text und Hintergrund muss die WCAG-Standards erfüllen:

• Normaler Text: mindestens 4.5:1 (WCAG AA)
• Großer Text: mindestens 3:1 (WCAG AA)
• Zielen Sie bei Fließtext auf 7:1 (WCAG AAA)

4. Verwenden Sie Farbe nie als einziges Unterscheidungsmerkmal. Links müssen unterstrichen sein (nicht nur eine andere Farbe). Fehlerzustände müssen Icons oder Text enthalten. Diagramme müssen Muster oder Beschriftungen verwenden.

5. Testen Sie mit Farbenblindheits-Simulatoren. Deuteranopie (Rot-Grün) ist der häufigste Typ. Stellen Sie sicher, dass Ihr Design ohne Farbwahrnehmung funktioniert.

6. Prüfen Sie in Graustufen. Wenn Ihr Design beim Konvertieren in Graustufen seine Bedeutung verliert, verlassen Sie sich zu stark auf Farbe, um Informationen zu vermitteln.

Nutzen Sie unseren Color-Converter, um Kontrastverhältnisse zwischen zwei beliebigen Farben sofort zu prüfen.