Farbkonverter Hub

1. 1

   Konverter wählen

   Öffnen Sie das passende Tool (z. B. RGB zu HEX).

2. 2

   Werte eingeben

   Tippen Sie Zahlen oder nutzen Sie die Pipette.

3. 3

   Ergebnis erhalten

   Vorschau und Werte aktualisieren sich sofort; kopieren Sie, was Sie brauchen.

Zwölf Formate beschreiben dieselbe Farbe auf unterschiedliche Weise, und jedes existiert, weil es eine Frage beantwortet, die die anderen schlecht beantworten. Wofür jedes gedacht ist:

Formate vereinheitlichen, Konsistenz zwischen Web und Druck sichern und Farben zwischen Programmen ohne manuelle Fehler übertragen.

Vorteile

• Kompatibilität: Format an jede Plattform anpassen
• Konsistenz: gleiche Nuance auf verschiedenen Medien
• Design-Workflow: weniger Reibung zwischen Tools
• Mehrere Formate: RGB, HEX, HSL, CMYK
• Live: Ergebnis sieht man beim Ändern der Werte

Deckt gängige Formate für Web, Grafikdesign und Druck ab.

• RGB zu HEXRGB in Hexadezimal umwandeln
• HEX zu RGBHex-Codes in RGB-Werte
• RGB zu HSLRGB in HSL umwandeln
• HSL zu RGBHSL in RGB umwandeln
• RGB zu CMYKRGB für Druck in CMYK
• FarbpipetteInteraktiver Selektor mit Live-Konvertierung

Wenn Sie bisher nur HEX und HSL verwendet haben, ist OKLCH das eine Format auf dieser Seite, das zu lernen sich lohnt. Es löst ein Problem, auf das jedes Designsystem stößt und das die meisten von Hand umgehen.

• Aufhellen erhält den Farbton — erhöhen Sie die Helligkeit eines Blaus in HSL, wandert es Richtung Violett; in OKLCH bleibt es blau. Genau dafür gibt es einen wahrnehmungsgleichmäßigen Raum.
• Gleiche Schritte wirken gleich — eine Palette, die die OKLCH-Helligkeit in gleichmäßigen Schritten variiert, liest sich als gleichmäßige Abstufung. Dieselben Schritte in HSL ergeben eine Abstufung, die an einem Ende gedrängt ist.
• Eine Zahl für die Sättigung — Chroma ist ein einzelner Wert, der bei jedem Farbton dasselbe bedeutet – „dieselbe Intensität in einer anderen Farbe“ wird zur Änderung einer Zahl statt zur Schätzung.
• Es erreicht Farben außerhalb von sRGB — OKLCH kann Farben jenseits eines Standardbildschirms beschreiben. Dieses Werkzeug sagt Ihnen, wenn das passiert, und liefert die nächstgelegene tatsächlich darstellbare Farbe.

Fügen Sie oben einen beliebigen HEX-Code ein und lesen Sie die OKLCH-Zeile, um zu sehen, wo Ihre vorhandenen Farben liegen. Um eine ganze Palette auf einmal zu übertragen, nutzen Sie den weiter unten beschriebenen Modus für ganze Dateien.

Eine Farbe umzuwandeln ist die leichte Hälfte. Ein bestehendes Projekt von HEX auf OKLCH zu bringen oder alle Farben einer Designdatei zur Prüfung herauszuziehen heißt, Hunderte Werte anzufassen – und genau dort hören alle anderen Farbkonverter auf.

• Es schreibt um, es erzeugt nicht neu — die Datei, die Sie zurückbekommen, ist die, die Sie gegeben haben, nur mit geänderten Farbwerten. Kommentare, Abstände, Minifizierung, Zeilenenden und alles, was der Scanner nicht erkannt hat, gehen Byte für Byte durch.
• Es liest sieben Dateitypen — CSS, SCSS, SASS, LESS, JSON, SVG und reinen Text. In SVG und JSON stehen alle Farben in Anführungszeichen – auch die werden gefunden.
• Farbnamen sind optional — tan, plum, salmon und red sind gewöhnliche englische Wörter. Sie zu erkennen ist ein Schalter, den Sie umlegen, denn eingeschaltet würde er in einer Textdatei den Fließtext umschreiben.
• Es weiß, was keine Farbe ist — #ff00001 hat zu viele Stellen, tangerine ist nicht tan, und --tan-100 ist ein Variablenname. Nichts davon wird angerührt.

Der kostenlose Tarif wandelt 200 Farben auf einmal um, was die Kernpalette eines Designsystems abdeckt. Pro hebt die Grenze auf, nimmt bis zu 25 Dateien und gibt sie als ein Archiv zurück.

Eine Farbe ist nur brauchbar, wenn der Text darauf lesbar ist. Das Kontrastfeld misst Ihre Farbe gegen Weiß, gegen Schwarz und gegen jede zweite Farbe und prüft jedes Ergebnis gegen die WCAG-Schwellen.

• 4,5:1 ist die AA-Anforderung für normalen Fließtext und der Maßstab, an dem die meisten Prüfungen gemessen werden.
• 3:1 genügt für großen Text – ab 18,66 px fett oder 24 px normal – sowie für Bedienelemente und Grafiken.
• 7:1 ist AAA für normalen Text: eine echte Verbesserung der Lesbarkeit und keine Formsache, besonders bei längeren Texten.
• Kontrast hängt allein von der Helligkeit ab; den Farbton einer durchgefallenen Farbe zu ändern rettet sie nicht. Deshalb verschiebt der Korrekturvorschlag die Helligkeit und behält den gewählten Farbton.

Fällt ein Paar durch, sucht das Werkzeug nach oben und nach unten die kleinste Änderung, die besteht, und zeigt Ihnen das Ergebnis, statt Sie raten zu lassen.

Etwa einer von zwölf Männern und eine von zweihundert Frauen hat eine Form von Farbsehschwäche. Der Simulationsstreifen zeigt Ihre Farbe so, wie sie mit jeder der häufigen Formen erscheint – damit Sie prüfen können, ob zwei Farben einer Palette unterscheidbar bleiben, statt ineinander zu fallen.

• Protanopie und Deuteranopie — die Rot-Grün-Formen und mit Abstand die häufigsten. Rottöne werden dunkler, Grün und Rot nähern sich an – deshalb ist eine rot/grüne Erfolgs-Fehler-Anzeige der klassische Barrierefreiheitsfehler.
• Tritanopie — selten, betrifft die Blau-Gelb-Achse. Blau und Grün nähern sich an, und Gelbtöne können rosa erscheinen.
• Kein Farbsehen — noch seltener und ein nützlicher Extremfall: funktioniert ein Entwurf in der Graustufenreihe, funktioniert er für alle.

Die Simulation modelliert das vollständige Fehlen eines Zapfentyps. Teilweise Schwächen sind häufiger und liegen zwischen der simulierten und der typischen Sicht – behandeln Sie ein Paar, das die Simulation gerade eben übersteht, deshalb als änderungswürdig.

Wir helfen Ihnen, schnell zwischen Formaten zu wechseln. Alles wird auf dem Gerät verarbeitet, damit Ihre Daten privat bleiben.

Verfügbare Tools:

• RGB zu HEX: RGB-Werte als Hexadezimal
• HEX zu RGB: Hex-Codes als RGB-Kanäle
• RGB zu HSL: RGB als Farbton, Sättigung, Helligkeit
• HSL zu RGB: HSL als RGB für Displays
• RGB zu CMYK: Vorbereitung fürs Drucken
• Pipette: Farbe wählen und alle Formate sehen

Wählen Sie die passende Karte und legen Sie sofort los.

Beim Tool-Wechsel, für CSS-Vorbereitung, Markenabgleich Web/Print oder Palettendokumentation.

Typische Anwendungen

• Webentwicklung: CSS und HTML
• Design: zwischen Programmen wechseln
• Druck: RGB an CMYK-Spezifikationen annähern
• Farbmatching: mit Referenzen abgleichen
• Design-Systeme: konsistente Tokens und Skalen
• Eine Palette modernisieren: Ein bestehendes Stylesheet in einem Durchgang von HEX auf OKLCH bringen

Kurzer Überblick über Farbmodelle.

Kernpunkte

• RGB ist additiv (Displays)
• CMYK ist subtraktiv (Tinte)
• HEX komprimiert dieselben Infos wie RGB
• HSL erleichtert Ton- und Sättigungsänderungen
• Mathematische Umrechnungen sind im gleichen Raum verlustfrei
• CSS definiert 148 Farbschlüsselwörter, beide Schreibweisen gray und grey mitgezählt
• Ein normaler sRGB-Bildschirm zeigt rund 16,7 Millionen Farben; LAB und OKLAB beschreiben weit mehr

Für zuverlässige Ergebnisse.

Qualität

• Mit Markenrichtlinien abgleichen
• Auf dem Display testen und bei Bedarf mit Druckproof
• Gamut-Unterschiede RGB ↔ CMYK beachten
• Format nach dem Zielmedium wählen
• Kritische Farben doppelt prüfen
• Bauen Sie Paletten in OKLCH, damit Helligkeitsschritte gleichmäßig wirken, und wandeln Sie danach in HEX um, falls ältere Unterstützung nötig ist

Wann nicht unnötig konvertieren

• Wenn das Ziel Ihr Ausgangsformat schon akzeptiert
• Wenn eine Farbe außerhalb der Ausgabe-Gamut liegt, ohne Proof
• Wenn physische Verlässlichkeit nötig ist und nur der Monitor zählt
• Wenn die Plattform das Zielformat nicht unterstützt
• Wandeln Sie keinen Farbnamen im Fließtext um – lassen Sie die Schlüsselworterkennung bei reinen Textdateien ausgeschaltet

Erfordern einen modernen Browser mit JavaScript; der Druck hängt von Papier und Profil ab.

Basiert auf optimierten Bildverarbeitungs-Algorithmen.

• RGB zu HEX
• HEX zu RGB
• RGB zu HSL
• HSL zu RGB
• RGB zu CMYK
• Farbwähler
• Palette aus einem Bild
• Bildfarben-Analyse
• Farbkorrektur
• Zeit & Datum
• Text-Splitter
• JSON-Formatierer
• Bildkonverter
• Base64-Encoder