🎨 Farbumrechner
Fügen Sie eine Farbe in beliebigem Format ein – #3B82F6, rgb(), hsl() oder einen englischen Namen wie teal – und erhalten Sie alle anderen Formate, Kontrastwerte für Barrierefreiheit und eine Palette aus Aufhellungen und Abdunklungen.
Kurz gesagt: #3B82F6 entspricht rgb(59, 130, 246), hsl(217, 91 %, 60 %) und cmyk(76 %, 47 %, 0 %, 4 %); das Kontrastverhältnis beträgt 3,68:1 auf Weiß (AA nur für großen Text) und 5,71:1 auf Schwarz (AA).
Noch keine Bewertungen · Aktualisiert am · Kostenlos · Ohne Anmeldung
Eingaben: Farbumrechner
Ergebnis
Farbe
#3B82F6
rgb(59, 130, 246)
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV / HSB | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
- Kontrast zu Weiß
- 3,68:1 · AA nur für großen Text
- Kontrast zu Schwarz
- 5,71:1 · AA
- Beste Textfarbe
- Schwarz
Aufhellungen (mit Weiß gemischt)
| Aufhellung | Farbe | RGB | HSL |
|---|---|---|---|
| Ausgangsfarbe | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10 % | #4F8FF7 | rgb(79, 143, 247) | hsl(217, 91%, 64%) |
| 20 % | #629BF8 | rgb(98, 155, 248) | hsl(217, 91%, 68%) |
| 30 % | #76A8F9 | rgb(118, 168, 249) | hsl(217, 92%, 72%) |
| 40 % | #89B4FA | rgb(137, 180, 250) | hsl(217, 92%, 76%) |
| 50 % | #9DC1FB | rgb(157, 193, 251) | hsl(217, 92%, 80%) |
| 60 % | #B1CDFB | rgb(177, 205, 251) | hsl(217, 90%, 84%) |
| 70 % | #C4DAFC | rgb(196, 218, 252) | hsl(216, 90%, 88%) |
| 80 % | #D8E6FD | rgb(216, 230, 253) | hsl(217, 90%, 92%) |
| 90 % | #EBF3FE | rgb(235, 243, 254) | hsl(215, 90%, 96%) |
Abdunklungen (mit Schwarz gemischt)
| Abdunklung | Farbe | RGB | HSL |
|---|---|---|---|
| Ausgangsfarbe | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10 % | #3575DD | rgb(53, 117, 221) | hsl(217, 71%, 54%) |
| 20 % | #2F68C5 | rgb(47, 104, 197) | hsl(217, 61%, 48%) |
| 30 % | #295BAC | rgb(41, 91, 172) | hsl(217, 62%, 42%) |
| 40 % | #234E94 | rgb(35, 78, 148) | hsl(217, 62%, 36%) |
| 50 % | #1E417B | rgb(30, 65, 123) | hsl(217, 61%, 30%) |
| 60 % | #183462 | rgb(24, 52, 98) | hsl(217, 61%, 24%) |
| 70 % | #12274A | rgb(18, 39, 74) | hsl(218, 61%, 18%) |
| 80 % | #0C1A31 | rgb(12, 26, 49) | hsl(217, 61%, 12%) |
| 90 % | #060D19 | rgb(6, 13, 25) | hsl(218, 61%, 6%) |
Kontrastanforderungen nach WCAG
| Stufe | Normaler Text | Großer Text (ab 18 pt oder 14 pt fett) | Auf Weiß | Auf Schwarz |
|---|---|---|---|---|
| AA | 4,5:1 | 3:1 | Nur großer Text | Erfüllt |
| AAA | 7:1 | 4,5:1 | Nicht erfüllt | Nur großer Text |
So nutzen Sie den Farbumrechner
Fügen Sie eine Farbe in einem gängigen Format ein – #3B82F6, #38F, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) oder einen einfachen englischen Farbnamen wie teal. Sie erhalten alle anderen Formate, ein Farbfeld, die Kontrastwerte und eine Palette aus Aufhellungen und Abdunklungen.
Umrechnungsformeln
HEX → RGB: Jedes Paar Hexadezimalziffern ist ein Kanal, 00–FF = 0–255
CMYK: K = 1 − max(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K), M und Y entsprechend (R′ = R ÷ 255)
HSL: L = (max + min) ÷ 2 · S = (max − min) ÷ (1 − |2L − 1|) · H aus dem dominanten Kanal
Kontrast = (L1 + 0,05) ÷ (L2 + 0,05), mit der relativen Leuchtdichte nach WCAG
Rechenbeispiel
#3B82F6 zerfällt in 3B, 82 und F6 = rgb(59, 130, 246). Blau ist der größte Kanal (0,965), also ist K = 3,5 % und C = (1 − 0,231 − 0,035) ÷ 0,965 = 76 %, was cmyk(76%, 47%, 0%, 4%) ergibt. In HSL ist es hsl(217, 91%, 60%). Die relative Leuchtdichte beträgt 0,236, der Kontrast also 3,68:1 gegenüber Weiß und 5,71:1 gegenüber Schwarz – für kleine Schrift sollten Sie darauf schwarzen Text verwenden.
Gängige Farben
| Farbe | HEX | RGB | HSL |
|---|---|---|---|
| Rot | #FF0000 | 255, 0, 0 | 0°, 100 %, 50 % |
| Grün | #008000 | 0, 128, 0 | 120°, 100 %, 25 % |
| Blau | #0000FF | 0, 0, 255 | 240°, 100 %, 50 % |
| Orange | #FFA500 | 255, 165, 0 | 39°, 100 %, 50 % |
| Petrol | #008080 | 0, 128, 128 | 180°, 100 %, 25 % |
| Grau | #808080 | 128, 128, 128 | 0°, 0 %, 50 % |
Tipps
- Die CMYK-Werte hier sind eine einfache, geräteunabhängige Umrechnung – für professionellen Druck rechnen Sie mit dem ICC-Profil Ihrer Druckerei um.
- Prüfen Sie den Kontrast jeder Text-Hintergrund-Kombination in einem Design, nicht nur den der Markenfarbe.
Häufig gestellte Fragen
Wie rechne ich HEX in RGB um?
Teilen Sie die sechs Hexadezimalziffern in drei Paare und rechnen Sie jedes vom 16er- ins Dezimalsystem um. #3B82F6 → 3B = 59, 82 = 130, F6 = 246, also rgb(59, 130, 246).
Was ist der Unterschied zwischen RGB und CMYK?
RGB mischt rotes, grünes und blaues Licht für Bildschirme; CMYK mischt die Druckfarben Cyan, Magenta, Gelb und Schwarz. Sehr helle oder gesättigte Bildschirmfarben lassen sich im Druck oft nicht exakt wiedergeben.
Was ist der Unterschied zwischen HSL und HSV?
Beide beschreiben den Farbton als Winkel (0–360°) plus Sättigung. Die Helligkeit (Lightness) von HSL reicht von Schwarz über die reine Farbe bis Weiß, der Hellwert (Value, auch HSB-Brightness) von HSV dagegen von Schwarz bis zur reinen Farbe.
Welches Kontrastverhältnis braucht barrierefreier Text?
WCAG 2 Stufe AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text (18 pt oder 14 pt fett). Stufe AAA verlangt 7:1 bzw. 4,5:1.
Was sind Aufhellungen und Abdunklungen?
Bei einer Aufhellung wird die Farbe mit Weiß gemischt und dadurch heller, bei einer Abdunklung mit Schwarz und dadurch dunkler. So entsteht schnell eine stimmige Palette aus einer einzigen Markenfarbe.
Wie gefällt Ihnen dieser Rechner?
Angezeigt wird nur die durchschnittliche Bewertung. Fehlermeldungen landen direkt in unserem Postfach, damit wir sie prüfen und korrigieren können. Mehr dazu in unserer Methodik und in unserer Datenschutzerklärung.