🧰 ToolPicoAlle Tools →
🎨 Design & Dev

Farbkonverter

Wandle sofort zwischen HEX, RGB, HSL, HSV/HSB und CMYK um. Wähle eine Farbe oder gib einen Code ein — alle Formate bleiben synchron. Dazu ein WCAG-2.1-Kontrastprüfer und ein Komplementär-/Analog-/Triaden-Palettengenerator — alles kostenlos in deinem Browser.

HEX · RGB · HSL · HSV · CMYK Alpha unterstützt WCAG 2.1 AA / AAA Stand: 22. Juli 2026
Ausgewählte Farbe
#7C3AED
—
HEX
Du kannst #RRGGBB, die kurze #RGB-Form oder mit Alpha #RRGGBBAA eingeben.
RGB
HSL
HSV / HSB
Alpha (Deckkraft)
100%
Alle Formate — zum Kopieren klicken
Moderne Farbräume — OKLCH · LAB · LCH
Entwickler-Code-Ausgabe — zum Kopieren klicken
Schnellfarben
Kurzantwort Um einen HEX-Code (z. B. #7C3AED) in RGB umzuwandeln, rechnest du jeden Zweierblock von Basis 16 in Basis 10 um: 7C=124, 3A=58, ED=237, also rgb(124, 58, 237). Dieselbe Farbe ist in HSL hsl(262, 83%, 58%). Wähle oben eine Farbe, und alle Formate, das Kontrastverhältnis und eine Palette werden automatisch erzeugt.
HEX
RGB
HSL
Relative Leuchtdichte (L)
🎨 Hinweis: Alle Umrechnungen verwenden Standard-sRGB-Farbraum-Mathematik und laufen vollständig in deinem Browser — es werden keine Daten an einen Server gesendet. Die Farbe, die du auf dem Bildschirm siehst, kann je nach Monitorkalibrierung, Panel-Typ und Lichtverhältnissen abweichen. Die CMYK-Ausgabe ist eine einfache mathematische Näherung. Die Ergebnisse dienen nur zu Informationszwecken; für exakte Druck- oder Markenfarben nutze das passende ICC-Farbprofil, eine Pantone-Referenz oder deine Markenrichtlinien.
🎨 Farbkonverter — ToolPico ↗

WCAG-Kontrastverhältnis-Prüfer

Gib eine Text- (Vordergrund-) Farbe und eine Hintergrundfarbe ein, um das WCAG-2.1-Kontrastverhältnis und die AA/AAA-Ergebnisse mit Live-Vorschau zu sehen. Strebe für normal großen Text mindestens 4,5:1 an, damit er barrierefrei bleibt.

Textgröße & -stärke — bestimmt den geltenden Schwellenwert
≈ 16px, unter 18,66px fett → gilt als normaler Text.
—
WCAG-Kontrastverhältnis
—
APCA-Kontrast (Lc)
Beispiel für große Überschrift (24px)
So sieht normaler Fließtext aus. Für Barrierefreiheit muss diese Zeile gut lesbar sein — WCAG AA verlangt mindestens 4,5:1 Kontrast.
📏 APCA (Lc) ist der neuere, wahrnehmungsbasierte Kontrastalgorithmus, der für WCAG 3 vorgeschlagen wurde. Er berücksichtigt Textgröße und -stärke direkt und liefert einen Lc-Wert von 0 bis ±106 (Vorzeichen = Text heller/dunkler als Hintergrund). Er ist kein offizieller WCAG-2.1-Standard und ersetzt das Kontrastverhältnis oben nicht — er dient als zusätzlicher, moderner Anhaltspunkt.

Simulation von Farbenblindheit

Wie wird die oben gewählte Farbe bei verschiedenen Formen von Farbenblindheit wahrgenommen? Sieh dir Simulationen für Protanopie, Deuteranopie, Tritanopie und Achromatopsie (vollständige Farbenblindheit) an, um schnell zu prüfen, ob dein Design für farbenblinde Nutzer unterscheidbar bleibt. Eine sinnvolle Ergänzung zum Kontrastprüfer.

Vergleiche „Normal” links mit den anderen. Ein Tipp auf eine Farbe kopiert ihren HEX-Code. Diese Simulation ist eine angenäherte clientseitige Matrixtransformation; eine präzise klinische Einschätzung erfordert eine medizinische Untersuchung.

Farbpaletten-Generator

Harmonische Paletten, abgeleitet aus der oben gewählten Farbe. Jede wird automatisch aus einer Farbkreis-Beziehung (Komplementär, Analog, Triadisch, Split-Komplementär, Tetradisch/Quadrat) oder einer Helligkeitsrampe (Monochrom) erzeugt. Tippe eine Farbe an, um ihren HEX-Code in die Zwischenablage zu kopieren.

Farbpalette aus einem Bild extrahieren

Lade ein Bild hoch, und seine dominanten Farben werden automatisch extrahiert. Das Bild verlässt niemals dein Gerät — es wird vollständig in deinem Browser (Canvas) verarbeitet und nie auf einen Server hochgeladen. Tippe eine der extrahierten Farben an, um sie an den Konverter zu senden.

JPG, PNG, WebP … die dominantesten Farben werden extrahiert.

CSS-Verlaufsgenerator

Baue einen linearen oder radialen Farbverlauf aus 2–3 Farbstopps und kopiere den fertigen CSS- oder Tailwind-Arbitrary-Value-Code. Läuft komplett lokal, keine Bibliothek nötig.

Verlaufstyp & Winkel
Farbstopps
Live-Vorschau
Code — zum Kopieren klicken

Wie funktionieren Farbcodes, und wie wandelt man zwischen ihnen um?

Eine vollständige Erklärung der Modelle HEX, RGB, HSL und HSV, der Umrechnungsmathematik und des WCAG-Kontrasts.

Ein Farbcode-Konverter lässt dich dieselbe Farbe in unterschiedlichen Notationen (HEX, RGB, HSL, HSV/HSB, CMYK) ausdrücken und zwischen ihnen wechseln. Alle diese Modelle beschreiben den sRGB-Farbraum, den Bildschirme verwenden — ein HEX-Code und sein RGB- oder HSL-Äquivalent beschreiben also exakt dieselbe Farbe, nur anders geschrieben. Dieses Tool führt jede Umrechnung mit Standardalgorithmen durch, ohne externe Bibliothek.

Wie wandelt man einen HEX-Farbcode in RGB um?

KurzantwortEin HEX-Code wird als #RRGGBB geschrieben; jeder Zweierblock stellt einen Farbkanal in Basis 16 (hexadezimal) dar. Zur Umrechnung in Basis 10: #7C3AED → 7C=124, 3A=58, ED=237, also rgb(124, 58, 237). Die dreistellige Kurzform (#RGB) wird erweitert, indem jedes Zeichen verdoppelt wird: #F0A → #FF00AA.
  • RR — der Rotkanal, 00–FF (0–255).
  • GG — der Grünkanal, 00–FF (0–255).
  • BB — der Blaukanal, 00–FF (0–255).
  • AA (optional) — bei einem 8-stelligen HEX ist der letzte Block der Alpha- (Deckkraft-) Kanal.

Was sind HSL und HSV? Wie unterscheiden sie sich von RGB?

KurzantwortHSL (Farbton-Sättigung-Helligkeit) und HSV/HSB (Wert/Helligkeit) beschreiben eine Farbe entlang von Achsen für Farbton, Sättigung und Helligkeit/Wert, die für Menschen intuitiv wirken. RGB arbeitet mit drei Lichtkanälen; HSL/HSV arbeiten stattdessen mit dem Farbkreis. Der Unterschied liegt in der dritten Komponente: bei HSL ergibt L=50% die reine Farbe; bei HSV ergibt V=100% die lebendigste Farbe.

In der Praxis ist HSL das nützlichste Modell, wenn du aus einer Markenfarbe hellere und dunklere Schattierungen erzeugen willst: halte Farbton (H) und Sättigung (S) fest und verändere nur die Helligkeit (L). Die Palette „Farbtöne & Schattierungen” auf dieser Seite tut genau das. Die Farbwähler von Design-Programmen verwenden meist HSV, weil sich ein „Helligkeits”-Regler visuell leichter erfassen lässt.

Wie wird das WCAG-Kontrastverhältnis berechnet?

KurzantwortZuerst wird die relative Leuchtdichte jeder Farbe ermittelt. Jeder sRGB-Kanal wird durch 255 geteilt und linearisiert: c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4. Dann L = 0,2126·R + 0,7152·G + 0,0722·B. Das Kontrastverhältnis ist (L1 + 0,05) / (L2 + 0,05) — L1 die hellere, L2 die dunklere Farbe. Das Ergebnis liegt zwischen 1:1 und 21:1.

Diese Formel berücksichtigt, dass das menschliche Auge am empfindlichsten für Grün und am wenigsten empfindlich für Blau ist (die Koeffizienten 0,7152 und 0,0722). Deshalb kann sogar ein scheinbar „helles” Paar wie Gelb auf Weiß bei Kontrastprüfungen durchfallen. Nutze das Kontrast-Tool oben, um das Verhältnis und die AA/AAA-Ergebnisse live für beliebige zwei Farben zu sehen.

Zielwerte für barrierefreien Farbkontrast

KurzantwortNormaler Text: AA ≥ 4,5:1, AAA ≥ 7:1. Große Schrift (≈18pt, oder 14pt fett und größer): AA ≥ 3:1, AAA ≥ 4,5:1. UI-Komponenten und grafische Objekte brauchen im Allgemeinen 3:1. Bleibt dein Text über diesen Schwellenwerten, können auch Nutzer mit Sehbehinderung deinen Inhalt gut lesen.

Referenztabellen

HEX-/RGB-/HSL-Äquivalente gängiger Farben, WCAG-Kontrastschwellenwerte, typische Einsatzbereiche der einzelnen Formate sowie eine Alpha- (Deckkraft-) zu HEX-Umrechnungstabelle.

HEX-, RGB- und HSL-Äquivalente von Grundfarben (sRGB)
FarbeHEXRGBHSL
Schwarz#0000000, 0, 00, 0%, 0%
Weiß#FFFFFF255, 255, 2550, 0%, 100%
Rot#FF0000255, 0, 00, 100%, 50%
Grün (Lime)#00FF000, 255, 0120, 100%, 50%
Blau#0000FF0, 0, 255240, 100%, 50%
Gelb#FFFF00255, 255, 060, 100%, 50%
Cyan#00FFFF0, 255, 255180, 100%, 50%
Magenta#FF00FF255, 0, 255300, 100%, 50%
Orange#FFA500255, 165, 039, 100%, 50%
Violett (dieses Tool)#7C3AED124, 58, 237262, 83%, 58%
Grau#808080128, 128, 1280, 0%, 50%

HSL-Werte sind auf die nächste ganze Zahl gerundet. Gib oben im Konverter einen beliebigen HEX-Wert ein, um sein exaktes Äquivalent zu sehen.

WCAG-2.1-Mindestkontrastverhältnisse
InhaltstypAA (Minimum)AAA (erweitert)
Normaler Text (< 18pt / 14pt fett)4,5:17:1
Große Schrift (≥ 18pt oder 14pt fett)3:14,5:1
UI-Komponente / grafisches Objekt3:1—
Dekoratives / deaktiviertes ElementNicht erforderlichNicht erforderlich

18pt ≈ 24px, 14pt fett ≈ 18,66px. Das Kontrastverhältnis kann höchstens 21:1 betragen (reines Schwarz auf reinem Weiß).

Farbformate und typische Anwendungsfälle
FormatBeispielWo es verwendet wird
HEX#7C3AEDCSS, Design, Web — am gebräuchlichsten
HEX + Alpha#7C3AED80Halbtransparente Farbe (CSS, Mobile)
RGBrgb(124, 58, 237)CSS, kanalbasierte Operationen
RGBArgba(124, 58, 237, .5)CSS mit Deckkraft-Bedarf
HSLhsl(262, 83%, 50%)Farbton-/Helligkeitsanpassung, Theme-Generierung
HSV / HSBhsv(262, 76%, 93%)Farbwähler in Design-Tools
CMYKcmyk(48, 76, 0, 7)Druck (Näherungsumrechnung)
OKLCHoklch(54.1% 0.247 293)Modernes CSS; großer Farbraum, wahrnehmungskonsistente Helligkeit
LABlab(43.4% 64.8 -79.1)Geräteunabhängig; Farbabstandsmessung (ΔE)
LCHlch(43.4% 102.2 309.3)Die zylindrische (Farbton-/Chroma-) Form von LAB
Deckkraft (Alpha) in Prozent → letzter Block des 8-stelligen HEX-Codes
DeckkraftDezimalwert (0–1)HEX (00–FF)
100% (vollständig deckend)1,00FF
90%0,90E6
75%0,75BF
50% (halbtransparent)0,5080
25%0,2540
10%0,101A
0% (vollständig transparent)0,0000

HEX-Alpha = die hexadezimale Form von round(Deckkraft × 255). Bewege den Alpha-Regler oben, und der 8-stellige HEX-Wert wird automatisch aktualisiert.

Beliebte Farben

Dieses Tool auf deiner Website einbinden (Embed-Code)

Binde den Farbkonverter kostenlos auf deiner eigenen Website ein. Kopiere den folgenden Code in dein HTML — das Tool läuft in einer vereinfachten Ansicht und verlinkt als Quelle auf diese Seite zurück.

Das eingebettete Tool hat ein festes Layout; du kannst den Wert von height an deine Website anpassen. Keine Werbung, keine persönlichen Daten, läuft vollständig clientseitig.

Glossar der Farbbegriffe

Kurze Definitionen der wichtigsten Begriffe rund um Farbcodes und Barrierefreiheitsprüfungen.

HEXEine Notation, die eine Farbe in Basis 16 als #RRGGBB schreibt. Das gebräuchlichste Format in Web und Design.
RGBDefiniert eine Farbe über die Menge (0–255) an rotem, grünem und blauem Licht (ein additives Modell).
HSLFarbton (0–360°), Sättigung (%), Helligkeit (%). Nützlich zum Ableiten von Themes und Farbtonvarianten.
HSV / HSBFarbton, Sättigung, Wert/Helligkeit. Das Standardmodell hinter den Farbwählern der meisten Design-Tools.
CMYKDas Druckmodell, das mit Cyan-, Magenta-, Gelb- und Key- (Schwarz-) Tinte arbeitet (ein subtraktives Modell).
Alpha (Deckkraft)Die Transparenz einer Farbe; 0 ist vollständig transparent, 1 ist vollständig deckend. Geschrieben als RGBA oder 8-stelliges HEX.
FarbtonDer Winkel auf dem Farbkreis; 0° ist Rot, 120° ist Grün, 240° ist Blau.
SättigungDie Lebendigkeit einer Farbe; 0% ist ein Grauton, 100% ist die lebendigste Form.
Relative LeuchtdichteDie vom Auge wahrgenommene Helligkeit einer Farbe; die Grundlage der Kontrastverhältnis-Berechnung.
KontrastverhältnisDer Leuchtdichteunterschied zwischen zwei Farben; berechnet mit (L1+0,05)/(L2+0,05), im Bereich 1:1–21:1.
WCAGWeb Content Accessibility Guidelines; der Barrierefreiheitsstandard des W3C für das Web (Stufen AA/AAA).
KomplementärfarbeDer genau gegenüberliegende Farbton auf dem Farbkreis (H+180°); ergibt den stärksten Kontrast.
Analoge FarbenBenachbarte Farbtöne (H±30°); erzeugen eine harmonische, ruhige Palette.
Triadische PaletteDrei gleichmäßig verteilte Farbtöne auf dem Kreis (H, H+120°, H+240°); lebendig und ausgewogen.
sRGBDer Standard-Farbraum von Bildschirmen und dem Web; HEX/RGB/HSL beschreiben alle diesen Raum.
OKLCHEin moderner, wahrnehmungsgleichmäßiger Farbraum: Helligkeit, Chroma, Farbton. In CSS bevorzugt wegen seines großen Farbraums und konsistenter Helligkeit.
LAB / LCHEin geräteunabhängiger Farbraum auf Basis von CIELAB; misst den Farbabstand (ΔE) nahe an der menschlichen Wahrnehmung. LCH ist seine zylindrische (Farbton-/Chroma-) Form.
FarbenblindheitSchwierigkeiten beim Unterscheiden von Farben; die häufigsten Formen sind Protanopie und Deuteranopie (Rot-Grün) sowie Tritanopie (Blau-Gelb).

Ausführliche Anleitungen

Die häufigsten Fragen zu Farbcodes und Barrierefreiheit, beantwortet.

Wie baue ich aus einer Markenfarbe eine vollständige Palette auf?

Gib deine Hauptfarbe oben im Konverter ein. Die Palette „Farbtöne & Schattierungen” hält Farbton und Sättigung fest und stuft die Helligkeit (L) von 50 bis 900 ab — das ergibt eine Farbskala, ideal für Buttons, Rahmen und Hintergrundebenen. Danach liefert die Analog-Palette (H±30°) sanfte Akzentfarben, die Komplementär-Palette (H+180°) eine kräftige Aktionsfarbe, und die Triaden-Palette eine lebendige Dreierkombination.

Ein gängiger Ansatz in professionellen Interfaces: eine Haupt-Markenfarbe plus eine Farbtonrampe, ein komplementärer Akzent und eine Skala neutraler Grautöne. Teste jede Farbe, die du als Text/Hintergrund wählst, mit dem Kontrast-Tool und stelle sicher, dass sie den AA-Schwellenwert erreicht.

Ist meine Textfarbe gut genug lesbar? Woran erkenne ich das?

Gib deine Textfarbe als Vordergrund und deine Hintergrundfarbe oben im WCAG-Kontrast-Bereich ein. Liegt das Verhältnis unter 4,5:1, erreichst du AA für normal großen Text nicht — strebe mindestens diesen Wert an. Bei großen Überschriften (≈24px+) sinkt der Schwellenwert auf 3:1. Die Badges des Tools markieren jeden Schwellenwert als bestanden/nicht bestanden, und die Live-Vorschau darunter zeigt die tatsächliche Lesbarkeit.

Tipp: Um den Kontrast zu erhöhen, liefert ein leicht aufgehellter Hintergrund (oder eine niedrigere Helligkeit in HSL) meist ein saubereres Ergebnis als nur den Text abzudunkeln. Gelb, Hellgrün und Pastelltöne fallen auf weißem Hintergrund oft durch.

Wofür ist 8-stelliges HEX (Alpha) da, und wie liest man es?

#RRGGBBAA fügt einer Standardfarbe einen Deckkraft- (Alpha-) Kanal hinzu, geschrieben als 8 Hex-Ziffern. Die letzten beiden Zeichen reichen von 00 (vollständig transparent) bis FF (vollständig deckend). #7C3AED80 ist zum Beispiel Violett bei etwa 50% Deckkraft — dasselbe wie rgba(124, 58, 237, .5).

Die Umrechnung Prozent → HEX ist round(Deckkraft × 255): 50% → 128 → 80, 75% → 191 → BF. Bewege den Alpha-Regler oben, und sowohl die RGBA- als auch die 8-stellige HEX-Ausgabe werden sofort aktualisiert; die Referenztabelle „Alpha → HEX” listet die gängigsten Werte auf.

Alle ToolPico-Tools entdecken →

Häufig gestellte Fragen

Wie wandelt man einen HEX-Farbcode in RGB um?
Ein HEX-Code wird als #RRGGBB geschrieben, und jeder Zweierblock stellt einen Kanal in Basis 16 dar. Zur Umrechnung in Basis 10 rechnest du jeden Block um: #7C3AED → 7C=124, 3A=58, ED=237, also rgb(124, 58, 237). Die dreistellige Kurzform (#RGB) wird erweitert, indem jedes Zeichen verdoppelt wird: #F0A → #FF00AA.
Was ist HSL?
HSL ist ein Farbmodell aus Farbton (0–360°), Sättigung (%) und Helligkeit (%). Es ist für Menschen intuitiver als RGB: Hält man den Farbton fest und ändert nur die Helligkeit, entstehen leicht hellere oder dunklere Versionen einer Farbe. HSL und RGB beschreiben dieselbe sRGB-Farbe und lassen sich exakt ineinander umrechnen.
Wie wird das WCAG-Kontrastverhältnis berechnet?
Zuerst wird die relative Leuchtdichte jeder Farbe ermittelt: Jeder sRGB-Kanal wird auf 0–1 normiert und mit c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4 linearisiert, dann summiert als L = 0,2126·R + 0,7152·G + 0,0722·B. Das Kontrastverhältnis ergibt sich aus (L1 + 0,05) / (L2 + 0,05) (L1 die hellere, L2 die dunklere Farbe). Das Ergebnis liegt zwischen 1:1 und 21:1.
Wie erstellt man eine Farbpalette?
Die gängigsten Methoden beruhen auf Beziehungen im Farbkreis: Komplementär (H+180°) ergibt starken Kontrast, Analog (H±30°) ergibt harmonische Übergänge, Triadisch (H, H+120°, H+240°) ergibt ein lebendiges Trio. Farbtöne & Schattierungen entstehen, indem der Farbton fest bleibt und die Helligkeit (L) erhöht oder gesenkt wird. Dieses Tool leitet alle vier automatisch aus deiner gewählten Farbe ab.
Was ist der Unterschied zwischen HSV und HSL?
Beide verwenden Farbton und Sättigung; ihre dritte Komponente unterscheidet sich. Bei HSL ergibt L=50% die reine Farbe, 100% ergibt Weiß, 0% ergibt Schwarz. Bei HSV/HSB ergibt V=100% die lebendigste Farbe, 0% ergibt Schwarz; um Weiß zu erreichen, muss zusätzlich die Sättigung gesenkt werden. Design-Tools verwenden meist HSV; CSS unterstützt die Funktion hsl().
Welches Kontrastverhältnis sollte ich für barrierefreien Farbkontrast anstreben?
Nach WCAG 2.1 benötigt normaler Text mindestens 4,5:1 für AA und 7:1 für AAA; große Schrift (≈18pt / 14pt fett und größer) benötigt 3:1 für AA und 4,5:1 für AAA. UI-Komponenten benötigen im Allgemeinen 3:1. Bleibt dein Text über diesen Schwellenwerten, ist er auch für Nutzer mit Sehbehinderung gut lesbar.
Wie wird Alpha (Transparenz) in einem Farbcode dargestellt?
Alpha drückt die Deckkraft von 0 (vollständig transparent) bis 1 (vollständig deckend) aus. In CSS wird es als Dezimalzahl wie rgba(124, 58, 237, .5) oder als 8-stelliges HEX wie #7C3AED80 geschrieben, wobei die letzten beiden Zeichen den Alphakanal (00–FF) darstellen. 50% Deckkraft entspricht in HEX etwa 80. Dieses Tool erzeugt Alpha sowohl in RGBA- als auch in #RRGGBBAA-Form.
Warum sieht CMYK anders aus als HEX?
HEX/RGB ist ein additives Modell für Bildschirme (Licht wird addiert); CMYK ist ein subtraktives Modell für den Druck (Tinte wird addiert). Manche kräftigen Farben, die ein Bildschirm darstellen kann, lassen sich mit Tinte nicht exakt reproduzieren, daher ist die CMYK-Umrechnung eine Näherung. Für exakte Druckergebnisse nutze das passende ICC-Farbprofil oder eine Pantone-Referenz.
Was sind OKLCH- und LAB-Farbcodes?
Anders als das bildschirmzentrierte RGB sind OKLCH und LAB moderne Farbräume, die sich an der menschlichen Wahrnehmung orientieren. LAB (CIELAB) ist geräteunabhängig und misst den Unterschied zwischen zwei Farben nahe an der Wahrnehmung des Auges; LCH ist seine zylindrische (Farbton-/Chroma-) Form. OKLCH basiert auf den Achsen Helligkeit, Chroma und Farbton, speziell für CSS entwickelt mit konsistenter Helligkeit und großem Farbraum: geschrieben wie oklch(54.1% 0.247 293). Dieses Tool erzeugt die gewählte Farbe sofort in OKLCH, LAB und LCH.
Wie wandle ich eine Farbe in Tailwind-, Swift- oder Flutter-Code um?
Sobald du eine Farbe wählst, erzeugt das Tool automatisch Entwickler-Code-Ausgaben: eine CSS-Variable (--color: #7C3AED;), SCSS ($color: #7C3AED;), eine Tailwind-Arbitrary-Klasse (bg-[#7C3AED]), Swift UIColor, Android/Kotlin color int (0xFF7C3AED), und Flutter Color (Color(0xFF7C3AED)). Du kannst jede Zeile mit einem Klick kopieren; liegt die Deckkraft unter 100%, wechselt die Ausgabe zu 8-stelligem ARGB.
Wofür ist die Simulation von Farbenblindheit da?
Etwa 8% der Menschen (häufiger Männer) haben eine Form von Farbenblindheit. Die Simulation zeigt näherungsweise, wie deine gewählte Farbe bei Protanopie, Deuteranopie, Tritanopie und Achromatopsie wahrgenommen wird, damit du prüfen kannst, ob rein farbbasierte Unterscheidungen (wie rot/grüne Status-Badges) auch für diese Nutzer unterscheidbar bleiben. Best Practice ist, Farbe nie als einzigen Bedeutungsträger zu verwenden und sie stets mit ausreichendem Kontrast abzusichern.

Methodik & Quellen

ToolPicos Farbkonverter ist ein kostenloses, unabhängiges Tool. Die Umrechnungen wenden direkt die Standard-sRGB-Farbraum- Mathematik an: HEX ↔ RGB nutzt die Basis-16-Umrechnung; RGB ↔ HSL und RGB ↔ HSV normieren jeden Kanal auf 0–1 und wenden die Standardformeln für Farbton/Sättigung/Helligkeit an; CMYK nutzt eine einfache subtraktive Umrechnung. Der Kontrastbereich wendet die WCAG-2.1-Definition der relativen Leuchtdichte (c ≤ 0,03928 ? c/12,92 : ((c+0,055)/1,055)^2,4 und L = 0,2126·R + 0,7152·G + 0,0722·B) sowie die Kontrastverhältnis-Formel (L1+0,05)/(L2+0,05) exakt an. Alle Berechnungen laufen vollständig in deinem Browser; es werden nie Farbdaten an einen Server gesendet.

Grundlage: sRGB-Farbraum-Umrechnungen (IEC 61966-2-1) · WCAG-2.1-Kontrastverhältnis (W3C) · CIE-basierte Koeffizienten der relativen Leuchtdichte. Zuletzt aktualisiert: 22. Juli 2026. Die Farbumrechnungs- und Kontrastformeln sind Standard und feststehend; diese Seite wird regelmäßig überprüft, um aktuell zu bleiben. Die Ergebnisse dienen nur zu Informationszwecken — die tatsächliche Bildschirmdarstellung kann je nach Monitorkalibrierung und Druckprofil variieren.

🔗 Dieses Tool auf deiner Website einbinden

Kopiere den folgenden Code auf deine eigene Website. Das Tool ist kostenlos, immer aktuell und läuft vollständig auf deiner Seite. Keine Anmeldung nötig.

Vorschau →
⚡ Erstellt mit ToolPico · toolpico.com