ほとんどの Blockly アプリでは、さまざまなブロックの色を使用してブロックをカテゴリ別に視覚的にグループ化しています。Blockly に同梱されているブロックには複数のカテゴリが含まれており、色はデモのツールバー カテゴリとほぼ同じです。
ブロックの追加色はメインの色から導出されます。たとえば、シャドウ ブロックはメインカラーの彩度が低く、枠線の色は暗めのバージョンです。
ブロックの色を設定
ブロックの色は、JSON 表記または JavaScript 表記で定義できます。
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
イギリスのスペルに注意してください。色を設定しないと、黒いブロックが表示されます。
カラー形式
colour 値は HSV または 16 進数形式で指定できます。
色相-彩度-値
ブロックの色を定義する最も簡単な方法は、0 ～ 360 の数値です。これにより、ブロックの色相は hue-saturation-value（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 値として使用します。
16 進数
HSV 色空間を使用することを強くおすすめしますが、Blockly は #RRGGBB 16 進数で指定されるブロック色をサポートしています。これにより、他のアプリの色（CSS のスタイルなど）やデザインアプリ（Photoshop など）では、慎重に選択しないと調整不能なブロックにつながる設計上のリスクがあります。
専用のビジュアル デザイン リソースがない場合は、HSV 色空間の制約内で作業することをおすすめします。この方法ですべての色を再定義する場合は、色に関する Google のマテリアル デザイン リソースを検討してください。
色の説明
多くの場合、複数のブロックが同じ色を共有しています。色の定義を一元化すると、色の管理と正しい色の新しいブロックの追加が簡単になります。ブロックの色では、まさにそのために文字列テーブル参照を使用できます。
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 は、各ブロックの役割を示す強力なヒントとして色を使用し、ブロックをグループ化します。含まれるブロックの場合、このアフォーダンスはブロック上のテキストよりも優先されるため、重要な属性ではありません。ただし、ブロックのカラーパレットを選択する場合は、色覚異常を考慮する必要があります。
Blockly は、一部の色覚障がいに対処するために複数のテーマを提供しています。このページには、最も一般的な色覚異常の特性を最大限に区別するためのカラーパレットの例（7、12、15）が掲載されています。なお、一部のシェードはシャドウ ブロックとフィールド用に予約する必要があるため、これは Blockly の 7、12、15 のブロック カテゴリにマッピングされません。