PK Systems PK Systems
Farb-Tools

Farbkonverter

In Echtzeit zwischen HEX, RGB, HSL, HSV und CMYK konvertieren. Farbe wählen oder beliebigen Wert einfügen — alle Formate aktualisieren sich beim Tippen.

Farbkonverter

Aufhellungen und Abdunklungen

Über Farbmodelle

Jedes Format auf dieser Seite beschreibt dieselbe Farbe in einer anderen Sprache. HEX und RGB sprechen die Rot-, Grün- und Blau-Lichtkanäle deines Bildschirms direkt an — sie sind austauschbar. HSL und HSV ordnen dieselbe Information in Farbton (Hue), Sättigung und eine Helligkeits- bzw. Wertachse um, was intuitiver wirkt, wenn du eine Farbe aufhellen, abdunkeln oder den Farbton drehen willst. CMYK ist das Druckmodell: Cyan-, Magenta-, Gelb- und Key-Tinte (Schwarz) ziehen Licht von weißem Papier ab, sodass die Bildschirmvorschau nur eine Annäherung daran ist, wie die Farbe gedruckt aussehen wird.

So nutzt du diesen Konverter

Wähle eine Farbe im nativen Picker oder tippe einen Wert in ein beliebiges Feld — HEX akzeptiert #RGB und #RRGGBB, RGB akzeptiert rgb(r, g, b), und HSL akzeptiert hsl(h, s%, l%). Die anderen Zeilen aktualisieren sich sofort. Nutze die Schaltfläche Kopieren neben jedem Format, um den Wert in die Zwischenablage zu senden. Die fünf Farbfelder unter dem Formular zeigen denselben Farbton bei 10 %, 30 %, 50 %, 70 % und 90 % Helligkeit als Vorschau — klicke auf eines, um diese Variante in das Formular zu laden.

Schnellreferenz für Formate

Verwende HEX in CSS, Designtools und Markenrichtlinien — es ist die kompakteste Schreibweise. Verwende RGB, wenn du eine transparente Variante brauchst: wechsle auf rgba(r, g, b, a) mit einem Alpha-Wert zwischen 0 und 1. Verwende HSL, wenn du Paletten von Hand baust — Farbton und Sättigung fest zu halten und nur die Helligkeit zu ändern, erzeugt Aufhellungen und Abdunklungen, die als zusammenhängende Familie gelesen werden. Verwende CMYK nur, wenn du Druckdaten an eine Druckerei sendest, und frage den Drucker nach exakten Vorgaben — jedes Druckerprofil verschiebt Farben leicht.

Häufig gestellte Fragen

Ist diese Umrechnung exakt?
HEX, RGB, HSL und HSV beschreiben alle Bildschirmfarben und lassen sich verlustfrei hin- und zurückrechnen, abgesehen von der kleinen Rundung, die im Arbeiten mit 8-Bit-Kanälen liegt. CMYK ist eine Annäherung: Die tatsächliche Druckausgabe hängt vom Farbprofil des Druckers, vom Papier und vom Tintensatz ab. Nutze die CMYK-Ausgabe als Ausgangspunkt und bestätige sie mit einem Proof.
Was ist der Unterschied zwischen HSL und HSV?
Beide teilen sich dieselben Farbton- und Sättigungsachsen, aber die dritte Achse unterscheidet sich. In HSL ist Helligkeit 0 % Schwarz und 100 % Weiß, mit dem reinen Farbton bei 50 %. In HSV ist Wert 100 % der reine Farbton und 0 % Schwarz — es gibt keinen eingebauten Pfad zu Weiß. HSL fühlt sich natürlicher an, um Aufhellungen und Abdunklungen zu wählen; HSV fühlt sich natürlicher an, um zu wählen, wie kräftig ein Farbton brennen soll.
Warum sieht mein HEX im Druck anders aus?
Bildschirme strahlen Licht additiv aus (RGB), Drucker absorbieren Licht subtraktiv (CMYK). Lebendige Blau-, Grün- und Orangetöne, die auf dem Bildschirm leicht existieren, fallen oft aus dem CMYK-Gamut. Prüfe vor der Freigabe immer einen gedruckten Proof und frage deine Druckerei, ob sie CMYK oder idealerweise eine Pantone-Referenz für Markenfarben möchte.
Kann ich jeden CSS-Farbstring einfügen?
Die Felder HEX, RGB und HSL akzeptieren die gängigsten CSS-Schreibweisen — #RGB, #RRGGBB, rgb(...), rgba(...), hsl(...), hsla(...). Benannte Farben wie tomato und moderne oklch()-Werte werden noch nicht geparst — wandle sie zuerst in den Devtools deines Browsers um.
Werden die umgewandelten Werte irgendwo gespeichert?
Nein. Die Umrechnung läuft vollständig in deinem Browser; nichts wird an einen Server gesendet, und die Werte werden zwischen Besuchen nicht gespeichert. Setze ein Lesezeichen oder kopiere jede Palette, die du behalten willst.
Warum basieren die Aufhellungen auf der HSL-Helligkeit?
Farbton und Sättigung konstant zu halten und nur die HSL-Helligkeit zu durchlaufen, erzeugt eine Tonleiter, die optisch konsistent wirkt — die Art Rampe, die du für eine UI-Palette von Hand bauen würdest. Die fünf Beispiele bei 10 %, 30 %, 50 %, 70 % und 90 % geben dir eine schnelle Spanne von einer tiefen Schattierung bis zu einer fast weißen Aufhellung derselben Farbfamilie.
Farbenblindheits-Simulator Bildgröße ändern Skyrim-Rassen-Namensgenerator Perioden-Vorhersage Instagram-Grid-Splitter Hochzeits-Hashtag-Generator