Les valeurs de couleur peuvent être indiquées au format HSV ou RVB, ou à l'aide d'un nom de couleur.
Teinte-Saturation-Valeur
Le moyen le plus simple de définir une couleur consiste à utiliser un nombre compris entre 0 et 360, qui définit la teinte dans le modèle de couleur teinte-saturation-valeur (HSV).
L'utilisation du HSV avec une saturation et une valeur fixes pour toutes les couleurs de bloc vous permet de sélectionner une couleur de bloc tout en vous assurant que tous les blocs partagent une palette cohérente.
La saturation et les valeurs peuvent être adaptées à chaque application en appelant les fonctions suivantes:
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
Plusieurs sélecteurs de couleurs proposent l'espace colorimétrique HSV, comme le sélecteur HSV. Saisissez les constantes de saturation et de valeur de Blockly (les valeurs par défaut sont respectivement 45% et 65 %), puis faites glisser la teinte vers la couleur de votre choix. Utilisez ce numéro de teinte comme valeur colour.
RVB
L'utilisation de l'espace de couleur HSV est vivement recommandée, mais Blockly accepte les couleurs spécifiées sous forme de chaînes hexadécimales #RRGGBB. Bien que cela puisse faciliter la coordination avec d'autres couleurs d'application (par exemple, les styles en CSS) et les applications de conception (par exemple, Photoshop), il s'agit d'un risque de conception qui peut entraîner des blocs non coordonnés s'il n'est pas choisi avec soin.
Sauf si vous disposez de ressources de conception visuelle dédiées, nous vous recommandons de respecter les contraintes de l'espace colorimétrique HSV. Si vous essayez de redéfinir toutes les couleurs de cette manière, consultez les ressources Material Design de Google sur la couleur.
Noms de couleurs
Vous pouvez également spécifier des couleurs à l'aide des noms de couleurs définis par le W3C.
Références de couleur
Souvent, plusieurs blocs partagent la même couleur. Centraliser les définitions de couleur simplifie la gestion des couleurs et l'ajout de nouveaux blocs de la bonne couleur. Les couleurs de bloc et les catégories de boîte à outils peuvent utiliser des jetons de localisation pour ce faire.
Blockly inclut neuf constantes de couleur dans la table de chaînes, correspondant aux catégories de la boîte à outils, ainsi qu'une couleur distincte pour les variables dynamiques:
'%{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}'
Ces valeurs de chaîne peuvent être utilisées à la fois dans les définitions JSON et dans block.setColour(..).
Vous pouvez ajouter vos propres constantes de couleur en ajoutant les éléments suivants à Blockly.Msg:
// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Le stockage des couleurs dans la table de chaînes de localisation peut sembler inhabituel, mais il est pratique, car la notation JSON est déjà compatible avec les références. Il permet également de localiser les couleurs, si nécessaire.