Design System

---

• Überblick
• Adobe Swatch Exchange (ASE)
• Adobe COlor (ACO)
• GIMP (GPL)
• Procreate (swatches)
• Text
• Json
• Figma
• Tailwind css
• css RGB
• css HSL
• css Lab
• css OkLch

Überblick

In diesem bereich finden Sie Barrierefreiheitsinformationen und ergänzende semantische Farben für die Nutzung in digitalen Anwendungen.

Im oberen Bereich sind die Markenfarben aufgelistet und für weiße und schwarze Buchstaben das Kontrastniveau nach WCAG angegeben. Bei kontrastlosen Kombinationen erhalten Sie DNP= do not pass = test nicht bestanden. Kontrastreichere Kombinationen haben AA und AAA.

Zusätzlich wenden die Markenfarben auch paarweise getestet und im positivem Fall dokumentiert.

Im Bereich Lesbarkeit erfolgt eine Analyse der Verwendbarkeit der Markenfarben als Textfarben auf schwarzem und weißem Untergrund sowohl nach WCAG als auch nach APCA.

Im nächsten Bereich erfolgt die paarweise Analyse der Unterscheidbarkeit der Markenfarben für UI/Graphik Anwendungen mit Hilfe des Farbabstandes deltaE 2000. Dies geschieht sowohl für normales Sehvermögen als auch für Farbsehschwäche (Deuteranopie). Farbabstände für simulierte Farbsehstörungen werden berechnet, indem zunächst eine Simulation der Farbsehstörung angewendet und anschließend die resultierenden Farben anhand der CIEDE2000-Metrik (ΔE00) ausgewertet werden. Da CIEDE2000 auf dem CIE-Standardbeobachter und nicht auf Beobachtern mit Farbsehstörungen basiert, sollten die angegebenen Werte als Annäherungswert für die Farbunterscheidbarkeit unter der ausgewählten Störung betrachtet werden. Sie sind als praktische Heuristik für die Barrierefreiheit gedacht und nicht als klinisch oder psychophysikalisch validiertes Maß für die Wahrnehmung.

Anschließend finden Sie eine Simulation der Markenfarben unter verschiedenen Farbblindheitskriterien. Wenn Sie die Farben in Kombination einsetzen wollen, achten Sie hier auf Kontrast.

Im nächsten Abscnitt finden Sie sematische Ergänzungen als Farbscala und für Hell- und Dunkelmodus. Sie können diese Farben leicht ändern und anpassen, indem Sie sie mit einer Markenfarbe mischen. Die semantischen Farben dienen für die Nutzung als "info", "success", "warning" und "error". Sie finden jeweils umfangreiche Kontrastraster nach WCAG und APCA zur präzisen Einschätzung der Barrierefreiheit.

Im Bereich Export können Sie die Farben in verschiedene Formate exportieren.

Die Studien mit Teams enthalten einen Kommentarbereich.

Bei genehmigten Studien sind die Editierfunktion deaktiviert.

Export

Sie können verschiedene Exportfunktionen nutzen.

Adobe COlor (ACO)

Eine ACO-Datei ist eine Farbfelddatei, die von Adobe Photoshop und anderen Adobe Creative Suite-Anwendungen zum Speichern und Freigeben von Farbpaletten verwendet wird. Es enthält eine Reihe vordefinierter Farben.

GIMP GPL

Eine .gpl-Datei ist eine Palettendatei für die Open-Source-Grafiksoftware GIMP.

GIMP-Palettendateien (.gpl) sind reine Textdateien, die vom Grafikeditor GIMP (GNU Image Manipulation Program) zum Speichern und Freigeben von Farbpaletten verwendet werden.

GIMP Palette
Name: Brand One
Columns: 5
183 234 80 Primary
27 130 36 brand1
122 61 61 brand2
254 253 253 neutral-light-1
252 248 248 neutral-light-2
245 238 236 neutral-light-3
240 228 226 neutral-light-4
234 219 215 neutral-light-5
228 207 202 neutral-light-6

Procreate swatches

Eine Procreate-Farbfelddatei ist eine Datei mit der Erweiterung .swatches, die eine Farbpalette enthält, die speziell für die Verwendung in der Procreate-App auf dem iPad formatiert ist. In diesen Dateien werden bis zu 30 einzelne Farben gespeichert, die Sie importieren und als Palette in Ihren Procreate-Projekten verwenden können.

Text

Die Textdatei besteht aus einer einfachen Liste von Farben wie dieser:

Palette
Name: Brand One
RGB 183 234 80 - Hex #b7ea50 Primär
RGB 27 130 36 - Hex #1b8224 brand1
RGB 122 61 61 - Hex #7a3d3d brand2
RGB 254 253 253 - Hex #fefdfd neutral-light-1
RGB 252 248 248 - Hex #fcf8f8 neutral-light-2
RGB 245 238 236 - Hex #f5eeec neutral-light-3
RGB 240 228 226 - Hex #f0e4e2 neutral-light-4

JSON

Die json-Datei ist eine Liste von Farben wie dieser, die in Frontend-Anwendungen verwendet werden sollen.

{"name":"Brand One","colors":
  [
    {"rgb":[183,234,80],
      "hex":"#b7ea50",
      "name":"Primär"
    },
    {"rgb":[27,130,36],
      "hex":"#1b8224",
      "name":"brand1"
    },
    {"rgb":[122,61,61],
      "hex":"#7a3d3d",
      "name":"brand2"
    }
    ...

Figma

Das Figma-Format ist eine einfache JSON-Struktur. Sie können diese Datei mit einem Popluar-Plugin color-import-export laden

{ 
  "primar":"#b7ea50",
  "brand1":"#1b8224",
  "brand2":"#7a3d3d",
  "neutral-light-1":"#fefdfd",
  ...

Tailwind CSS

In v4 von Tailwind werden die benutzerdefinierten Farben definiert, indem sie in die Haupt-CSS-Datei im @theme-Block eingefügt werden.

@theme {

  --color-primary: #b7ea50;
  --color-brand1: #1b8224;
  --color-brand2: #7a3d3d;
  --color-neutral-light-1: #fefdfd;
  --color-neutral-light-2: #fcf8f8;
  --color-neutral-light-3: #f5eeec;
  ...

Auf diese Weise haben Sie nun Zugriff auf die Farben wie:

<div class="bg-primary text-brand1">Hello</div>

CSS RGB

Daraus ergibt sich die Liste der RGB-Farben

rgb(183 234 80)
rgb(27 130 36)
rgb(122 61 61)
rgb(254 253 253)
rgb(252 248 248)
rgb(245 238 236)
rgb(240 228 226)
rgb(234 219 215)
rgb(228 207 202)

CSS HSL

Daraus ergibt sich die Liste der hsl-Farben

hsl(79.87deg 78.57% 61.57%)
hsl(125.24deg 65.61% 30.78%)
hsl(0deg 33.33% 35.88%)
hsl(0deg 33.33% 99.41%)
hsl(0deg 40% 98.04%)
hsl(13.33deg 31.03% 94.31%)

CSS-LABOR

Hier wird die Liste der Lab-farben angezeigt

lab(87% -33.15 65.88)
lab(47.43% -43.91 40)
lab(33.9% 27.07 12.76)
lab(99.39% 0.34 0.12)
lab(97.89% 1.38 0.5)
lab(94.61% 2.18 1.85)
lab(91.51% 3.96 2.51)
lab(88.55% 4.82 3.92)
...

css OkLch

Daraus ergibt sich die Liste der OkLch-Farben

oklch(87.27% 0.19 125.84deg)
oklch(53.09% 0.16 143.94deg)
oklch(43.76% 0.09 21.15deg)
oklch(99.48% 0 18.85deg)
oklch(98.22% 0 17.65deg)
oklch(95.4% 0.01 36.7deg)
oklch(92.78% 0.01 28.97deg
...