Die CI · Kapitel 5
Farben
Die Farben sind der Reiter, der beim Öffnen eines Kunden zuerst erscheint. Jede Farbe hat einen Namen, eine Rolle und ihre Werte für Bildschirm und Druck.
Die Farbkarte
Im Reiter Farben steht jede Farbe als Karte. Oben die Farbfläche mit einer Textprobe darauf: Weiß darauf oder Dunkel darauf, je nachdem, welche Schrift besser liest, mit dem Kontrastverhältnis. Darunter stehen Name, Rolle und Notiz und die Werte:
| Wert | Beispiel |
|---|---|
| HEX | #1F4E79 |
| RGB und HSL | aus dem Hexwert gerechnet |
| CMYK | CMYK, gerechnet oder CMYK, vorgegeben, wenn der Styleguide einen Wert nennt |
| Pantone | so, wie du ihn eingetragen hast |
| Token | --color-<name>, so heißt die Farbe im Code |
Ein Klick auf eine Zeile kopiert den Wert. Ein Haken zeigt kurz, dass es geklappt hat.
Farben im Entwurf anlegen
Farben änderst du nur in einem Entwurf. Im Editor hat jede Farbe einen Farbwähler und ein Feld für den Hexwert, dazu Name, Rolle, Pantone, CMYK vorgegeben und eine Notiz, etwa wofür die Farbe da ist. Daneben zeigt auf Weiß gleich den Kontrast zu Weiß. Mit den Pfeilen ordnest du die Farben, der Knopf Farbe legt eine neue an.
- Werte schreibst du als
#RRGGBBoder kurz als#RGB; die Kurzform wird verbreitert. - Jeder Name kommt nur einmal vor, ohne Rücksicht auf Groß- und Kleinschreibung.
- Eine Fassung hat höchstens 48 Farben.
- Benennst du eine Farbe um, ziehen Regeln und Dunkelmodus den neuen Namen mit.
Vier Rollen
| Rolle | wirkt sich aus auf |
|---|---|
| Hauptfarbe | Vorschläge für Klänge, Neutraltöne und Dunkelmodus gehen von ihr aus; die Prüfung misst sie als Textfarbe auf hellen Neutraltönen |
| Zweitfarbe, Akzent | bunte Farben mit Abstufungen im Export |
| Neutral | Grau- und Grundtöne: keine Abstufungen im Export, kein Platz im Farbstreifen der Seitenleiste, keine Hinweise zum Farbsehen |
Die Abstufungen von 50 bis 950 und die Farbklänge findest du nicht auf der Karte, sondern im Editor unter Abstufungen und Passt dazu. Das erklärt das nächste Kapitel, Abstufungen und Farbklänge.
Pavo sagtEine Farbe, deren Wert sich nicht lesen lässt, nennt die Prüfung im Editor beim Namen und lässt sie aus, statt still „alles gut“ zu melden.