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

Dieser Bereich steht ihnen für STRATEGIC und STUDIO Studien zur Verfügung.

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).

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.

Wenn Sie eine STUDIO-Studie haben, werden Teamkommentare im unteren Bereich ermöglicht.

Bei genehmigten Studien sind die Editierfunktion deaktiviert.

Export

Sie können verschiedene Exportfunktionen nutzen.

ASE - Adobe Swatch Exchange

Eine Datei mit der Dateierweiterung ASE ist eine Adobe Swatch - Exchange-Datei. Es wird verwendet, um eine Sammlung von Farben zu speichern. Auf diese Sammlung kann über die Farbfeldpalette einiger Adobe-Produkte wie Photoshop zugegriffen werden. Das Format erleichtert die gemeinsame Nutzung von Farben zwischen verschiedenen Programmen. Da es sich um ein Binärformat handelt, können Sie den Inhalt nicht mit einem Textbetrachter lesen.

Adobe COlor (ASE)

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
...