Zum Inhalt springen
Allin
Registrieren · Anmelden

Farb-Konverter

Wandle eine Farbe in HEX, RGB, HSL, HSV, CMYK, LAB und OKLCH um — samt Kontrast.

Ähnliche Tools

Alle Tools: Farben & CSS →
Favicon-GeneratorErstelle ein Buchstaben-Favicon mit Farben und lade es als PNG herunter.Bild-KonverterWandle deine Bilder in PNG, JPG, WebP, AVIF, BMP, GIF, TIFF oder ICO um, stapelweise und ohne Upload.Farbkontrast-PrüferWCAG-Kontrastverhältnis zwischen Text und Hintergrund, mit AA/AAA-Bestehen und Live-Vorschau.Farb-InvertiererInvertiere eine Farbe (255 − RGB) oder bilde die Komplementärfarbe, in HEX/RGB/HSL/CMYK mit Kontrast.Farbschema-GeneratorLeite komplementäre, analoge, triadische, tetradische, geteilte und monochrome Schemata aus einer Basisfarbe ab.Bild-FarbwählerLade ein Bild, klick zum Abtasten eines Pixels und extrahiere eine dominante Palette — mit HEX und RGB je Farbfeld.

Dieser kostenlose Farbkonverter wandelt jede Farbe sofort zwischen HEX, RGB und HSL um — direkt im Browser. Gib einen Wert in einem Format ein und lies ihn in allen anderen, bereit zum Einfügen in CSS, ein Designtool oder deinen Code. Ideal für Markenfarben, Paletten und das Feinjustieren von Tönen.

So funktioniert's

  1. Gib eine Farbe als HEX, RGB oder HSL ein.
  2. Lies die entsprechenden Werte in allen anderen Formaten.
  3. Kopiere das gewünschte Format in dein Projekt.

Häufige Fragen

Wie wandle ich HEX in RGB um?

Eine HEX-Farbe wie #4287f5 besteht aus drei Paaren — Rot (42), Grün (87), Blau (f5) — jeweils als Hex-Zahl von 0–255. Dieses Tool rechnet es sofort um.

Was ist HSL?

HSL steht für Farbton (Hue), Sättigung und Helligkeit (Lightness). Oft einfacher als RGB zum Anpassen: Helligkeit hoch für heller, Sättigung runter zum Abschwächen, Farbton verschieben für eine andere Farbe.

Was ist der Unterschied zwischen HEX und RGB?

Sie beschreiben dieselbe Farbe — HEX ist eine kompakte Basis-16-Notation (#ff0000), RGB listet die Kanäle dezimal (rgb(255,0,0)). Beide werden in CSS unterstützt.

Kann ich diese Werte in CSS verwenden?

Ja. HEX, rgb() und hsl() sind gültige CSS-Farbwerte — kopiere den passenden für dein Stylesheet oder Designsystem.

Was ist Farb-Konverter?

Wandle eine Farbe in HEX, RGB, HSL, HSV, CMYK, LAB und OKLCH um — samt Kontrast.

Wann brauche ich das konkret?

Eine Farbe von einem Designtool in ein Stylesheet bringen, eine Palette um eine Markenfarbe bauen und prüfen, ob Text darauf lesbar bleibt.

Was ist der häufigste Fehler?

Kontrast nach Augenmaß beurteilen. Zwei auf hellem Monitor deutlich verschiedene Farben können das Barrierefreiheits-Verhältnis klar verfehlen — und genau dieses misst ein Audit.

Worin unterscheidet sich Farb-Konverter von Farbkontrast-Prüfer?

Sie liegen nah beieinander, beantworten aber verschiedene Fragen: Farbkontrast-Prüfer ist das richtige, wenn es darum geht, wCAG-Kontrastverhältnis zwischen Text und Hintergrund, mit AA/AAA-Bestehen und Live-Vorschau. Nimm das, was zu deinem Ausgangspunkt passt — beide sind kostenlos.

Gibt es ein Werkzeug für den nächsten Schritt?

Farb-Invertierer ist das nächstliegende danach: Invertiere eine Farbe (255 − RGB) oder bilde die Komplementärfarbe, in HEX/RGB/HSL/CMYK mit Kontrast.

Was lohnt sich sonst noch daneben offen zu haben?

Farbschema-Generator und Bild-Farbwähler — sie tauchen in derselben Aufgabe oft genug auf, um einen zweiten Tab zu verdienen.

Zum Weiterlesen

Alle Ratgeber →
AnleitungHEX vs. RGB: Farben lesen und umrechnenHEX und RGB sind zwei Schreibweisen für dieselben Farben. Hier steht, wie du jede liest, umrechnest und Transparenz hinzufügst.ErklärungKontrastverhältnis: wie die WCAG es tatsächlich berechnetDas WCAG-Verhältnis lautet (L1 + 0,05) ÷ (L2 + 0,05), und L ist die relative Leuchtdichte, nicht die Helligkeit. Grün trägt 71,52 % davon und Blau 7,22 % — deshalb besteht reines Blau auf Weiß mit 8,59:1, während mittleres Grau mit 3,95:1 durchfällt. Hier ist die ganze Rechnung, von Anfang bis Ende durchgeführt.ErklärungVerläufe, Banding und warum die Mitte matschig aussiehtIn sRGB zu interpolieren mittelt gammacodierte Zahlen: Die Mitte von Rot nach Grün ist #808000, obwohl die Halblicht-Antwort #bcbc00 lautet — 57,2 % zu wenig Licht. Banding ist ein eigenes Rechenproblem: 8 Bit ergeben 256 Stufen, und ein dunkler Verlauf hat womöglich nur 28. Hier sind beide, durchgerechnet.ErklärungFarbschemata sind Geometrie auf einem Kreis — und der Kreis stimmt nichtKomplementär, Triade, Analog und geteilt-komplementär sind bloß Drehungen: addiere 180°, 120°, 30° oder 150° zu einem Farbton. Die Arithmetik ist trivial. Das Problem ist, dass der HSL-Farbtonkreis nicht wahrnehmungsgleichmäßig ist — Gelb und Blau bei gleicher HSL-Helligkeit unterscheiden sich um den Faktor 12,85 in der Leuchtdichte — eine erzeugte Palette muss also anschließend auf Kontrast geprüft werden.RatgeberWas ein Minifier entfernen darf und was nichtMinifizierung muss die Bedeutung erhalten, und interessant ist der Leerraum, der Bedeutung trägt: der Nachfahrenkombinator, die Leerzeichen in calc(), der Abstand zwischen zwei Inline-Elementen. Hier an echten Dateien gemessen, samt dem, was Brotli ohnehin gespart hätte.RatgeberVerschönern oder minifizieren: wofür beides gut ist und was es am Gewicht ändertVier echte Stylesheets durch den Minifier, roh und nach gzip gemessen. Alle Leerzeichen zu entfernen sparte 48, 103, 104 und 147 komprimierte Bytes; die Kommentare zu entfernen 57, 1 358, 2 420 und 1 042. Dazu die fünf Eingaben, an denen dieser Minifier scheitert.