Deutsch
HEX in RGB umrechnen (und zurück)
Dieser Farbumrechner wandelt einen HEX-Code beim Tippen in RGB, HSL, HSV, CMYK und OKLCH um, und er funktioniert auch andersherum: Füg rgb(255, 99, 71) in irgendein Feld ein, und du bekommst #FF6347. Jedes Feld nimmt jedes Format an, du musst also nie nach dem richtigen Feld suchen.
Wenn du es von Hand machen willst: Ein HEX-Code besteht einfach aus drei Zahlen im Sechzehnersystem. Nimm #3B82F6, teil ihn in Paare auf und rechne jedes Paar um:
82 → 8×16 + 2 = 130
F6 → 15×16 + 6 = 246
#3B82F6 = rgb(59, 130, 246)
Von RGB nach HEX geht es umgekehrt. Teil jeden Kanal durch 16: Die ganze Zahl ist die erste Ziffer, der Rest die zweite. 255 ist 15 Rest 15, also FF. 99 ist 6 Rest 3, also 63. Deshalb wird aus Tomatenrot, rgb(255, 99, 71), der Code #FF6347.
Gängige Farbcodes in HEX, RGB und HSL
Diese Farben lohnt es sich zu merken. Alle sind auch gültige CSS-Farbnamen, und das Tool zeigt für jede eingegebene Farbe den nächstgelegenen Namen an (#3B82F6 kommt dodgerblue am nächsten, ist aber nicht dasselbe).
| Name | HEX | RGB | HSL |
|---|---|---|---|
| white | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
| black | #000000 | 0, 0, 0 | 0, 0%, 0% |
| red | #FF0000 | 255, 0, 0 | 0, 100%, 50% |
| tomato | #FF6347 | 255, 99, 71 | 9, 100%, 64% |
| gold | #FFD700 | 255, 215, 0 | 51, 100%, 50% |
| teal | #008080 | 0, 128, 128 | 180, 100%, 25% |
| navy | #000080 | 0, 0, 128 | 240, 100%, 25% |
| rebeccapurple | #663399 | 102, 51, 153 | 270, 50%, 40% |
Kurze, lange und transparente HEX-Codes
HEX gibt es in vier Längen. Drei Stellen sind eine Kurzform, bei der jede Ziffer verdoppelt wird, #F60 bedeutet also #FF6600. Sechs Stellen sind die normale Form. Acht Stellen hängen einen Alphakanal an: #3B82F680 ist dasselbe Blau mit 128 von 255, also etwa 50 % Deckkraft. Vier Stellen sind die Kurzform davon. Browser verstehen alle vier schon seit Jahren, manche Design-Apps und E-Mail-Programme nehmen aber nur sechs Stellen. Im Zweifel fügst du also den sechsstelligen Code ein und stellst die Deckkraft separat ein.
Welches Format solltest du nehmen?
- HEX für alles, was du in ein Design-Tool, einen Styleguide oder ein CMS einfügst. Es ist kurz, und niemand liest es falsch.
- RGB / RGBA, wenn du Transparenz in älterem CSS oder in JavaScript-Canvas-Code brauchst.
- HSL, wenn du eine Farbe gezielt anpassen willst. Senkst du den letzten Wert, wird sie dunkler, senkst du den mittleren, wird sie grauer. Hover-Zustände lassen sich so viel leichter schreiben.
- OKLCH für neue CSS-Designsysteme. Der Helligkeitswert entspricht dem, was dein Auge sieht. Zwei Farben mit gleichem L wirken also wirklich gleich hell, was HSL nicht schafft (Gelb mit 50 % Helligkeit wirkt viel heller als Blau mit 50 %).
- CMYK nur als grober Anhaltspunkt für den Druck. Die Werte hier stammen aus der einfachen Formel, nicht aus einem Druckerprofil, die Broschüre wird also nicht genau wie dein Bildschirm aussehen. Frag die Druckerei, welches Profil sie verwendet.
- HSV / HSB vor allem, um den Farbwähler in Photoshop oder Figma zu treffen, die damit arbeiten.
Kontrast prüfen: Was besteht WCAG?
WCAG 2 vergleicht die relative Helligkeit von Text und Hintergrund und drückt sie als Verhältnis aus, von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). Die Schwellenwerte sind fest:
| Stufe | Normaler Text | Großer Text (24px oder 18,66px fett) |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
Icons, Rahmen von Eingabefeldern und Fokusrahmen brauchen nach WCAG 2.1 ein Verhältnis von 3:1. So schneiden einige echte Farben als Text auf Weiß ab:
| Textfarbe auf #FFFFFF | Verhältnis | Ergebnis |
|---|---|---|
| #949494 | 3,03:1 | Nur großer Text |
| #777777 | 4,48:1 | Fällt bei AA für Fließtext knapp durch |
| #767676 | 4,54:1 | Besteht AA |
| #595959 | 7,00:1 | Besteht AAA |
| #3B82F6 | 3,68:1 | Nur großer Text und Buttons |
| #008080 | 4,77:1 | Besteht AA |
Die Zeile mit #777777 ist die klassische Falle. Die Farbe sieht genauso aus wie #767676, und ein Prüftool mit einer Nachkommastelle zeigt 4,5 an, aber die Regel lautet „mindestens 4,5“, und 4,48 ist das nicht. Dieses Tool rundet ein nicht bestandenes Verhältnis nie auf den Schwellenwert auf.
Fällt eine Farbe durch, sucht das Tool den nächstgelegenen Farbton mit demselben Hue, der besteht. Für #3B82F6 auf Weiß schlägt es #1E6FF5 für AA (4,52:1) und #0950C5 für AAA (7,08:1) vor. Drück auf Übernehmen, um ihn zu laden, oder kopier ihn direkt in dein Stylesheet. Kräftiges Gelb und Orange muss meist deutlich dunkler werden, bevor es als Text auf Weiß funktioniert. Nutze die kräftige Farbe dann lieber als Hintergrund und setz dunklen Text darauf.
Paletten erstellen und Farben aus Bildern übernehmen
Das Palettenfeld erzeugt eine Skala aus Aufhellungen und Abdunklungen von 50 bis 950 (die Benennung von Tailwind) sowie komplementäre, analoge, triadische, geteilt-komplementäre, quadratische und monochrome Sets. Klick auf ein Farbfeld, um es zu kopieren, und exportier dann das ganze Set als CSS Custom Properties, SCSS-Variablen, JSON oder Tailwind-Farbblock, oder lade einen PNG-Streifen herunter, den du in eine Folie einfügen oder an Kunden schicken kannst.
Um eine Farbe aus einem Logo oder Foto zu treffen, lad das Bild und tipp auf die Stelle. Ein einzelnes Pixel in einem JPG kann wegen Kompressionsrauschen ein paar Nuancen von dem abweichen, was du siehst. Stell bei Fotos deshalb auf den Durchschnitt aus 3×3 oder 5×5 um. In Chrome und Edge holt der Button Vom Bildschirm wählen eine Farbe von überall auf deinem Display, auch aus anderen Fenstern. Es wird nichts hochgeladen, das Bild wird in deinem Browser gelesen.
Häufig gestellte Fragen
Wie rechne ich HEX in RGB um?
Teil die sechs Stellen in drei Paare und wandle jedes Paar aus dem Sechzehnersystem in eine Zahl von 0 bis 255 um. Aus #3B82F6 wird 3B = 59, 82 = 130 und F6 = 246, der RGB-Wert ist also rgb(59, 130, 246).
Wie rechne ich RGB in HEX um?
Schreib jeden Kanal als zweistellige Hexadezimalzahl und häng sie hinter einem # aneinander. rgb(255, 99, 71) ergibt FF, 63 und 47, der HEX-Code ist also #FF6347, die CSS-Farbe tomato.
Welches Kontrastverhältnis brauche ich für WCAG AA?
Normaler Text braucht mindestens 4,5:1, großer Text (24px oder 18,66px fett) 3:1. Grau #767676 auf Weiß hat 4,54:1, das hellste Grau, das für Fließtext noch besteht.
Was bedeutet ein achtstelliger HEX-Code?
Die letzten beiden Stellen sind der Alphakanal (Deckkraft). #3B82F680 ist dasselbe Blau mit 128/255 Deckkraft, etwa 50 %, in CSS also rgba(59, 130, 246, 0.5).
Was bedeutet ein dreistelliger HEX-Code wie #F60?
Jede Ziffer wird verdoppelt, #F60 ist also #FF6600. Die Kurzform geht nur, wenn beide Ziffern jedes Paares gleich sind, deshalb gibt es von #3B82F6 keine dreistellige Version.
Ist der CMYK-Wert genau genug für den Druck?
Er ist ein Ausgangspunkt, kein Proof. Das Tool nutzt die Standardformel, aus #3B82F6 wird also cmyk(76%, 47%, 0%, 4%), aber die echte Farbmischung hängt vom Farbprofil der Druckerei und vom Papier ab. Frag deine Druckerei nach ihren Werten.
Wie bekomme ich den HEX-Code einer Farbe in einem Foto?
Lad das Bild im Feld oben und tipp auf die gewünschte Stelle, das Tool liest dann dieses Pixel aus. Stell bei Fotos auf den Durchschnitt aus 3×3 oder 5×5 um, weil ein einzelnes Pixel oft stärker rauscht als die Farbe, die du siehst.
Was ist der Unterschied zwischen HSL und HSV?
Beide beginnen mit demselben Farbton, aber 100 % Helligkeit in HSL ist immer Weiß, während 100 % Hellwert in HSV die leuchtendste Version der Farbe ist. Reines Rot ist hsl(0, 100%, 50%) und hsv(0, 100%, 100%).