Farbkonverter

Der Konverter unterstützt HEX (3-stellig, 6-stellig und 8-stellig mit Alpha), RGB und RGBA (Komma- oder Leerzeichensyntax), HSL und HSLA, OKLCH und jede gültige benannte CSS-Farbe wie cornflowerblue, rebeccapurple oder tomato. Das Format wird während der Eingabe automatisch erkannt, sodass Sie diese Werte direkt in das Eingabefeld einfügen können, ohne zuerst einen Modus auszuwählen.

OKLCH ist ein wahrnehmungsmäßig einheitlicher polarer Farbraum, der durch Helligkeit (L), Chroma (C) und Farbton (H) definiert ist. Im Gegensatz zu HSL, bei dem Farben mit identischen Helligkeitswerten in der wahrgenommenen Helligkeit visuell sehr unterschiedlich aussehen können, verwendet OKLCH ein zugrunde liegendes Modell, das besser dazu passt, wie das menschliche Sehvermögen Farbunterschiede wahrnimmt. Dies macht es ideal für die programmgesteuerte Generierung zugänglicher Farbskalen, konsistenter Schaltflächenpaletten und Design-Tokens. CSS unterstützt ab 2023 nativ oklch() in allen modernen Browsern, und große Designsysteme haben es für diese Präzision übernommen. Sie können OKLCH-Werte direkt mit CSS Gradient Generator koppeln, um wahrnehmungsmäßig glatte Verläufe zu erzielen.

Das Kontrastverhältnis verwendet die WCAG 2.1-Formel: (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Luminanz der helleren Farbe und L2 die relative Luminanz der dunkleren Farbe ist. Die relative Leuchtdichte wird aus linearisierten sRGB-Kanalwerten berechnet, die mit 0,2126 R + 0,7152 G + 0,0722 B gewichtet sind. Das Tool vergleicht Ihre Farbe mit reinem Weiß (255, 255, 255) und nahezu Schwarz (15, 23, 42) und zeigt das Verhältnis neben dem WCAG-Grad für normalen und großen Text an.

WCAG 2.1 definiert zwei Konformitätsstufen für den Textkontrast. Stufe AA erfordert ein Seitenverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ fett). Stufe AAA erfordert 7:1 für normalen Text und 4,5:1 für großen Text. AA ist das gesetzliche Minimum in vielen Barrierefreiheitsvorschriften, einschließlich EN 301 549 und Abschnitt 508. AAA wird für Dokumente oder Schnittstellen empfohlen, bei denen es auf maximale Lesbarkeit ankommt, wie z. B. medizinische oder juristische Inhalte.

Die Palette wandelt Ihre Farbe in den HSL-Raum um und erzeugt dann fünf Tints, indem die Helligkeit in Richtung 95 % (nahe Weiß) interpoliert wird, und fünf Shades, indem sie in Richtung 5 % (nahe Schwarz) interpoliert wird. Farbton und Sättigung bleiben konstant. Das Ergebnis ist ein 11-Farbfeld-Streifen: 5 Tints, Ihre Grundfarbe (in der Palette umrandet) und 5 Shades. Durch Klicken auf ein Farbfeld wird diese Farbe sofort für weitere Konvertierung oder WCAG-Prüfung in die Eingabe geladen.

Nein. Alle Farbanalyse-, Konvertierungs- und WCAG-Berechnungen laufen vollständig mit JavaScript in Ihrem Browser. PureTools hat keinen Server-Endpunkt für dieses Tool und empfängt die eingegebenen Farben nie. Die zuletzt eingegebene Farbe wird in sessionStorage unter einem namespaced Schlüssel gespeichert, damit sie nach einer Aktualisierung erhalten bleibt. sessionStorage wird jedoch automatisch gelöscht, wenn Sie den Tab schließen, sodass Daten beim Schließen des Tabs gelöscht werden. Es wird nie etwas hochgeladen oder remote gespeichert. Ihre Daten werden nie zum Training von KI-Modellen oder zur Verbesserung von maschinellen Lernsystemen verwendet.

Ja. Figma kopiert Farben normalerweise als HEX, HSL oder RGB. Browser DevTools kopieren Farben als Hex, rgb() oder hsl(). Alle diese Formate werden direkt akzeptiert. Wenn Sie einen oklch()-Wert aus einer CSS-Datei oder einer Design-Token-JSON kopieren, wird auch das unterstützt. Das Tool erkennt das Format automatisch aus dem eingefügten String, sodass Sie vor dem Einfügen nichts auswählen müssen. Sie können auch den JSON Formatter verwenden, um Farbwerte aus Design-Token-JSON-Dateien zu extrahieren, bevor Sie sie hier einfügen.

Sowohl HSL (Farbton, Sättigung, Helligkeit) als auch HSV (Farbton, Sättigung, Wert) stellen Farben mithilfe eines Farbtonwinkels und zweier relativer Achsen dar, definieren die dritte Achse jedoch unterschiedlich. Bei HSL ergibt eine Helligkeit von 50 % bei maximaler Sättigung den reinen Farbton. Bei HSV ergibt ein Wert von 100 % mit maximaler Sättigung ebenfalls den reinen Farbton, der Wert liegt jedoch konzeptionell näher an der wahrgenommenen Helligkeit. HSL lässt sich intuitiver darauf abstimmen, wie Designer über Farbtöne und Schattierungen denken, während HSV häufig in Farbauswahlrädern und Bildbearbeitungsanwendungen verwendet wird.

sRGB und OKLCH decken ähnliche, aber nicht identische Farbumfänge ab. Wenn Sie sRGB in OKLCH konvertieren, sind die Werte mathematisch exakt. Bei der Rückkonvertierung können Gleitkommarundungen in den Zwischenmatrixmultiplikationen und im Kubikwurzelschritt Kanalwerte erzeugen, die im Ganzzahlbereich von 0-255 um 0 oder 1 abweichen, ein visuell nicht wahrnehmbarer Unterschied. Wenn Ihre Eingabe einen sehr hohen Chroma-OKLCH-Wert nutzt, der außerhalb des sRGB-Gamuts liegt, begrenzt das Tool den Ausgabekanal auf den nächsten gültigen sRGB-Wert, statt ungültiges CSS zu erzeugen.

Der native Browser-Farbwähler (input type="color") speichert seinen Wert immer als Hex. Wenn Sie im Textfeld eine gültige Farbe in einem beliebigen Format eingeben, konvertiert das Tool sie zu Hex und aktualisiert den Wert des Pickers programmatisch. Umgekehrt schreibt die Auswahl einer Farbe aus dem Farbfeld den Hex-Wert in das Textfeld. Diese bidirektionale Synchronisierung bedeutet, dass Sie den visuellen Picker zur Erkundung und das Textfeld für Präzision nutzen können, und beide immer dieselbe Farbe anzeigen.

Ja, innerhalb derselben Browsersitzung. Das Tool speichert die letzte gültige Eingabe in sessionStorage, damit sie nach einer Aktualisierung erhalten bleibt. Wenn Sie den Tab schließen, wird sessionStorage automatisch vom Browser gelöscht, sodass die Farbe entfernt wird und Ihre Daten nur auf Ihrem Gerät bleiben. Das Tool verwendet localStorage nicht für Farbdaten; dort wird nur die Theme-Voreinstellung gespeichert.