Farben konvertieren
Kostenloser Online-Farb-Konverter, der HEX (3, 4, 6, 8 Stellen), rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), die neue CSS Color 4 Syntax (Leerzeichen-getrennt), alle 147 CSS benannten Farben und alle davon mit Alpha erkennt. Gibt jedes Format auf einmal aus, einzeln kopierbar. Eine eingebaute Palette generiert Schatten (dunklere Stufen), Tönungen (hellere Stufen), Komplementär-, Analog-, Triadische- und Tetradische Harmonien. Ein WCAG-Kontrast-Checker zeigt, ob die Farbe AA / AAA gegen Weiß und Schwarz für normalen und großen Text erfüllt. OS-Pipette einblenden (Chrome / Edge) um beliebige Farbe vom Bildschirm zu wählen.
Verwendung
Beliebiges Format: HEX, RGB, HSL, OKLCH, sogar CSS-Namen wie tomato.
Alle elf erscheinen auf einmal, ein Klick zum Kopieren.
Schatten, Tönungen und Harmonien abgeleitet von Ihrer Farbe.
WCAG-Kontrast gegen Weiß und Schwarz mit AA/AAA-Urteil.
Zwischen 11 Farbformaten konvertieren, Paletten erstellen, WCAG-Kontrast prüfen — alles an einem Ort
Alle Formate
Kontrast (WCAG)
Palette
Zuletzt
Funktionen
Typische Anwendungen
- OKLCH einer Brand-HEX-Farbe für ein CSS Color 4 Design-System nachschlagen.
- RGB-Pixelwerte aus einem Screenshot in HSL für eine Diagrammachse konvertieren.
- Komplementärfarbe für einen Button-Hover-Zustand finden.
- Prüfen, ob Body-Text WCAG AA gegen einen gewählten Hintergrund erfüllt.
- Farbe aus einem anderen Tab oder Fenster über die System-Pipette wählen.
Warum dieser
Viele Konverter machen nur HEX↔RGB↔HSL. Wir inkludieren OKLab und OKLCH — die neuen CSS Color 4 Räume, die der menschlichen Wahrnehmung weit besser entsprechen als HSL (keine Überraschungssprünge in der Helligkeit beim Hue-Wechsel). Die Palettengenerierung läuft in OKLab, sodass Schritte wahrnehmungsmäßig gleich aussehen, nicht mathematisch gleich. Kontrast wird im WCAG 2 Luminanz-Raum mit den 4.5:1 und 3:1 Schwellen ausbuchstabiert.
Häufige Fragen
Was ist OKLCH?
Ein wahrnehmungsmäßig uniformer Farbraum, eingeführt als Teil von CSS Color 4. Anders als HSL — wo Helligkeit 50% bei verschiedenen Hues sehr unterschiedlich aussehen kann — ist OKLCH-Helligkeit konsistent über das Spektrum, was Design-Tokens vorhersagbar macht. Wenn Sie ein modernes Design-System bauen, lohnt sich OKLCH zu lernen.
Enthält meine Farbe Alpha?
Ja — jedes von acht-stelligem HEX, rgba(), hsla() oder Alpha-Suffix-Leerzeichen-Syntax (rgb(255 0 0 / 50%)) wird geparst und in jedem Ausgabeformat reflektiert, das Alpha unterstützt.
Warum sieht meine Schattenpalette "gestuft" statt glatt aus?
Schatten und Tönungen werden in OKLab interpoliert und dann in Ihren Zielraum projiziert, sodass jeder Schritt wahrnehmungsmäßig gleich ist — das produziert oft visuell glattere Ergebnisse als eine naive HSL-Helligkeitsänderung, aber sehr dunkle oder sehr helle Startfarben clippen nahe den Endpunkten.
CMYK — druckgenau?
Nein — die CMYK-Ausgabe ist eine schnelle Screen-Space-Konvertierung, nicht ICC-Profil-aware. Für Druck nehmen Sie das CMYK das Sie hier sehen als Startpunkt und verifizieren in Adobe / Affinity Tooling gegen das tatsächliche Druckprofil.
Pipette funktioniert nicht — warum?
Die EyeDropper API ist momentan nur in Chromium-basierten Browsern (Chrome, Edge, Brave) verfügbar. Firefox und Safari verstecken den Button mit einem Tooltip wenn nicht unterstützt.
Sind HEX-Namen case-sensitiv?
Nein, HEX ist hex (0-9, a-f oder A-F). Wir emittieren Kleinbuchstaben standardmäßig um der CSS Color 4 Empfehlung zu entsprechen; die Ausgabe ist trotzdem gültig egal wie Sie sie wieder einfügen.
Mobil?
Ja. Die Pipette ist auf mobilen Browsern nicht verfügbar — verwenden Sie stattdessen den nativen Farbwähler.
Machen wir — und zwar kostenlos! Schreiben Sie uns kurz Ihre Idee. Wenn Sie sie im Detail besprechen möchten, hinterlassen Sie eine E-Mail-Adresse, wir melden uns. Anonym geht auch.
