Farbe wählen · Shades, OKLCH-Achsen und Harmonien erkunden
Shades sind Abstufungen deiner Farbe – von Schwarz über deine Farbe bis hin zu Weiß. Praktisch, wenn du z.B. Hover-Zustände, Hintergründe oder Schattierungen für eine Farbe brauchst.
HSL-Modus: Der Farbton bleibt erhalten, nur die Helligkeit ändert sich gleichmäßig. Wirkt meist natürlicher und ist der Standard für UI-Paletten.
RGB-Modus: Mischt linear zwischen den drei Farbkanälen. Bleibt näher am ursprünglichen Farbcode, wirkt in der Mitte aber manchmal etwas ungleichmäßig.
OKLCH ist ein Farbmodell, das so aufgebaut ist, wie Menschen Farben tatsächlich wahrnehmen – im Gegensatz zu RGB oder HSL, die eher technisch gedacht sind. Es hat drei unabhängige Achsen:
Jede Spalte hier verändert genau eine dieser Achsen, während die anderen beiden fest bleiben – z.B. zeigt die Chroma-Spalte deine Farbe von komplett grau bis maximal kräftig, ohne dass sich Farbton oder Helligkeit mitverändern. Dadurch wirken die Abstufungen gleichmäßiger als bei HSL.
Farbharmonien sind bewährte Farbkombinationen, die auf der geometrischen Position der Farben im Farbkreis basieren – statt Farben zufällig zu kombinieren, nutzt man feste Winkel-Beziehungen zwischen den Farbtönen. Das Ergebnis wirkt meist stimmiger als eine willkürliche Auswahl.
Damit Text gut lesbar ist – auch für Menschen mit Sehschwäche – schreibt die WCAG (Web Content Accessibility Guidelines) Mindest-Kontrastwerte zwischen Text- und Hintergrundfarbe vor. Der Wert reicht von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß).
Zusätzlich zeigen die Karten den APCA-Wert (Lc) — ein neueres, wahrnehmungsgenaueres Kontrastmodell, das Teil des kommenden WCAG-3-Entwurfs ist. Es gilt noch nicht offiziell als Standard, wird aber in Fachkreisen als Nachfolger von WCAG 2.x gehandelt. Lc 60 gilt als Richtwert für normalen Text, Lc 45 für großen Text/UI-Elemente. Ein negativer Lc-Wert bedeutet helle Schrift auf dunklem Grund, ein positiver dunkle Schrift auf hellem Grund — für die Bewertung zählt nur der Betrag.
Wähle unten Hintergrund- und Textfarbe frei. Die Seite zeigt dir außerdem, ob Schwarz oder Weiß als Textfarbe besser abschneiden würde — das hängt direkt von der Helligkeit deines Hintergrunds ab: Ist er sehr hell, gewinnt fast immer Schwarz; ist er sehr dunkel, gewinnt Weiß. Nur bei mittleren Helligkeiten liegen beide nah beieinander.