Farbwerte können im HSV- oder RGB-Format oder mit einem Farbnamen angegeben werden.
Farbton-Sättigung-Wert
Am einfachsten definieren Sie eine Farbe mit einer Zahl zwischen 0 und 360, die den Farbton im Farbmodell „Farbton-Sättigung-Wert“ (HSV) angibt.
Wenn Sie HSV mit einer für alle Blockfarben festgelegten Sättigung und einem festgelegten Wert verwenden, können Sie eine Blockfarbe auswählen und gleichzeitig dafür sorgen, dass alle Blöcke eine einheitliche Palette haben.
Sättigung und Werte können für jede Anwendung angepasst werden, indem die folgenden Funktionen aufgerufen werden:
Blockly.utils.colour.setHsvSaturation(0.45) // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.utils.colour.setHsvValue(0.65) // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
Mehrere Farbauswahltools bieten den HSV-Farbraum, z. B. die HSV-Farbauswahl. Geben Sie die Sättigungs- und Wertkonstanten von Blockly ein (die Standardwerte sind 45% bzw. 65 %). Bewegen Sie dann den Farbton auf die gewünschte Farbe. Verwenden Sie diese Farbtonzahl als Wert für colour.
RGB
Die Verwendung des HSV-Farbraums wird dringend empfohlen. Blockly unterstützt jedoch auch Farben, die als #RRGGBB-hexadezimale Strings angegeben sind. Dies kann die Abstimmung mit anderen Anwendungsfarben (z.B. Stilen in CSS) und Designanwendungen (z.B. Photoshop) ist es ein Designrisiko, das bei unsachgemäßer Auswahl zu nicht aufeinander abgestimmten Blöcken führen kann.
Sofern Sie keine speziellen visuellen Designressourcen haben, wird empfohlen, innerhalb der Einschränkungen des HSV-Farbraums zu arbeiten. Wenn Sie alle Farben auf diese Weise neu definieren möchten, sehen Sie sich die Material Design-Ressourcen zu Farbe von Google an.
Farbnamen
Sie können Farben auch mit den vom W3C definierten Farbnamen angeben.
Farbreferenzen
Häufig haben mehrere Blöcke dieselbe Farbe. Wenn Sie die Farbdefinitionen zentralisieren, können Sie die Farben einfacher verwalten und neue Blöcke in der richtigen Farbe hinzufügen. Für Blockfarben und Toolbox-Kategorien können Lokalisierungs-Tokens verwendet werden.
Blockly enthält neun Farbkonstanten in der Stringtabelle, die den Kategorien der Toolbox entsprechen, sowie eine eigene Farbe für dynamische Variablen:
'%{BKY_LOGIC_HUE}'
'%{BKY_LOOPS_HUE}'
'%{BKY_MATH_HUE}'
'%{BKY_TEXTS_HUE}'
'%{BKY_LISTS_HUE}'
'%{BKY_COLOUR_HUE}'
'%{BKY_VARIABLES_HUE}'
'%{BKY_VARIABLES_DYNAMIC_HUE}'
'%{BKY_PROCEDURES_HUE}'
Diese Stringwerte können sowohl in den JSON-Definitionen als auch in block.setColour(..) verwendet werden.
Sie können eigene Farbkonstanten hinzufügen, indem Sie Blockly.Msg Folgendes hinzufügen:
// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Das Speichern der Farben in der Stringtabelle für die Lokalisierung mag ungewöhnlich erscheinen, ist aber praktisch, da die JSON-Notation bereits Unterstützung für die Verweise bietet. Außerdem können bei Bedarf Farben lokalisiert werden.