Farbcode-Umrechner
Zwischen HEX, RGB, HSL, HSV und CMYK umrechnen und den Textkontrast prüfen
Tool wird geladen…
Geben Sie eine Farbe in eines der Formate HEX, RGB, HSL, HSV, CMYK, OKLCH oder CSS-Name ein, und die anderen Formate werden sofort aktualisiert. Damit übertragen Sie eine Farbe aus einem Design in CSS oder prüfen, ob Text genug Kontrast zum Hintergrund hat.
So geht’s
- Wählen Sie eine Farbe mit „Farbe wählen“ oder geben Sie einen Wert in ein Feld wie HEX oder RGB ein. Die anderen Felder folgen; kopieren Sie jedes davon mit der Taste daneben.
- Stellen Sie „Deckkraft“ ein, um Transparenz hinzuzufügen; HEX hat dann 8 Stellen, und aus RGB wird rgba.
- Wählen Sie ein Farbfeld unter „Heller und dunkler“ oder „Farbharmonien“, um zu dieser Farbe zu wechseln.
- Legen Sie in der „Kontrastprüfung“ „Textfarbe“ und „Hintergrundfarbe“ fest und lesen Sie das „Kontrastverhältnis“ sowie die Ergebnisse für AA und AAA ab.
So wird gerechnet
- HEX schreibt die Rot-, Grün- und Blauwerte (0 bis 255) als je zwei Hexadezimalziffern. So ist rgb(255, 99, 71) gleich #FF6347.
- Kontrastverhältnis = (relative Leuchtdichte der helleren Farbe + 0,05) ÷ (relative Leuchtdichte der dunkleren Farbe + 0,05), bewertet nach den WCAG-2.2-Erfolgskriterien 1.4.3 und 1.4.6. Das Verhältnis wird abgerundet.
- CMYK verwendet eine einfache Formel ohne Druckprofil, die tatsächliche Druckfarbe weicht also ab. Zuletzt verwendete Farben und die letzte Farbe werden auf diesem Gerät gespeichert.
Häufige Fragen
- Wie rechne ich HEX in RGB um?
- Teilen Sie den Code in Paare und rechnen Sie jedes Paar von hexadezimal in dezimal um. #3B82F6 ergibt 3B = 59, 82 = 130 und F6 = 246, also rgb(59, 130, 246). Geben Sie den Code in das Feld HEX ein, um es sofort zu sehen.
- Welches Kontrastverhältnis braucht Text?
- WCAG AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text; AAA verlangt 7:1 und 4,5:1. Großer Text ist mindestens 24px groß oder 18,66px fett.
- Was ist ein dreistelliger HEX-Code?
- Eine Kurzform des sechsstelligen Codes, bei der jede Ziffer verdoppelt wird. #F80 ist dieselbe Farbe wie #FF8800.
- Kann es mir den Namen einer Farbe sagen?
- Entspricht die Farbe einem der 148 CSS-Farbnamen, wird dieser Name angezeigt; andernfalls erscheinen der nächstgelegene CSS-Name und sein HEX-Wert.