块颜色

大多数 Blockly 应用使用各种积木块颜色，以直观的方式将积木块分组到类别中。Blockly 提供的屏蔽包括多个类别，与演示中各种工具栏类别所反映的颜色相对应：

工作区的屏幕截图，其中显示了每个块的示例
颜色。

此功能块上的其他颜色均派生自主色。例如：影子块是主色的饱和度版本，而边框颜色则是较深的版本。

设置屏蔽区域颜色

您可以使用 JSON 或 JavaScript 表示法定义块颜色：

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

请注意采用的是英国拼写法。如果未能设置颜色，则会导致黑块。

颜色格式

colour 值可以采用 HSV 或十六进制格式。

色调-饱和度-明度

定义某个分块的颜色最简单的方法是使用一个介于 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 的 saturation 和值常量（默认值分别为 45% 和 65%），则将色调滑动到选定的颜色。将此色调数值用作 colour 值。

十六进制

强烈建议使用 HSV 颜色空间，但 Blockly 支持色块以十六进制 #RRGGBB 表示的颜色。虽然这样有助于与其他应用颜色（例如 CSS 中的样式）协调一致应用（例如Photoshop）存在设计风险，如果没有仔细选择，就会出现未协调的块。

不当选择颜色的示例。

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

颜色参考

通常，多个块会使用相同的颜色，集中定义颜色有助于简化颜色管理并添加正确颜色的新块。区块颜色可以使用字符串表格参考资料要做到这一点。

Blockly 包含字符串表中的九种颜色常量，对应于工具箱类别，外加不同的动态变量颜色：

'%{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 表示法已支持引用。此外，您还可以根据需要本地化颜色。

无障碍功能问题

Blockly 通过颜色来明确提示每个方块的作用组合在一起。对于包含的块，此功能次于块上的文本，因此不是关键属性。不过，如果选择色块配色工具，色盲用户也应考虑这一点。

Blockly 为主题以适应某些类型的色觉缺陷。页面包含示例 7、12 和 15 色这些调色板尝试最大程度地区分最常见的色盲。请注意，这不会映射到 7、12 或 15 个屏蔽类别，因为某些阴影应保留用于阴影块和字段。