Farbcode-Konverter

Dieser kostenlose Farbcode-Konverter wandelt sofort zwischen HEX-, RGB- und HSL-Farbcodes um und ist HEX-Farbwähler und Farbcode-Finder in einem. Wandeln Sie HEX in RGB oder RGB in HEX um, wählen Sie eine Farbe aus einem Bild oder mit der Bildschirm-Pipette und kopieren Sie CSS-fertige Werte mit einem Klick – ein schneller, browserbasierter Farbcode-Picker für Designer und Entwickler.

Was ist ein Farbcode? Wie funktionieren HTML-Farbcodes?

Ein Farbcode ist eine standardisierte, numerische Art, Farben in digitalen Medien zu beschreiben. Auch als HTML-Farbcodes bekannt, werden diese Werte in CSS, HTML, Grafikprogrammen und mobilen Apps verwendet, um Farben geräteübergreifend einheitlich darzustellen.

Die drei häufigsten Formate sind:

• HEX (hexadezimal): geschrieben als #RRGGBB. Jedes Paar hexadezimaler Ziffern steht für eine Farbkomponente von 0 bis 255. Zum Beispiel ist #d63428 ein Rotton.
• RGB (Rot, Grün, Blau): drei separate Werte, jeder von 0 bis 255. Verwenden Sie rgba() für Transparenz.
• HSL (Farbton, Sättigung, Helligkeit): teilt die Farbe in Farbton, Sättigung und Helligkeit auf. Ideal zum Erstellen von Paletten und für das Dark-Mode-Design.

Farbcode-Vergleichstabelle

Die folgende Tabelle zeigt gängige Farbcodes und ihre HEX-, RGB- und HSL-Entsprechungen:

So finden Sie einen Farbcode – einen HEX-Code ermitteln

Es gibt mehrere Wege, mit diesem Werkzeug einen Farbcode zu finden:

• Farbwähler: Klicken Sie irgendwo auf die Palette; die HEX-, RGB- und HSL-Werte aktualisieren sich automatisch.
• HEX-Wert eingeben: Tippen Sie den HEX-Code (#RRGGBB) ein, den Sie bereits kennen.
• RGB oder HSL eingeben: Tippen Sie die numerischen Werte ein, um die anderen Formate sofort umzuwandeln.
• Vordefinierte Farben: Wählen Sie eine häufig verwendete Farbe aus der integrierten Palette.

Um anderswo einen HEX-Code zu finden, können Sie auch die Entwicklertools Ihres Browsers (F12 → Elemente → Stile) oder das Farbfeld in Design-Apps wie Figma oder Photoshop nutzen. Als HEX-Code-Finder funktioniert es in beide Richtungen: Fügen Sie einen HEX-Wert ein, um seine RGB- und HSL-Entsprechungen zu lesen, oder geben Sie RGB-Zahlen ein, um den HEX zu erhalten.

HEX in RGB und RGB in HEX umwandeln

Die zwei häufigsten Umwandlungen sind HEX in RGB und RGB in HEX, und dieses Werkzeug erledigt beide automatisch. Ein HEX-Code wie #d63428 besteht aus drei hexadezimalen Paaren – RR, GG und BB –, sodass die Umwandlung von HEX in RGB bedeutet, jedes Paar als Zahl von 0–255 zu lesen: #d63428 wird zu rgb(214, 52, 40). Umgekehrt wandelt RGB in HEX jeden Wert von 0–255 in ein zweistelliges hexadezimales Paar um, sodass rgb(214, 52, 40) zu #d63428 wird. Sobald Sie ein Format ändern, berechnet der Konverter die anderen in Echtzeit neu.

So verwenden Sie einen HTML-Farbcode in CSS

HTML-Farbcodes werden in CSS-Stilangaben mit verschiedenen Eigenschaften verwendet. Alle drei Formate werden von allen Browsern voll unterstützt:

• Mit HEX: color: #d63428; oder background-color: #6366f1;
• Mit RGB: color: rgb(214, 52, 40); – für Transparenz rgba(214, 52, 40, 0.5)
• Mit HSL: color: hsl(4, 69%, 50%); – für Transparenz hsla(4, 69%, 50%, 0.8)
• CSS-Variablen: definieren Sie --primary: hsl(4, 69%, 50%); und nutzen Sie color: var(--primary);

Farbtheorie im Webdesign: Harmonie und Palettenaufbau

Die richtigen Farben zu wählen ist ebenso ästhetisch wie technisch. Die Grundlagen der Farbtheorie zu verstehen hilft, eine Palette zu bauen, die zu Ihrer Marke oder Ihrem Projekt passt.

• Komplementärfarben: gegenüberliegende Positionen im Farbkreis erzeugen starken Kontrast – zum Beispiel Blau (#0000ff) mit Orange (#ffa500).
• Analoge Farben: benachbarte Farben im Farbkreis erzeugen ein ruhiges, harmonisches Bild, etwa Blau, Blaugrün und Grün.
• Triadische Farben: drei gleichmäßig im Farbkreis verteilte Farben – wie Rot, Gelb und Blau – ergeben eine lebendige, ausgewogene Palette.
• Monochrome Palette: nutzen Sie einen Farbton in verschiedenen Sättigungs- und Helligkeitswerten. Halten Sie in HSL H fest und variieren Sie S und L.
• Neutrale Farben: Schwarz, Weiß und Grautöne passen leicht zu jeder Farbe und sind bei Typografie und Hintergründen verbreitet.

Farb-Barrierefreiheit: WCAG-Kontraststandards

Die Standards zur Web-Barrierefreiheit (WCAG 2.1) definieren Mindest-Kontrastverhältnisse zwischen Text und Hintergrund. Sie einzuhalten verbessert die Nutzererfahrung und ist oft gesetzlich vorgeschrieben.

• Stufe AA (normaler Text): mindestens 4,5:1 Kontrast. Dunkelgrau (#767676) auf Weiß (#ffffff) erfüllt dies gerade.
• Stufe AA (großer Text): mindestens 3:1 reicht für 18pt und größere Schrift.
• Stufe AAA: der höchste Standard erfordert 7:1 Kontrast. Empfohlen für Nutzer mit eingeschränktem Sehvermögen.
• Farbenblind-freundlich: vermeiden Sie es, Bedeutung allein über Farbe zu vermitteln; ergänzen Sie Symbole, Formen oder Text. Die Rot-Grün-Sehschwäche ist die häufigste Form.

Nutzen Sie diesen Farbcode-Konverter, um HEX-Werte zu finden und sie in Kontrast-Werkzeugen zu testen. Er funktioniert auch als CSS-Farb-Finder: Kopieren Sie jede ausgewählte Farbe als CSS-fertiges HEX, RGB oder HSL.

Unterschiede zwischen HEX, RGB und HSL

So verwenden Sie diesen Farbcode-Konverter

1. Farbe wählen oder Code eingeben: Klicken Sie auf die Palette oder tippen Sie einen Wert in das HEX-, RGB- oder HSL-Feld.
2. Automatische Umwandlung: Sobald sich ein Wert ändert, aktualisieren sich HEX, RGB und HSL sofort.
3. Aus einem Bild wählen (optional): Wechseln Sie zum Reiter „Aus Bild“, laden Sie ein Foto hoch und klicken Sie auf ein beliebiges Pixel, um dessen Farbwerte zu erfassen.
4. Kopieren: Nutzen Sie die Kopier-Schaltfläche für HEX, RGB oder HSL und fügen Sie den Wert direkt in Ihr CSS ein.

Im FAQ-Bereich unten finden Sie mehr dazu, was ein Farbcode ist, wie man einen Farbcode findet und wie HTML-Farbcodes funktionieren.