Gib einen Hex-Code oder RGB-Tripel ein; wir konvertieren und zeigen eine Farbprobe.
Farbcodes sind nicht willkürlich – sie haben eine präzise Logik, die es sich lohnt zu verstehen
Hex-Farbcodes wie #3A7BD5 kodieren drei Farbkanäle – Rot, Grün, Blau – als zweistellige Hexadezimalpaare. #3A ist 58 im Dezimalsystem, #7B ist 123, #D5 ist 213. Diese drei Zahlen definieren exakt, wie viel rotes, grünes und blaues Licht sich mischt, um die Farbe auf dem Bildschirm zu erzeugen. Da jeder Kanal von 0 bis 255 reicht, gibt es 16.777.216 mögliche Hex-Farben. CSS, SVG, HTML-Canvas und die meisten Design-Tools akzeptieren Hex nativ.
HSL (Farbton, Sättigung, Helligkeit) ist für Design-Arbeit oft nützlicher als RGB, weil es abbildet, wie Menschen über Farbe nachdenken. Farbton ist die Position auf dem Farbrad (0–360 Grad), Sättigung ist die Farbintensität und Helligkeit ist die Leuchtkraft. Nur den Helligkeitswert in HSL anzupassen liefert Ihnen zuverlässige Schattierungen einer Farbe, ohne ihren Farbton zu verschieben – etwas, das im RGB-Farbraum nur schwer vorhersehbar zu erreichen ist.
Frequently asked questions
Was ist der Unterschied zwischen 3-stelligen und 6-stelligen Hex-Farbcodes?
Dreistelliges Hex (#RGB) ist eine Kurzform für sechsstelliges Hex (#RRGGBB), bei dem jede Ziffer verdoppelt wird. So erweitert sich <code>#A3F</code> zu <code>#AA33FF</code>. Diese Kurzform funktioniert nur, wenn beide Ziffern jedes Kanals identisch sind. Sie spart einige Zeichen in CSS, repräsentiert aber dieselbe 4.096-Farben-Untermenge der vollen 16,7 Millionen Farben. Im Zweifelsfall verwenden Sie die 6-stellige Form – sie ist stets gültig und eindeutig.
Warum sehen Farben auf dem Bildschirm anders aus als im Druck?
Bildschirme verwenden <strong>additive Farbmischung</strong> (RGB: Licht wird addiert), während Drucker <strong>subtraktive Mischung</strong> verwenden (CMYK: Tinte absorbiert Licht). RGB kann lebhafte, gesättigte Neonfarben darstellen, die in CMYK einfach nicht reproduziert werden können – sie liegen „außerhalb des Gamuts“ für den Druck. Wenn Sie in Hex/RGB für ein Druckprojekt gestalten, ohne zu CMYK zu konvertieren, approximiert die Farbmanagement-Software Ihres Druckers die Farben – oft wirken sie matter als erwartet.
Was ist der Alpha-Kanal und wie funktioniert er in CSS?
Alpha steuert die Deckraft auf einer Skala von 0–1. In CSS rendert <code>rgba(58, 123, 213, 0.5)</code> die Farbe mit 50 % Deckkraft. Das 8-stellige Hex-Format <code>#3A7BD580</code> kodiert Alpha in den letzten zwei Hex-Ziffern – <code>80</code> in Hex entspricht 128 im Dezimalsystem, also etwa 50 % Deckkraft. Die Browser-Unterstützung für 8-stelliges Hex ist in modernen Browsern solide, kann jedoch bei älteren IE-era-Codebasen Probleme verursachen. Das <code>rgba()</code>-Format ist für breite Kompatibilität sicherer.
Wie finde ich den Hex-Code für eine Farbe, die ich auf einer Website sehe?
Die zuverlässigste Methode sind die DevTools Ihres Browsers. Klicken Sie mit der rechten Maustaste auf ein Element, wählen Sie „Untersuchen“ und suchen Sie die Farbeigenschaft im Styles-Panel – Chrome und Firefox zeigen beide anklickbare Farbfelder an, die Hex-, RGB- und HSL-Werte anzeigen. Alternativ ermöglichen Browser-Erweiterungen wie <strong>ColorZilla</strong> das Pipettieren eines beliebigen Pixels auf dem Bildschirm. Für Design-Assets zeigen Tools wie Figma und Adobe XD Hex-Werte direkt im Füllinspector an.