Zum Inhalt springen

Farbwerkzeuge FREE

Farben, Paletten, Skalen und Verläufe wählen, umrechnen und erzeugen - mit WCAG-Kontrast, barrierefreien Vorschlägen und Farbsinn-Simulation. Alles wird in Ihrem Browser berechnet.

Kostenlos nutzbar Keine Registrierung Datenschutz zuerst

HEX, rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 ...) oder ein CSS-Farbname.

Zuletzt benutzt

Wähler und Umrechnung

217°
100%

Alle Schreibweisen

Technische Angaben

Kontrast

APCA (Entwurf, zusätzliche Information)

APCA ist das perzeptuelle Kontrastmodell, das für WCAG 3 entworfen wurde. Es ist heute keine Konformitätsanforderung und weicht von WCAG 2 in beide Richtungen ab, deshalb steht es hier als zusätzliche Information und nie als Bestanden oder Durchgefallen.

So sieht es aus

Paletten

Welche Paare lesbar sind

Jede Farbe als Text auf jeder anderen. Die Zahl ist das WCAG-Kontrastverhältnis; AA sind 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente.

Palette kopieren

Skalen

Elf Stufen, in OKLCH gebaut, damit die Sprünge gleichmäßig aussehen und nicht bloß gleichmäßige Zahlen sind. Das Ergebnis ist so geformt, dass es dorthin passt, wo ein Utility-Framework eine Skala erwartet; es ist die Reihe dieses Werkzeugs und die Palette keines Frameworks.

Reihe anpassen

Verläufe

Aus einem Bild

Bild hierher ziehen oder auswählen

Es wird in diesem Tab gelesen und niemals hochgeladen. Nichts bleibt zurück, wenn Sie die Seite verlassen.

Farbsehen

Ein Modell dessen, was ein Farbpaar unter den häufigen Formen der Farbenblindheit verliert, berechnet mit der Projektion nach Vienot, Brettel und Mollon. Es ist eine Simulation und keine Fotografie dessen, was eine bestimmte Person sieht.

Paare, die nicht mehr unterscheidbar sind

Aus der Palette entnommen. Aufgeführt werden nur Paare, die sich im normalen Sehen deutlich unterscheiden - zwei Farben, die schon jetzt ähnlich aussehen, sind eine Gestaltungsentscheidung und kein Befund.

Jede Umrechnung, jede Palette und jeder Kontrastwert auf dieser Seite wird in Ihrem Browser berechnet. Ein hierher gezogenes Bild wird auf einem Canvas in diesem Tab gelesen und niemals hochgeladen.

Umfang und Grenzen

Was diese Zahlen bedeuten und was nicht

Hier berechnet, aus veröffentlichten Formeln

Die Umrechnungen folgen CSS Color Level 4, einschließlich der echten sRGB-Übertragungskurve statt einer Näherung, und der Kontrast folgt der Definition aus WCAG 2.2. Ein Farbpaar, das die Kontrastanforderung erfüllt, macht eine Seite nicht barrierefrei: Kontrast ist ein Erfolgskriterium unter vielen, und dieses eine misst das Werkzeug. Alles läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.

Hilfe

FAQ

Werden meine Farben oder Bilder irgendwohin gesendet?

Nein. Jede Umrechnung, jede Palette, jede Skala und jeder Kontrastwert wird in diesem Tab berechnet. Ein Bild wird hier auf einem Canvas gelesen und niemals hochgeladen; zuletzt verwendete Farben und Ihre Palette liegen im Speicher dieses Browsers, und beides können Sie löschen.

Warum OKLCH statt HSL?

Weil die Helligkeit in HSL ein Mittelwert der Kanäle ist und nicht das, was das Auge misst. Drehen Sie einen Farbton in HSL um 120 Grad, wirkt eines der drei Ergebnisse sichtbar dunkler als die anderen; in OKLCH lesen sich die drei als eine Familie. Dasselbe gilt für eine Tonwertreihe: gleich große Schritte der HSL-Helligkeit drängen sich an den Enden. HSL wird trotzdem angezeigt, weil sehr viel Code darin geschrieben ist.

Ist meine Seite barrierefrei, wenn sie die Kontrastprüfung besteht?

Nein, und die Formulierungen hier sind darin genau. Ein Farbpaar erfüllt eine Kontrastanforderung. Kontrast ist ein Erfolgskriterium unter vielen - Fokusreihenfolge, Beschriftungen, Tastaturwege, Bewegung und Struktur sind jeweils eigene - und eine Seite mit perfektem Kontrast kann trotzdem unbrauchbar sein. Klären Sie damit die Farbfrage, nicht die ganze Frage.

Was ist APCA und warum steht es in einem eigenen Bereich?

Es ist das perzeptuelle Kontrastmodell, das für WCAG 3 entworfen wurde. Es bildet ab, wie Kontrast bei einer bestimmten Größe und Strichstärke tatsächlich wirkt, was WCAG 2 nicht tut - aber es ist ein Entwurf und heute wird nichts daran gemessen. Es gleichrangig neben die WCAG-Urteile zu stellen würde beide falsch darstellen, also steht es hinter einer Aufklappfläche und sagt, was es ist.

Wie genau ist die Farbfehlsichtigkeits-Simulation?

Es ist die Projektion nach Vienot, Brettel und Mollon, angewandt in linearem Licht, das übliche Verfahren zur Modellierung von Dichromasie. Sie zeigt, was ein FarbPAAR verliert, und das ist die Frage, auf die es ankommt: ob zwei Dinge noch unterscheidbar bleiben. Sie ist ein Modell einer Form der Sehschwäche, keine Fotografie dessen, was eine bestimmte Person sieht - und sagt das im Bereich auch.

Lässt sich die erzeugte Skala in meine Framework-Konfiguration einfügen?

Ja - der Export enthält eine Form, die dorthin passt, wo ein Utility-Framework eine Farbskala erwartet, daneben CSS Custom Properties, SCSS-Variablen und JSON. Die Reihe stammt von diesem Werkzeug, in OKLCH aus der von Ihnen angegebenen Farbe aufgebaut; sie ist die Palette keines Frameworks und wird auch nicht als solche ausgegeben.

Bau ein besseres Web, schneller.

Wir entwickeln individuelle Software und Lösungen, die auf Ihre Bedürfnisse zugeschnitten sind.

Kontakt aufnehmen