Farben angeben

1. Eine Farbe angeben

Farbnamen

Der einfachste Weg: Du schreibst den englischen Namen der Farbe. Browser kennen 148 Namen, von red bis rebeccapurple. Groß- und Kleinschreibung ist egal, Leerzeichen gibt es nicht (lightblue, nicht light blue). Ein paar, die du oft brauchst:

Vorsicht bei Namen, die anders aussehen, als sie klingen: green ist ein dunkles Grün, das helle heißt lime. gray ist dunkler als darkgray.

h2 { color: crimson; }

fill = gold
shape = sphere

Alle 148 Namen mit ihren Farben findest du in der Liste von MDN.

Farbcodes mit #

Ein Farbcode wie #f9c80e besteht aus drei Paaren: Rot (f9), Grün (c8) und Blau (0e). Jedes Paar ist eine Hexadezimalzahl von 00 (nichts von dieser Farbe) bis ff (so viel wie möglich, 255). Licht mischt sich anders als Malfarbe: Rot und Grün ergeben Gelb, alle drei ganz ergeben Weiß.

Die Kurzform #fa0 steht für #ffaa00: Jede Ziffer wird verdoppelt. Einen Farbcode suchst du am bequemsten mit einem Farbwähler aus. VS Code zeigt in CSS-Dateien vor jedem Farbcode ein kleines Kästchen; ein Klick darauf öffnet einen.

background: #f3e5f5;

fill = #3a6ee8

Rot, Grün und Blau einzeln

In CSS schreibst du die drei Anteile als Zahlen von 0 bis 255:

color: rgb(249, 200, 14);

Auf der Zeichenfläche von Pixelflow Canvas (mit :rgb) stehen dieselben drei Zahlen ohne rgb(…):

set_color(249, 200, 14)

Im Anaglyph-Viewer stehen sie ohne rgb(…) und gehen von 0 bis 1. Eine einzelne Zahl ist ein Grauton von 0 (schwarz) bis 1 (weiß):

fill = 1, 0.8, 0
background = 0

Weil das Zahlen sind, darfst du im Viewer auch rechnen, zum Beispiel mit der Zeit t: fill = sin(t) * 0.5 + 0.5, 0, 0 lässt ein Objekt rot pulsieren.

2. Farben finden

Die Cling-Palette

Eine Palette ist eine Auswahl von Farben, die gut zusammenpassen. Die Cling-Palette hat 44 Farben, von hellem Gelb bis Schwarz. In Pixelflow Canvas wählst du sie mit set_predefined_palette(:cling), in PixelRAM mit use_palette("cling"); dort sind es die Farben 0 bis 43. In CSS und im Anaglyph-Viewer nimmst du den Farbcode. Klicke auf eine Farbe, dann steht sie unten im Farbmischer mit allen ihren Schreibweisen.

Farben mischen

Mit den Reglern mischst du eine Farbe auf zwei Arten:

• Rot, Grün und Blau ist technisch: So viel Licht gibt der Bildschirm in jeder der drei Farben ab. Was dabei herauskommt, sieht man den Zahlen schlecht an. rgb(0, 255, 0) ist ein sehr helles Grün, rgb(0, 0, 255) ein dunkles Blau, obwohl in beiden genau ein Anteil ganz aufgedreht ist.
• OKLCH ist an unserer Wahrnehmung ausgerichtet: Jeder Regler ändert genau eine Eigenschaft, die wir an einer Farbe sehen, und gleiche Schritte sehen ungefähr gleich groß aus.

Drehst du nur am Farbton, bleibt die Farbe gleich hell und gleich kräftig. So findest du zum Beispiel mehrere Farben, die nebeneinander gleich stark wirken. Bei RGB geht das nicht: Wer dort nur eine Zahl ändert, ändert meist Helligkeit, Buntheit und Farbton zugleich.

oklch(…) verstehen alle aktuellen Browser. Der Anaglyph-Viewer kennt es nicht; dort nimmst du den Farbcode oder die drei Anteile von 0 bis 1.

3. Kontrast

Text muss sich deutlich vom Hintergrund abheben. Schwarz auf Weiß und Weiß auf Dunkelblau sind gut lesbar, Hellgrau auf Weiß und Rot auf Grün nicht: Etwa jeder zwölfte Junge kann Rot und Grün schlecht unterscheiden. Prüfe im Zweifel, ob du den Text auch noch lesen kannst, wenn du ein Stück vom Bildschirm zurücktrittst.