Wähl eine Farbe oder füg einen beliebigen HEX-, RGB- oder HSL-Wert ein und erhalte jedes Format, das du für Design und Code brauchst: HEX, RGB, HSL und OKLCH. Sieh eine Skala aus Aufhellungen und Abdunklungen und prüf, wie gut Text darauf lesbar ist, mit Weiß und mit Schwarz.
Eine Markenfarbe muss mehrere Aufgaben erfüllen: auf Buttons auffallen, hinter weißem Text lesbar bleiben und das Auge auf einer ganzen Seite nicht ermüden. Mittlere Blau-, Grün- und tiefe Rottöne schaffen meist alle drei. Sehr helle Farben (Gelb, Pastellrosa) sehen im Logo gut aus, sind aber schlechte Buttons, weil weder weißer noch schwarzer Text ohne Anpassung gut darauf lesbar ist.
Das Kontrastfeld zeigt das sofort. Wenn weißer Text unter 4.5:1 liegt, nimm entweder schwarzen Text oder wähl für Buttons eine dunklere Abdunklung aus der Skala.
Aufhellungen mischen deine Farbe mit Weiß; Abdunklungen mischen sie mit Schwarz. Eine praktische Website-Palette braucht nur wenige: eine sehr helle Aufhellung für Abschnittshintergründe, die Hauptfarbe für Buttons und Links und eine dunklere Abdunklung für Hover-Zustände. Füg neutrale Grautöne für Text und Rahmen hinzu, und du hast ein vollständiges, einheitliches Set.
Um ein bestimmtes Text- und Hintergrundpaar zu prüfen (zum Beispiel grauer Text auf getöntem Hintergrund), nutz den Farbkontrast-Checker, der sowohl WCAG AA als auch AAA bewertet.
Ein sechsstelliger Code für eine Bildschirmfarbe, geschrieben als # gefolgt von drei Paaren hexadezimaler Ziffern für Rot, Grün und Blau. #FF0000 ist reines Rot; #000000 ist Schwarz; #FFFFFF ist Weiß.
Sie beschreiben dieselben Farben auf unterschiedliche Weise. HEX und RGB geben die Anteile von Rot, Grün und Blau an. HSL gibt Farbton (den Winkel auf einem Farbkreis), Sättigung und Helligkeit an, was sich von Hand leichter anpassen lässt.
OKLCH ist ein neueres CSS-Farbformat, das darauf basiert, wie Menschen Farbe wahrnehmen. Zwei Farben mit demselben L-Wert wirken gleich hell, was einheitliche Paletten einfacher macht. Alle aktuellen großen Browser unterstützen es.
Mit der WCAG-2-Formel: relative Leuchtdichte der helleren Farbe plus 0,05, geteilt durch die der dunkleren Farbe plus 0,05. Für einen vollständigen Check zweier Farben nutz den Farbkontrast-Checker von We.Inc.
Verwandte Tools: Farbkontrast-Checker, Schriftkombinationen, Favicon-Generator, E-Mail-Signatur erstellen.
Kostenlos starten, so funktioniert der KI-Website-Baukasten von We.Inc. Mit dem kostenlosen Tarif erhältst du bis zu 3 Vorlagen-Websites unter einer we.inc-Adresse, ohne KI und ohne eigene Domain. KI-Erstellung gibt es ab $20 im Monat.