Farbkonverter
Konvertieren und visualisieren Sie Farben sofort.
Erweiterte Optionen
Unser kostenloser Farbkonverter hilft Ihnen.
Sparen Sie Zeit und reduzieren Sie Fehler.
Erweiterte Funktionen
- Stapelkonvertierung
- CSS-Verlaufsgenerierung
- Unterstützung für Deckkraft
- Kontrastprüfung
- Vorschläge zur Farbharmonie
Warum Farbkonvertierung wichtig ist
Genauigkeit bei Farben sorgt für zugängliche Designs.
FAQ — Farbkonverter
Frequently Asked Questions
So verwenden Sie den Farbkonverter
-
Geben Sie Ihren Farbwert ein
Geben Sie einen beliebigen Farbwert ein oder fügen Sie ihn ein - HEX (#3b82f6), RGB (59, 130, 246), HSL (217, 91%, 60%) oder CMYK. Das Werkzeug erkennt das Format automatisch. -
Alle Umsetzungen sofort sehen
Alle entsprechenden Formate werden in Echtzeit aktualisiert: HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK und benutzerdefinierte CSS-Eigenschaften. Kopieren Sie jeden Wert mit einem einzigen Klick. -
Verwenden Sie den Farbwähler
Klicken Sie auf das Farbfeld oder verwenden Sie die Farbauswahl des Browsers, um eine Farbe visuell auszuwählen und alle entsprechenden Formate auf einmal zu erhalten. -
Kopieren und in Ihrem Projekt verwenden
Klicken Sie auf die Kopierschaltfläche eines beliebigen Formats, um es in die Zwischenablage zu übertragen. Fügen Sie sie direkt in CSS, Sass, Tailwind config, Figma oder Druck-Workflows ein.
Beispielhafte Umrechnungen
Die gleiche blaue Farbe in jedem unterstützten Format:
| Format | Wert | Benutzung |
|---|---|---|
| HEX | #3b82f6 | CSS, HTML, Figma |
| RGB | rgb(59, 130, 246) | CSS, Canvas API |
| RGBA | rgba(59, 130, 246, 1) | CSS mit Deckkraft |
| HSL | hsl(217, 91%, 60%) | CSS, Design-Token |
| CMYK | C:76 M:47 Y:0 K:4 | Druck / Offset |
| HSV | 217°, 76%, 96% | Bildbearbeiter |
Häufige Anwendungsfälle
Web- und UI-Design
Konvertieren Sie Marken-HEX-Farben in HSL für benutzerdefinierte CSS-Eigenschaften und die Tailwind-Konfiguration, um ein konsistentes Theming in hellen und dunklen Modi zu gewährleisten.
Druck & Druckvorstufe
Konvertieren Sie Bildschirm-RGB- oder HEX-Farben für die Druckproduktion in CMYK - und vermeiden Sie so den häufigen Fallstrick von Farben, die auf dem Bildschirm großartig aussehen, aber im Druck langweilig sind.
Markenrichtlinien
Dokumentieren Sie eine vollständige Markenpalette in allen Formaten - HEX für Digitaldruck, CMYK für Druck, Pantone-Referenz - aus einer einzigen Quelle der Wahrheit. Farbenblindheit simulieren und WCAG-Kontrast prüfen
Zugänglichkeits-Checks
Rufen Sie exakte Farbwerte ab, um sie in einem Kontrastprüfprogramm zu testen und sicherzustellen, dass Text- und Hintergrundkombinationen die WCAG AA- oder AAA-Anforderungen erfüllen. JSON-, CSV- und XML-Daten konvertieren
Workflows für Entwickler
Schnelle Übersetzung von Design-Tool-Farben (Figma HEX) in CSS HSL-Variablen für dynamisches Theming und programmatische Farbmanipulation.
Wie es funktioniert
Alle Konvertierungen laufen sofort in Ihrem Browser ab, ohne dass ein Server beteiligt ist.
Das Tool parst Ihre Eingaben in normalisierte RGB-Werte (0-255 pro Kanal) und wendet dann Standardkonvertierungsformeln auf jedes Zielformat an.
HSL (Farbton, Sättigung, Helligkeit) wird von RGB abgeleitet, indem der Min-/Max-Kanal ermittelt, die Helligkeit als deren Durchschnitt berechnet und dann die Sättigung und der Farbtonwinkel berechnet werden.
CMYK wird aus RGB nach folgender Formel berechnet: K = 1 - max(R,G,B); C = (1-R-K)/(1-K); usw. Beachten Sie, dass RGB→CMYK geräteabhängig ist - Bildschirm-CMYK ist ein Näherungswert, kein Druckprofil.
Für wen ist dieses Tool gedacht?
Frontend-Entwickler
Übersetzen Sie Design-Token zwischen CSS-Formaten und überprüfen Sie Farbwerte während der Entwicklung.
UI/UX-Designer
Konvertieren Sie Figma- oder Sketch-Farbfelder in ein beliebiges Format, das von Ihrem Designsystem oder CSS-Framework benötigt wird.
Druckdesigner
Konvertieren Sie RGB-Markenfarben in CMYK, bevor Sie die Druckvorlage an die Druckerei senden, und vermeiden Sie so Überraschungen bei Farbverschiebungen.
Marken-Manager
Behalten Sie eine einheitliche Markenpalette in allen Formaten - digital und gedruckt - bei, ohne die Werkzeuge zu wechseln.
Barrierefreiheits-Tester
Extrahieren Sie präzise Farbwerte für die Verwendung in Kontrastprüfgeräten und Zugänglichkeitsprüfungen.
Tipps für die Arbeit mit Farben
- Verwenden Sie HSL in benutzerdefinierten CSS-Eigenschaften (--color-primary: hsl(217, 91%, 60%)), damit Sie die Helligkeit mit calc() für Hover- und deaktivierte Zustände anpassen können.
- Fordern Sie immer einen Andruck an, wenn Sie CMYK-Konvertierungen von RGB verwenden - für die Farbanpassung vom Bildschirm zum Druck ist ein Gerätefarbprofil erforderlich.
- Verwenden Sie den Farbwähler des Browsers, um Farben direkt von Screenshots oder Design-Assets abzurufen - Sie müssen die Werte nicht manuell kopieren.
- Testen Sie nach der Konvertierung Ihre Farben in einem Kontrastprüfprogramm, um sicherzustellen, dass Ihre Palette die WCAG AA (4,5:1) für Fließtext erfüllt.
- Speichern Sie Ihre Markenpalette in allen Formaten (HEX, RGB, CMYK) in der Dokumentation Ihres Designsystems, um wiederholte Konvertierungen zu vermeiden.
Warum eine genaue Farbkonvertierung wichtig ist
- Inkonsistente Farbwerte zwischen Design- und Entwicklungsteams sind eine der Hauptursachen für visuelle Inkonsistenz bei ausgelieferten Produkten.
- RGB und CMYK haben unterschiedliche Farbräume - Farben, die auf dem Bildschirm lebendig wirken, können im Druck ohne eine korrekte Konvertierung matschig erscheinen.
- CSS HSL macht dynamisches Theming (heller/dunkler Modus, Farbtöne) viel einfacher als HEX - erfordert aber eine genaue HEX-zu-HSL-Konvertierung, um zu beginnen.
- Für die Prüfung der Markeneinhaltung sind Farben in verschiedenen Formaten erforderlich - ein einziger Konverter vermeidet manuelle Fehler und erspart stundenlanges Hin und Her.
Leistung und Datenschutz
Jede Farbumwandlung wird vollständig in Ihrem Browser mit Vanilla JavaScript ausgeführt. Es werden keine Farbwerte, Paletten- oder Nutzungsdaten an einen Server gesendet. Das Tool reagiert in weniger als 10 ms pro Umwandlung, funktioniert nach dem ersten Besuch offline und erfordert kein Konto oder eine Registrierung.
Bildungshinweis: Farbräume erklärt
RGB (additiv)
RGB mischt rotes, grünes und blaues Licht. Alle Kanäle bei 255 = weiß; alle bei 0 = schwarz. Wird von Bildschirmen, Kameras und Webbrowsern verwendet.
HEX (Web-Abkürzung)
HEX ist RGB kodiert als Base-16. #3b82f6 = R:59, G:130, B:246. Es ist identisch mit RGB - nur eine kompaktere Notation für CSS und HTML.
HSL (Wahrnehmungen)
HSL trennt Farbton (Farbradwinkel 0-360°), Sättigung (Intensität) und Helligkeit (Helligkeit). Für Designer ist dies einfacher zu verstehen als RGB.
CMYK (subtraktiv)
CMYK ist eine Mischung aus den Farben Cyan, Magenta, Gelb und Key (Schwarz). Sie wird von weißem Papier abgezogen. Bildschirm-RGB hat eine größere Farbskala - einige helle RGB-Farben können in CMYK nicht reproduziert werden.
Fehlersuche
Wussten Sie schon?
Die HEX-Farbnotation wurde 1996 mit der Spezifikation HTML 3.2 in HTML eingeführt. Davor erkannten die Browser nur 16 benannte Farben (wie "rot" und "blau"). Mit CSS1 wurde die gesamte Web-Farbpalette auf 140 benannte Farben erweitert, aber HEX blieb das vorherrschende Format - und ist es noch immer, mehr als 25 Jahre später.
Der einzige Farbkonverter, den Sie brauchen
Ganz gleich, ob Sie als Entwickler Figma-Token in CSS übersetzen, als Designer eine Brücke zwischen Bildschirm und Druck schlagen oder als Tester für Barrierefreiheit das Kontrastverhältnis überprüfen - dieses kostenlose Tool konvertiert sofort zwischen allen wichtigen Farbformaten, ohne Serveraufrufe und ohne dass Daten gespeichert werden. Geben Sie Ihre Farbe ein, kopieren Sie das benötigte Format, und machen Sie sich wieder an die Arbeit.