Farbkonverter & Kontrastprüfer

Jedes Farbformat, auch .NET, dazu WCAG-Kontrast mit Korrekturvorschlägen und eine OKLCH-Palette.

Läuft lokal · keine Uploads

Formats
Contrast (WCAG 2.x)

–

Normal text (16px). The quick brown fox jumps over the lazy dog.

Large text (24px)

Large bold text (18.66px / 14pt bold)

Button outline Icon & UI (3:1)
Suggest for
Tints & shades (OKLCH)click a swatch to copy

Was es kann

Fügen Sie eine Farbe in einem beliebigen Format ein und erhalten Sie alle anderen, jeweils mit Kopierschaltfläche: HEX, RGB, HSL, HWB, OKLCH, OKLab, CIE Lab/LCH (D50) und color(display-p3 …). Das Tool liest und schreibt auch, was .NET-Code verwendet: Color.FromArgb(…) (int, ARGB oder Alpha + benannte Farbe), Color.FromRgb, Colors.Red, den Text Color [A=…, R=…] aus ToString(), 0xAARRGGBB, vorzeichenbehaftete ToArgb()-Ganzzahlen und XAML-#AARRGGBB. Mit dem Schalter 8-stelliges Hex legen Sie fest, ob #xxxxxxxx die CSS- oder die .NET-Reihenfolge bedeutet.

Lab, LCH und OKLCH können Farben beschreiben, die sRGB nicht darstellen kann. Solche Farben werden markiert, und die Hex-/RGB-Werte werden nach dem Verfahren aus CSS Color 4 (Reduktion der OKLCH-Chroma) in den Farbraum abgebildet statt abgeschnitten. Die Berechnung folgt CSS Color 4: sRGB-Übertragungskurve, Weißpunkt D65, Bradford-Anpassung an D50 für Lab und das OKLab von Björn Ottosson.

Kontrast

Die eingegebene Farbe gilt als Text, die zweite Farbe als Hintergrund. Sie erhalten das WCAG-2.x-Kontrastverhältnis mit Bestanden/Nicht bestanden für AA und AAA (normaler und großer Text) sowie für UI-Komponenten (3:1). Das Verhältnis wird abgerundet, sodass ein als 4.5:1 angezeigtes Paar wirklich besteht. Der APCA-Lc-Wert wird nur zur Information angezeigt, da er nicht Teil von WCAG 2.x ist. Halbtransparente Farben werden so verrechnet, wie ein Browser sie zeichnen würde.

Besteht ein Paar nicht, schlägt das Tool die nächstgelegenen bestehenden Text- und Hintergrundfarben vor, indem es nur die OKLCH-Helligkeit ändert, sodass Farbton und Chroma gleich bleiben. Klicken Sie auf Übernehmen, um einen Vorschlag zu verwenden.

Palette

Die Abstufung von 50 bis 950 wird in OKLCH erzeugt, und Ihre Farbe erscheint unverändert auf der nächstgelegenen Stufe. Kopieren Sie sie als CSS Custom Properties, als colors-Block für Tailwind v3 oder als @theme-Block für Tailwind v4.

Datenschutz

Alles läuft in Ihrem Browser. Die Eingaben werden nur im lokalen Speicher Ihres Browsers abgelegt.