Block colour
大多數區塊應用程式使用各種區塊顔色，以視覺方式将區塊分類。Blockly附帶的塊包括八個類别，顔色由示範中的各種工具欄類别反映：
許多工具箱項還包括作為預設輸入值的陰影塊。例如，藍色加法塊的數字。陰影塊的顔色來自于塊的标準顔色，但不飽和。
Defining the block colour
塊顔色可以用JSON或JavaScript中定義：
//json
{
// ...,
"colour": 160,
}
//javascript
init: function() {
// ...
this.setColour(160);
}
如果不設定顔色，将導緻黑塊。
顔色值可以采用幾種形式之一。最簡單的是0-360之間的數字，在色調飽和度值（HSV）顔色模型中定義塊的色調。
對所有塊顔色使用飽和度和固定值的HSV，可以友善地選擇塊顔色，同時確定所有塊共享一個内聚調色闆。
有幾個顔色選擇器提供HSV顔色空間，例如HSV選擇器。輸入Blockly的飽和度和值常量（預設值分别為45%和65%），然後根據需要滑動色調。将此色調數用作顔色值（JSON）或this.setColour（..）函數（JavaScript）的參數。
通過覆寫以下塊常量，可以針對每個應用程式調整飽和度和值
Blockly.HSV_SATURATION // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.HSV_VALUE // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
Colour references
通常，多個塊共享同一顔色，集中顔色定義簡化了對顔色的管理，并添加了正确顔色的新塊。塊顔色可以使用字元串表引用來做到這一點。
字元串表中包含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表示法已經支援引用，這很友善。如果需要，它還允許顔色本地化。
工具箱XML還支援category colour屬性中的顔色引用：
<category name="Logic" colour="%{BKY_LOGIC_HUE}">
...
</category>
Customizing saturation and value
通過覆寫以下塊常量，可以針對每個應用程式調整飽和度和值：
Blockly.HSV_SATURATION // 0 (inclusive) to 1 (exclusive), defaulting to 0.45
Blockly.HSV_VALUE // 0 (inclusive) to 1 (exclusive), defaulting to 0.65
Colour values in hex
強烈建議使用HSV顔色空間，但Buffy确實支援指定為γrRGGBB六進制的塊顔色。雖然這可以促進與其他應用程式顔色（例如CSS中的樣式）和設計應用程式（例如Photoshop）的協調，但如果不仔細選擇，這是一種設計風險，很容易導緻不協調的塊。
除非您有專門的視覺設計資源，否則建議在HSV色彩空間的限制範圍内工作。如果試圖以這種方式重新定義所有顔色，請考慮谷歌的顔色材料設計資源。
Accessibility concerns
Blockly使用顔色作為每個塊的角色的強烈提示，并将塊分組在一起。對于包含的塊，此功能是塊上文本的次要功能，是以不是關鍵屬性。然而，在選擇塊調色闆時，色盲應該是一個考慮因素。
雖然BuBLY沒有對色盲适應的具體支援，但該頁面包括示例7, 12和15個顔色調色闆，試圖最大限度地跨越最常見的色盲形式。請注意，這不會映射到塊中的7、12或15個塊類别，因為某些陰影應保留給陰影塊和字段。