Zum Hauptinhalt springen
Bethemesh
Bilder & Grafiken

Farbkonverter

Wechsle eine Farbe schnell zwischen HEX-, RGB- und HSL-Schreibweise und übernimm die passenden Werte für deine Webprojekte.

  • Zwischenablage

Dieses Widget einbetten

Passe die Darstellung an, prüfe die Vorschau und kopiere anschließend den Code.

Vorschau

Art des Einbettungscodes

Zu kopierender Code

Responsive und automatisch von Bethemesh in der Größe angepasst.

Farbe

HEX-Code (#3366FF, #36F), rgb(51, 102, 255) oder hsl(225, 100%, 60%), optional mit Transparenz.

Ergebnis

War dieses Werkzeug hilfreich?

Wie funktioniert dieses Tool?

Dieselbe Farbe lässt sich in CSS unterschiedlich schreiben: #3366FF, rgb(51, 102, 255) oder hsl(225, 100%, 60%). Dieser Konverter liest eine dieser Schreibweisen und zeigt sofort die beiden anderen an, Transparenz inklusive – um vom Entwurf zum Code zu kommen, ein Stylesheet zu vereinheitlichen oder Farbton und Helligkeit hinter einem HEX-Code zu erkennen.

Gib eine Farbe in das Feld ein: einen HEX-Code mit 3, 4, 6 oder 8 Stellen (#36F, #3366FF80), rgb() oder rgba() mit Kommas oder Leerzeichen, oder hsl() und hsla() mit einem Farbton in Grad, Umdrehungen (turn) oder Radiant. Du kannst auch auf das Farbfeld klicken und die Farbe im Farbwähler des Systems auswählen.

Die Umrechnung erfolgt sofort. HEX erscheint in Großbuchstaben, RGB als ganze Zahlen von 0 bis 255 und HSL mit höchstens einer Nachkommastelle. Eine Transparenz unter 100 % ergänzt den HEX-Code um ein viertes Byte und liefert rgba() und hsla(). Werte außerhalb des Bereichs werden begrenzt: Aus rgb(300, 0, 0) wird rgb(255, 0, 0).

Jedes Ergebnis hat eine eigene Schaltfläche Kopieren. CSS-Farbnamen wie „red“ oder „navy“ werden nicht erkannt: Gib stattdessen ihren Code ein.

So verwenden Sie dieses Tool

  1. Farbe eingeben

    Tippe einen HEX-Code, einen rgb()- oder hsl()-Wert ein oder wähle die Farbe im Farbwähler.

  2. Entsprechungen ablesen

    Die Felder HEX, RGB und HSL aktualisieren sich bei jeder Eingabe; eine Meldung zeigt unbekannte Eingaben an.

  3. Ergebnis kopieren

    Klicke auf das Kopiersymbol neben der Schreibweise, die du brauchst.

Von RGB zu HSL

Die drei Kanäle werden auf 0 bis 1 skaliert; ihr Maximum M, ihr Minimum m und ihre Differenz Δ = M − m ergeben Helligkeit, Sättigung und Farbton.

Helligkeit

L = (M + m) ÷ 2

Mittelwert aus stärkstem und schwächstem Kanal.

Sättigung

S = Δ ÷ (1 − |2L − 1|)

Null, wenn alle drei Kanäle gleich sind (Grau).

Farbton

H = 60° × ((G − B) ÷ Δ mod 6, (B − R) ÷ Δ + 2 oder (R − G) ÷ Δ + 4)

Die Formel hängt vom stärksten Kanal ab; das Ergebnis wird auf 0 bis 360° gebracht.

R, G, B
Rot-, Grün- und Blaukanal geteilt durch 255
M, m
größter und kleinster der drei Kanäle
Δ
Differenz M − m

Anwendungsfälle

Vom Entwurf zu CSS

Wandle den HEX-Code eines Entwurfs in hsl() um, um leicht hellere oder dunklere Varianten zu bilden.

Stylesheet vereinheitlichen

Bringe Farben, die mal als HEX und mal als rgb() notiert sind, in einem Projekt auf eine Linie.

Eine Farbe verstehen

Lies Farbton, Sättigung und Helligkeit eines Codes ab, um zu sehen, warum er matt oder zu grell wirkt.

Beispiele

Ein Markenblau in drei Schreibweisen

33, 66 und FF sind hexadezimal 51, 102 und 255. Blau überwiegt: Farbton 225°, volle Sättigung, Helligkeit 60 %.

Eingabe

#3366FF

Ergebnis

HEX #3366FF; RGB rgb(51, 102, 255); HSL hsl(225, 100%, 60%)

Eine HSL-Farbe mit Transparenz

Die HSL-Farbe wird in gerundete Kanäle von 0 bis 255 umgerechnet, die Deckkraft von 50 % wird zum Byte 80 im Hexadezimalsystem (128 von 255).

Eingabe

hsl(210 70% 50% / 50%)

Ergebnis

HEX #2680D980; RGB rgba(38, 128, 217, 0.5); HSL hsla(210, 70%, 50%, 0.5)

Tipps und bewährte Vorgehensweisen

  • Um eine Farbe heller oder dunkler zu machen, ohne den Farbton zu ändern, wechsle zu HSL und passe nur die Helligkeit an.
  • Ein dreistelliger HEX-Code verdoppelt jede Ziffer: #36F entspricht #3366FF.
  • Achtstelliges HEX (#RRGGBBAA) funktioniert in aktuellen Browsern, manche Grafikprogramme erwarten aber nur 6 Stellen.
  • Beim Umrechnen von HSL in HEX werden die Kanäle auf ganze Zahlen gerundet: Zwei sehr ähnliche HSL-Werte können denselben HEX-Code ergeben.

Quellen und Referenzen

Häufig gestellte Fragen

Welche Schreibweisen kann ich eingeben?

HEX mit 3, 4, 6 oder 8 Stellen, mit oder ohne #, rgb() und rgba(), hsl() und hsla(), mit Kommas oder in der modernen Schreibweise mit Leerzeichen und „/“ für die Deckkraft.

Werden Farbnamen wie „tomato“ akzeptiert?

Nein. Es werden nur numerische Schreibweisen gelesen; such den HEX-Code des Farbnamens heraus und gib ihn ein.

Warum ist der Farbton bei einem Grau 0?

Ein Grau hat keinen Farbton: Seine drei Kanäle sind gleich, die Sättigung ist null und der Farbton wird per Konvention auf 0 gesetzt.

Wie wird die Transparenz umgerechnet?

Die Deckkraft von 0 bis 1 wird mit 255 multipliziert und bildet das vierte Byte des HEX-Codes: 0,5 ergibt 80, bei 1 entfällt das Byte.

Ist die Umrechnung exakt?

HEX und RGB sind bitgenau gleichwertig. HSL wird ohne Zwischenrundung berechnet und mit einer Nachkommastelle angezeigt; beim Wechsel zu HEX wird jeder Kanal auf eine ganze Zahl gerundet.

Wird meine Farbe irgendwohin gesendet?

Nein. Die Umrechnung ist eine Berechnung in deinem Browser, ohne Netzwerkanfrage.

Verwandte Werkzeuge

Mit diesen Werkzeugen weitermachen

Werkzeuge, die diesem ähnlich sind oder es ergänzen.

Ähnliche Werkzeuge

Farbpaletten-Generator

Erstelle aus einer Farbe eine komplementäre, analoge, triadische oder monochrome Palette.

Bilder & GrafikenDieses Werkzeug verwenden

Farben aus Bild extrahieren

Extrahiere die dominanten Farben eines Bildes als Palette, ohne es auf einen Server hochzuladen.

Bilder & GrafikenDieses Werkzeug verwenden

Farbenblindheit-Simulator

Zeige, wie ein Bild bei verschiedenen Formen von Farbsehschwäche wirken kann.

Bilder & GrafikenDieses Werkzeug verwenden

Auch interessant

ReferenzKonzepte und TechnologienAnfänger

RGB, HEX oder HSL: Welche Notation ist sinnvoll?

Verstehe, wie RGB, HEX und HSL dieselben Webfarben unterschiedlich beschreiben und wann welche Notation in CSS, Design und Entwicklung praktisch ist.

31. August 20264 min
LeitfadenBewährte MethodenFortgeschritten

SVG optimieren, ohne die Darstellung zu verändern

Lerne, unnötige Metadaten, Kommentare, Editor-Daten, Präzision und Attribute aus SVG zu entfernen, ohne Skalierbarkeit oder sichtbares Ergebnis zu beschädigen.

31. August 20265 min
LeitfadenFormateAnfänger

SVG: das Vektorformat verstehen

Verstehe, wie SVG Formen, Pfade, viewBox, CSS und XML kombiniert, warum es ohne klassisches Pixelraster skaliert und wann es fürs Web geeignet ist.

31. August 20265 min