颜色格式

颜色值可以采用 HSV 或 RGB 格式,也可以使用颜色名称。

色相-饱和度-明度

定义颜色最简单的方法是使用介于 0 到 360 之间的数字,在色相-饱和度-亮度 (HSV) 颜色模型中定义色相。

HSV 颜色谱

使用 HSV 时,可以为所有块颜色固定饱和度和值,以便您选择块颜色,同时确保所有块共用一个协调的调色板。

您可以通过调用以下函数,针对每种应用调整饱和度和值:

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

许多颜色选择器都提供 HSV 颜色空间,例如 HSV 选择器。输入 Blockly 的饱和度和值常量(默认值分别为 45% 和 65%),然后将色相滑动到所选颜色。将此色相值用作 colour 值。

RGB

强烈建议使用 HSV 颜色空间,但 Blockly 支持以 #RRGGBB 十六进制字符串指定的颜色。虽然这有助于与其他应用颜色(例如 CSS 中的样式)和设计应用(例如Photoshop),但如果不加以谨慎选择,可能会导致块之间不协调,从而造成设计风险。

颜色选择不当的示例。

除非您有专门的视觉设计资源,否则建议您在 HSV 颜色空间的限制下工作。如果您尝试以这种方式重新定义所有颜色,不妨参阅 Google 的 Material Design 颜色资源

颜色名称

您还可以使用 W3C 定义的颜色名称指定颜色。

颜色参考

通常,多个块会使用相同的颜色,集中定义颜色有助于简化颜色管理并添加正确颜色的新块。块颜色和工具箱类别可以使用本地化令牌来实现这一点。

Blockly 在字符串表中包含 9 个颜色常量,对应于工具箱类别,以及一个用于动态变量的独特颜色:

'%{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}'

这些字符串值既可用于 JSON 定义,也可用于 block.setColour(..)

您可以通过向 Blockly.Msg 添加以下代码来添加自己的颜色常量:

// Define the colour
Blockly.Msg.EVERYTHING_HUE = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');

将颜色存储在本地化字符串表中可能看起来不寻常,但鉴于 JSON 表示法已支持引用,因此这样做很方便。此外,您还可以根据需要本地化颜色