块颜色

大多数 Blockly 应用都使用不同的区块颜色直观地将区块分组为不同的类别。Blockly 随附的各个区块包括多个类别，其颜色与演示中的不同工具栏类别相对应：

工作区的屏幕截图，其中包含每种块颜色的示例。

区块上的其他颜色派生自主色。例如，阴影块是主色饱和度较低的版本，而边框颜色则是深色版本。

设置方块颜色

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

JSON

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

JavaScript

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

请注意英式拼写。如果未能设置颜色，则会出现黑色区块。

颜色格式

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

色相饱和度值

要定义块的颜色，最简单的方法就是使用 0-360 之间的数字，以在 hue-saturation-value (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 值。

十六进制

强烈建议使用 HSV 颜色空间，但 Blockly 确实支持指定为 #RRGGBB 十六进制的块颜色。虽然这有助于与其他应用颜色（例如 CSS 中的样式）和设计应用（例如使用 Photoshop），这是一种设计风险，如果不小心选择，可能会导致块不协调。

不当选择颜色的示例。

除非您拥有专门的视觉设计资源，否则建议在 HSV 颜色空间的限制范围内工作。如果尝试以这种方式重新定义所有颜色，请参阅 Google 关于颜色的 Material Design 资源。

颜色参考

通常，多个色块会采用同一种颜色，集中颜色定义可以简化颜色管理以及添加正确颜色的新块。块颜色可以使用字符串表引用来实现这一点。

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 表示法已经支持引用，非常方便。如果需要，它还允许本地化颜色。

无障碍功能问题

Blockly 使用颜色来明确表明每个区块的作用，并将区块分组在一起。对于包含的块，此可供性 (affordance) 对块上的文本而言是次要的，因此不是关键属性。不过，在选择色块调色板时，应该考虑色盲问题。

Blockly 提供了多个主题，旨在应对某些类型的色觉缺陷。此页面包含示例 7、12 和 15 个调色板，试图最大限度地区分最常见的色盲形式。请注意，这不会映射到 Blockly 中的 7、12 或 15 个块类别，因为某些阴影应为阴影块和字段预留。