# Farbkonverter

Rechne eine Farbe zwischen HEX, RGB, HSL, HWB und OKLCH um, prüfe den WCAG-Kontrast zu einem Hintergrund oder erzeuge daraus eine Material-3-Tonpalette.

https://codeknife.dev/de/farbkonverter/

## Was es tut

Rechnet eine Farbe zwischen HEX, RGB, HSL, HWB und OKLCH um, prüft das WCAG-Kontrastverhältnis zu einem Hintergrund und erzeugt daraus eine Material-3-Tonpalette. Alles läuft in deinem Browser.

## So benutzt du es

1. Gib eine Farbe als Hex (`#36c`, `#3366cc`) oder als `rgb()`, `hsl()`, `hwb()` oder `oklch()` ein.
2. Wähle **Umrechnen**, **Kontrast** oder **Palette**. Bei Kontrast erscheint ein Feld für die Hintergrundfarbe.
3. Kopiere oder lade das Ergebnis herunter oder sende es an ein anderes Tool.

## Beispiele

`#3366cc` ist `rgb(51 102 204)`, `hsl(220 60% 50%)`, `hwb(220 20% 20%)` und `oklch(0.5325 0.1679 262.29)`. Auf Weiß hat die Farbe einen Kontrast von 5,36:1: genug für AA bei normalem Text, nicht für AAA.

## Gut zu wissen

- Das Verhältnis folgt WCAG 2: relative Luminanz aus linearem sRGB, dann (heller + 0,05) / (dunkler + 0,05). Es wird auf zwei Dezimalstellen abgeschnitten, nie zu einem Bestanden aufgerundet.
- AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text; AAA verlangt 7:1 und 4,5:1.
- Werte werden zuerst auf ganze 8-Bit-Kanäle gerundet, damit jede Zeile dieselbe Hex-Farbe beschreibt. Eine OKLCH-Farbe außerhalb von sRGB wird auf die nächste darstellbare Farbe begrenzt.
- Die Palette behält Farbton und Buntheit der Ausgangsfarbe und listet die Töne 0, 10, 20 … 90, 95, 99 und 100, wie Material 3.
- Farbnamen und Alphakanäle werden nicht unterstützt.

## Welche Farbnotationen liest das Tool?

Hex (#36c oder #3366cc) und die CSS-Funktionen rgb(), hsl(), hwb() und oklch(), mit Leerzeichen oder Kommas zwischen den Werten. Farbnamen und Transparenz werden nicht unterstützt. Das Ergebnis zeigt dieselbe Farbe in jeder Notation, auf ganze sRGB-Kanäle gerundet.

## Häufige Fragen

### Welches Kontrastverhältnis verlangt WCAG?

AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente. AAA verlangt 7:1 und 4,5:1. Das Verhältnis wird abgeschnitten, nie aufgerundet, sodass 4,49 nicht als bestanden gilt.

### Was ist OKLCH und warum nutzt man es?

OKLCH beschreibt eine Farbe über Helligkeit, Buntheit und Farbton in einem Raum, in dem gleiche Schritte gleich verschieden aussehen. Das eignet sich für Farbskalen und dafür, die Helligkeit zu ändern, ohne dass der Farbton wandert.

### Was macht der Palettenmodus?

Er erzeugt eine Material-3-Tonpalette: Farbton und Buntheit der Ausgangsfarbe in 13 Tönen von 0 (Schwarz) bis 100 (Weiß). Die Farbbibliothek dahinter wird erst geladen, wenn du diesen Modus wählst.