So verwendest du den Farbcode-Konverter
- HEX, RGB oder HSL als vorhandenes Format wählen.
- Alle Kanäle eingeben: HEX mit 3 oder 6 Stellen, RGB ganzzahlig von 0 bis 255, HSL mit numerischem Farbton und 0–100 Prozent.
- Zielformat wählen und Farbe umrechnen anklicken. Code und Farbfeld erscheinen zusammen.
- Ergebnis kopieren oder Formate tauschen. Jede Eingabeänderung löscht das alte Ergebnis bis zur nächsten Umrechnung.
Drei Schreibweisen für dieselbe Webfarbe
HEX und RGB codieren rotes, grünes und blaues Licht. #3366FF entspricht 51, 102, 255; #0F8 wird zu #00FF88. HEX-Ausgaben haben immer sechs Großbuchstaben-Zeichen.
HSL beschreibt Farbton, Sättigung und Helligkeit. Der Farbton läuft um den Farbkreis, Sättigung von Grau zu kräftig und Helligkeit von Schwarz zu Weiß. So lassen sich verwandte Farben leichter anpassen.
Richtungen und Formeln
HEX zu RGB wandelt jedes Hex-Paar in 0–255 um; RGB zu HEX kehrt dies um. RGB zu HSL normalisiert die Kanäle und berechnet Maximum, Minimum, Helligkeit, Sättigung und Farbtonsektor. HSL zu RGB nutzt Chroma, Sektor und Helligkeitsversatz.
Unterstützt werden HEX zu RGB, RGB zu HEX, HEX zu HSL, HSL zu HEX, RGB zu HSL und HSL zu RGB. Zwischen HEX und HSL dient RGB intern als gemeinsame Darstellung.
Bereiche, periodischer Farbton und Genauigkeit
- HEX erlaubt genau 3 oder 6 Stellen und ein optionales #; Alpha, Farbnamen und beliebige CSS-Ausdrücke sind ausgeschlossen.
- RGB verlangt ganze Zahlen von 0 bis 255; ungültige Werte werden nicht still begrenzt.
- Sättigung und Helligkeit liegen zwischen 0% und 100%. Farbtöne wiederholen sich: 420° = 60° und −120° = 240°.
- RGB und HEX verwenden Ganzzahlen; HSL zeigt höchstens zwei Dezimalstellen. Grauwerte mit 0% Sättigung erhalten 0°.
- Die Vorschau ersetzt weder Monitorkalibrierung noch Druckprofile oder Kontrastprüfung.
Nutzung und Ausgabe
- HEX-Designwerte für Code oder Dokumentation in RGB übertragen.
- RGB vor dem Anpassen verwandter Hover-, Rand- oder Hintergrundfarben in HSL umrechnen.
- Vorschau prüfen und CSS-Wert kopieren; die Eingabe bleibt lokal und wird nicht an Analytics gesendet.
- Keine Paletten, Bildfarbaufnahme oder CMYK-Druckprofile.
Umrechnungsrichtungen für HEX, RGB und HSL
Wähle das Paar aus vorhandenem und benötigtem Code. Jede Richtung nennt die vollständigen Formate, die Regel und ein Eingabe-Ergebnis-Beispiel.
HEX hexadezimal zu RGB Rot, Grün, Blau
Teile sechs HEX-Zeichen in drei Paare und wandle jedes Paar in eine Dezimalzahl um. Beispiel: #3366FF ergibt 0x33 = 51, 0x66 = 102 und 0xFF = 255, also rgb(51, 102, 255). #0F8 wird zuerst zu #00FF88 erweitert.
RGB Rot, Grün, Blau zu HEX hexadezimal
Wandle jeden ganzzahligen Kanal von 0–255 in zwei HEX-Zeichen um und füge sie nach # zusammen. Beispiel: rgb(255, 87, 51) ergibt FF, 57 und 33, also #FF5733. Werte unter 16 erhalten eine führende Null.
HEX hexadezimal zu HSL Farbton, Sättigung, Helligkeit
Dekodiere HEX zuerst nach RGB, normalisiere die Kanäle und berechne HSL aus Maximum, Minimum und Differenz. Beispiel: #3366FF wird zu hsl(225deg, 100%, 60%).
HSL Farbton, Sättigung, Helligkeit zu HEX hexadezimal
Der Farbton bestimmt den Farbkreissektor; Sättigung und Helligkeit erzeugen RGB, das gerundet und als HEX codiert wird. Beispiel: hsl(60deg, 100%, 50%) ergibt #FFFF00. 420° ergibt dasselbe, da sich der Farbton alle 360° wiederholt.
RGB Rot, Grün, Blau zu HSL Farbton, Sättigung, Helligkeit
Normalisiere RGB, bestimme Maximum und Minimum, nutze deren Mitte für Helligkeit und die Differenz für Sättigung und Farbton. Beispiel: rgb(128, 128, 128) ergibt ungefähr hsl(0deg, 0%, 50.2%); bei null Sättigung ändert der Farbton das Grau nicht.
HSL Farbton, Sättigung, Helligkeit zu RGB Rot, Grün, Blau
Berechne Chroma, ordne es dem Farbtonsektor zu und addiere den Helligkeitsversatz vor der Skalierung auf 0–255. Beispiel: hsl(240deg, 100%, 50%) ergibt rgb(0, 0, 255). Die Endkanäle werden ganzzahlig gerundet.
Umrechnungsbeispiele
Beispiel 1: HEX zu RGB und HSL
#3366FF ergibt rgb(51, 102, 255) und nach Zielwechsel hsl(225deg, 100%, 60%). Die sichtbare blaue Farbe bleibt gleich.
Beispiel 2: HSL-Zyklus zu HEX
H = 420, S = 100 und L = 50 entspricht 60°. Ergebnis: #FFFF00 beziehungsweise rgb(255, 255, 0), also Gelb.
Häufige Fragen
Ist die Kurzform #RGB möglich?
Ja. #0F8 wird zu #00FF88. Alphaformen mit vier oder acht Stellen sind nicht enthalten.
Warum hat Grau den Farbton 0°?
Bei 0% Sättigung ergibt jeder Farbton dasselbe Grau; 0° ist ein stabiler Konventionswert.
Wann aktualisiert ein Formatwechsel?
Vor Convert oder nach einer Eingabe bleibt die Ausgabe leer. Nach erfolgreicher Umrechnung aktualisiert ein reiner Formatwechsel sofort.
Bleiben HSL-Dezimalwerte beim Rückweg gleich?
Die Farbe bleibt über ganzzahlige RGB-Kanäle erhalten; HSL-Zahlen können sich leicht ändern.
Ist das für Druck oder Kontrastprüfung geeignet?
Nein. CMYK, Kalibrierung und WCAG-Kontrast sind eigene Aufgaben.