Color Converter & Palette
Konvertieren Sie sofort HEX, RGB, HSL, HSV, CMYK.
Inklusive Paletten-Generator und Kontrastprüfung.
Farbwähler
Farbcodes
/* CSS Variables */ --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-hsl: 217, 90%, 60%;
Farbpalette
Kontrastverhältnis
Weißer Text Aa
Ratio: -
Schwarzer Text Aa
Ratio: -
Gespeicherte Farben
Farben mit ⭐ speichern (Max 20)
Das könnte dir auch gefallen
Über den Konverter
Der Farbcode-Konverter & Paletten-Generator ist ein kostenloses Online-Tool, das sofort zwischen fünf Hauptfarbformaten konvertiert: HEX, RGB, HSL, HSV und CMYK. Es verfügt über einen intuitiven Farbwähler und generiert automatisch Farbpaletten wie komplementäre und analoge Farben basierend auf Ihrer Auswahl.
Es enthält auch einen integrierten WCAG-Kontrastverhältnis-Prüfer, einen wesentlichen Standard für Web-Zugänglichkeit, mit dem Sie sofort feststellen können, ob weißer oder schwarzer Text für die gewählte Hintergrundfarbe geeignet ist. Generierte Codes können mit einem einzigen Klick kopiert und auch als CSS-Variablen exportiert werden, was die Entwicklungseffizienz für Webdesigner und Frontend-Entwickler deutlich verbessert.
Anleitung
Farbe auswählen oder eingeben
Klicken Sie auf den Verlaufbereich des Farbwählers, um eine Farbe auszuwählen, oder passen Sie die Regler für Farbton und Alpha an. Alternativ können Sie direkt einen Farbcode in die Felder HEX oder RGB eingeben.
Konvertierungscodes kopieren
Wenn Sie die Farbe ändern, werden alle Farbformate (HEX, RGB, HSL, HSV, CMYK) in Echtzeit aktualisiert. Klicken Sie auf die Schaltfläche "Kopieren" neben jedem Element, um es in Ihre Zwischenablage zu speichern. Sie können auch CSS-Variablen auf einmal kopieren.
Palette und Kontrast prüfen
Wechseln Sie unten auf die Registerkarte "Farbpalette", um Farbvariationen wie komplementär und monochromatisch zu sehen. Im Abschnitt "Kontrastverhältnis" wird die Lesbarkeit von weißem/schwarzem Text auf der gewählten Hintergrundfarbe automatisch ermittelt.
Farb-Glossar
- HEX (Hexadezimaler Farbcode)
- Das im Webdesign am häufigsten verwendete Format zur Farbangabe. Es wird in 6 Ziffern als "#RRGGBB" (oder 3 Ziffern "#RGB") ausgedrückt und gibt die Intensität von Rot (R), Grün (G) und Blau (B) hexadezimal (00-FF) an. Wenn Transparenz enthalten ist, wird es in 8 Ziffern als "#RRGGBBAA" geschrieben und in CSS und HTML weitgehend unterstützt.
- RGB / RGBA
- Ein additives Farbmodell basierend auf den Primärfarben des Lichts (Rot, Grün, Blau). Basierend auf dem Farberzeugungsprinzip von Displays wird jede Farbe durch einen Wert von 0 bis 255 dargestellt. In CSS wird es wie "rgb(255, 0, 0)" geschrieben, und mit "rgba" kann ein Alpha-Wert (Transparenz) von 0.0 bis 1.0 hinzugefügt werden.
- HSL
- Ein Modell, das die Farbe mit drei Attributen darstellt: Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness). Da es einfach intuitiv anzupassen ist, wie "Farbton ändern" oder "dunkler machen", eignet es sich hervorragend zum Erstellen von Designsystemen mit CSS (hsl-Funktion) und dynamischen Theme-Änderungen.
- CMYK
- Ein subtraktives Farbmodell, das vier Farben verwendet: Cyan, Magenta, Yellow und Key (Schwarz). Es ist ein Tintenformat, das hauptsächlich in der Druckindustrie verwendet wird, und die CMYK-Werte in einem Browser sind theoretische Näherungswerte, so dass Anpassungen über Profile für den tatsächlichen Druck notwendig sind.
- Kontrastverhältnis (WCAG)
- Das Verhältnis der relativen Leuchtdichte zwischen einer Hintergrundfarbe und einer Textfarbe, definiert durch die Web Accessibility Guidelines. Um sicherzustellen, dass alle Benutzer den Text lesen können, wird ein Verhältnis von "4.5:1 (AA-Level)" oder höher für normalen Text und "3:1" oder höher für großen Text empfohlen.
Häufig gestellte Fragen
- Q.Sind die CMYK-Konvertierungsergebnisse für den Druck genau?
- Die im Browser berechneten CMYK-Werte sind theoretische Näherungswerte. Die tatsächlichen gedruckten Farben können je nach ICC-Profil Ihres Druckers und den Tinteneigenschaften variieren. Für genaue CMYK-Daten für den Druck konvertieren und überprüfen Sie bitte mit Farbmanagement-Software wie Adobe Illustrator oder Photoshop.
- Q.Unterstützt das Tool die Alpha-Konvertierung (Transparenz)?
- Ja. Durch Anpassen des "Alpha"-Schiebereglers im Farbwähler oder durch direkte Eingabe des Alpha-Wertes in den Code werden HEX- (#RRGGBBAA), RGBA- und HSLA-Codes korrekt generiert. Dies ist ideal für moderne Web-UI-Implementierungen, die Transparenz erfordern.
- Q.Was ist die Funktion "CSS-Vars kopieren"?
- Diese Funktion gibt die ausgewählte Farbe als benutzerdefinierte CSS-Eigenschaften (CSS-Variablen) aus. Sie generiert Formate wie --color-primary: #3b82f6;, zusammen mit kommagetrennten Werten für RGB und HSL, was das Einrichten von Tailwind CSS-Konfigurationen oder dynamischen Themes extrem einfach macht.
- Q.Werden meine eingegebenen Farbdaten auf einem Server gespeichert?
- Nein. Dieses Tool arbeitet vollständig clientseitig (in Ihrem Browser). Keiner Ihrer Farbcodes oder generierten Paletten wird an externe Server übertragen oder dort gespeichert. Die Funktion "Favoriten" speichert Farben außerdem ausschließlich im lokalen Speicher Ihres Browsers und schützt so Ihre Privatsphäre.
Anwendungsfälle
Webdesign & Codierung
Konvertieren Sie in Designtools wie Figma oder XD angegebene HEX-Codes stapelweise in RGB- oder HSL-Formate für die Entwicklung. Optimieren Sie den modernen Theme-Aufbau mithilfe von CSS-Variablen.
Verbesserung der Zugänglichkeit
Überprüfen Sie während der Codierung sofort, ob die Kombination aus Hintergrundfarbe und Textfarbe den WCAG-Kontrastverhältnis-Standards (AA/AAA) entspricht, um eine besser lesbare Benutzeroberfläche zu erreichen.
Überprüfung des Farbschemas
Generieren Sie automatisch verwandte Paletten wie komplementäre oder analoge Farben basierend auf den Farben der Unternehmensmarke. Nützlich zur Betrachtung von Farbschemata für Präsentationen und Grafikdesign.
Konvertierungshandbuch für den Druck
Konvertieren Sie im Web verwendete Farben in CMYK-Werte, um sie als Referenz für Näherungswerte beim Einsatz von Druckmaterialien wie Flyern und Visitenkarten zu verwenden.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.