Die CI · Kapitel 6

Abstufungen und Farbklänge

Eine CI nennt selten mehr als fünf oder sechs Farben. Für eine Webseite braucht man mehr: hellere Flächen, dunklere Schrift, einen passenden Akzent. Der Editor rechnet das aus der Palette, und du nimmst, was du brauchst.

Abstufungen

Im Editor, Reiter Farben, klappt Abstufungen an jeder Farbe die Stufen 50, 100, 200 bis 900 und 950 auf. Jede Stufe trägt einen kurzen Hinweis, wofür sie taugt:

Hinweis	heißt
Text auf Weiß	dunkel genug für Schrift auf weißem Grund
Grund für Text	hell genug, dass dunkle Schrift darauf liest
nur Fläche	weder das eine noch das andere; für Flächen und Linien

Ein Klick auf eine Stufe nimmt sie als eigene Farbe in die Palette auf. Das musst du aber nicht: Die Abstufungen gehen ohnehin in den Export, etwa als --color-hauptfarbe-600, für jede Farbe mit einer Rolle außer Neutral. Auf der Farbkarte im Reiter Farben stehen sie nicht.

Der Entwurf 2027 im Editor, Reiter Farben: die Farbe Oven red mit aufgeklappten Abstufungen von 50 bis 950, rechts die Beispielseite und die Prüfung, die mitläuft — Abstufungen, Farbklänge und die Prüfung, die mitläuft.

Neutraltöne mit einem Hauch der Hauptfarbe

Hat die Palette eine Hauptfarbe, steht unter den Farben der Knopf Neutraltöne mit einem Hauch der Hauptfarbe. Er legt drei neutrale Farben an, alle leicht im Farbton der Hauptfarbe: ein gebrochenes Weiß als Papier, ein mittleres Grau für Linien und ein Dunkel für Schrift. Sie heißen Papier, Stein und Tinte; ist ein Name schon vergeben, bekommt der neue einen Zusatz.

Passt dazu

Der Bereich Passt dazu rechnet Farbklänge aus der Hauptfarbe. Ein Klick auf ein Feld nimmt die Farbe auf.

Klang	was er ist
Gegenfarbe	gegenüber im Farbkreis; größter Abstand, für einen einzelnen Akzent
Nachbarn	links und rechts daneben; ruhig und zusammengehörig
Dreiklang	drei gleich verteilte Töne; lebendig, braucht viel Neutrales
Geteilte Gegenfarbe	zwei Töne neben der Gegenfarbe; Kontrast, aber weicher

Die Prüfung läuft mit

Rechts neben dem Editor steht Prüfung, live mit einer Beispielseite in der CI. Nimmst du eine Farbe auf, rechnet sie sofort neu und zeigt die Zahl der Hinweise oder alles gut. So siehst du, ob ein neuer Akzent gegen eine vorhandene Farbe zu blass ist, bevor du speicherst. Was die Hinweise bedeuten, steht unter Prüfungen.

Pavo sagtEine Farbe aus „Passt dazu“ ist ein Vorschlag aus der Rechnung, keine Vorgabe des Kunden. Rolle und Name gibst du ihr danach selbst.