封鎖顏色

大多數封鎖的應用程式會使用各種區塊顏色，以視覺化的方式將區塊分成不同類別。使用 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 的質感設計資源。

色彩參照

通常，多個區塊會共用相同的顏色，並將顏色定義集中化，可以簡化顏色管理和新增正確顏色的區塊。區塊顏色可以使用字串資料表參照來完成上述作業。

區塊表格包含與工具箱類別對應的九個顏色常數，以及用於動態變數的專屬顏色：

'%{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 種顏色調色盤，這些調色盤嘗試針對最常見的色盲類型，能夠充分區別。請注意，這不會對應至 Blockly 中的 7、12 或 15 個區塊類別，因為部分色調應保留給陰影區塊和欄位。