Vorschau
Die Farbpalette umfasst 12 Farbfamilien mit jeweils 9 Helligkeitsstufen sowie Graustufen.
Alle Farben nutzen den OKLCH-FarbraumÖffnet in neuem Tab für erweiterte Farbdarstellung auf modernen Displays (P3). Der Kontrastwechsel erfolgt einheitlich ab Stufe 600, ab der die Textfarbe von Schwarz auf Weiß wechselt, um WCAG AA Konformität (4.5:1 Kontrast) zu gewährleisten. Die Farbtöne sind 30° im Farbkreis gewinkelt, Chroma und Lightness sind bei allen Farben identisch vorkonfiguiert.
White
--wp--preset--color--white
Black
--wp--preset--color--black
Grey 100
--wp--preset--color--grey-100
Grey 200
--wp--preset--color--grey-200
Grey 300
--wp--preset--color--grey-300
Grey 400
--wp--preset--color--grey-400
Grey 500
--wp--preset--color--grey-500
Grey 600
--wp--preset--color--grey-600
Grey 700
--wp--preset--color--grey-700
Grey 800
--wp--preset--color--grey-800
Grey 900
--wp--preset--color--grey-900
Red 100
--wp--preset--color--red-100
Red 200
--wp--preset--color--red-200
Red 300
--wp--preset--color--red-300
Red 400
--wp--preset--color--red-400
Red 500
--wp--preset--color--red-500
Red 600
--wp--preset--color--red-600
Red 700
--wp--preset--color--red-700
Red 800
--wp--preset--color--red-800
Red 900
--wp--preset--color--red-900
Orange 100
--wp--preset--color--orange-100
Orange 200
--wp--preset--color--orange-200
Orange 300
--wp--preset--color--orange-300
Orange 400
--wp--preset--color--orange-400
Orange 500
--wp--preset--color--orange-500
Orange 600
--wp--preset--color--orange-600
Orange 700
--wp--preset--color--orange-700
Orange 800
--wp--preset--color--orange-800
Orange 900
--wp--preset--color--orange-900
Yellow 100
--wp--preset--color--yellow-100
Yellow 200
--wp--preset--color--yellow-200
Yellow 300
--wp--preset--color--yellow-300
Yellow 400
--wp--preset--color--yellow-400
Yellow 500
--wp--preset--color--yellow-500
Yellow 600
--wp--preset--color--yellow-600
Yellow 700
--wp--preset--color--yellow-700
Yellow 800
--wp--preset--color--yellow-800
Yellow 900
--wp--preset--color--yellow-900
Yellow-Green 100
--wp--preset--color--yellow-green-100
Yellow-Green 200
--wp--preset--color--yellow-green-200
Yellow-Green 300
--wp--preset--color--yellow-green-300
Yellow-Green 400
--wp--preset--color--yellow-green-400
Yellow-Green 500
--wp--preset--color--yellow-green-500
Yellow-Green 600
--wp--preset--color--yellow-green-600
Yellow-Green 700
--wp--preset--color--yellow-green-700
Yellow-Green 800
--wp--preset--color--yellow-green-800
Yellow-Green 900
--wp--preset--color--yellow-green-900
Green 100
--wp--preset--color--green-100
Green 200
--wp--preset--color--green-200
Green 300
--wp--preset--color--green-300
Green 400
--wp--preset--color--green-400
Green 500
--wp--preset--color--green-500
Green 600
--wp--preset--color--green-600
Green 700
--wp--preset--color--green-700
Green 800
--wp--preset--color--green-800
Green 900
--wp--preset--color--green-900
Green-Teal 100
--wp--preset--color--green-teal-100
Green-Teal 200
--wp--preset--color--green-teal-200
Green-Teal 300
--wp--preset--color--green-teal-300
Green-Teal 400
--wp--preset--color--green-teal-400
Green-Teal 500
--wp--preset--color--green-teal-500
Green-Teal 600
--wp--preset--color--green-teal-600
Green-Teal 700
--wp--preset--color--green-teal-700
Green-Teal 800
--wp--preset--color--green-teal-800
Green-Teal 900
--wp--preset--color--green-teal-900
Teal 100
--wp--preset--color--teal-100
Teal 200
--wp--preset--color--teal-200
Teal 300
--wp--preset--color--teal-300
Teal 400
--wp--preset--color--teal-400
Teal 500
--wp--preset--color--teal-500
Teal 600
--wp--preset--color--teal-600
Teal 700
--wp--preset--color--teal-700
Teal 800
--wp--preset--color--teal-800
Teal 900
--wp--preset--color--teal-900
Blue 100
--wp--preset--color--blue-100
Blue 200
--wp--preset--color--blue-200
Blue 300
--wp--preset--color--blue-300
Blue 400
--wp--preset--color--blue-400
Blue 500
--wp--preset--color--blue-500
Blue 600
--wp--preset--color--blue-600
Blue 700
--wp--preset--color--blue-700
Blue 800
--wp--preset--color--blue-800
Blue 900
--wp--preset--color--blue-900
Blue-Purple 100
--wp--preset--color--blue-purple-100
Blue-Purple 200
--wp--preset--color--blue-purple-200
Blue-Purple 300
--wp--preset--color--blue-purple-300
Blue-Purple 400
--wp--preset--color--blue-purple-400
Blue-Purple 500
--wp--preset--color--blue-purple-500
Blue-Purple 600
--wp--preset--color--blue-purple-600
Blue-Purple 700
--wp--preset--color--blue-purple-700
Blue-Purple 800
--wp--preset--color--blue-purple-800
Blue-Purple 900
--wp--preset--color--blue-purple-900
Purple 100
--wp--preset--color--purple-100
Purple 200
--wp--preset--color--purple-200
Purple 300
--wp--preset--color--purple-300
Purple 400
--wp--preset--color--purple-400
Purple 500
--wp--preset--color--purple-500
Purple 600
--wp--preset--color--purple-600
Purple 700
--wp--preset--color--purple-700
Purple 800
--wp--preset--color--purple-800
Purple 900
--wp--preset--color--purple-900
Pink 100
--wp--preset--color--pink-100
Pink 200
--wp--preset--color--pink-200
Pink 300
--wp--preset--color--pink-300
Pink 400
--wp--preset--color--pink-400
Pink 500
--wp--preset--color--pink-500
Pink 600
--wp--preset--color--pink-600
Pink 700
--wp--preset--color--pink-700
Pink 800
--wp--preset--color--pink-800
Pink 900
--wp--preset--color--pink-900
Doku
Farbpalette anpassen
Im Parent Theme ist eine umfangreiche und barrierefreie Farbpalette vorbereitet, die genutzt werden kann, wenn vollständig über den Site Editor (No Code) gearbeitet wird. Um Inkompatibilitäten mit Farb-Variablen zu vermeiden, empfehlen wir die bestehende Systematik abzupassen. Weniger sinnvoll ist das Hinzufügen neuer Farben im Backend, da diese neue CSS-Variablen erzeugen, die dem Design System nicht bekannt sind.
Farbpalette für Projekte anpassen
Im Child Theme stehen drei Farbpaletten zur Verfügung:
/styles/colors/00-full.json(alle 119 Farben, wie im Parent)/styles/colors/01-reduced.json(Reduzierte Farbauswahl, 3 Farben pro Farbton)/styles/colors/02-minimal.json(Schwarz, Weiß, Grau)
Für projektspezifische Anpassungen kann eine davon als Ausgangslage dienen. Die Individualisierung findet dann i.d.R. in der theme.json statt. Achtet darauf, dass auch hier im Idealfall die Slugs der Farben beibehalten werden.