カラー形式

色の値は、HSV 形式または RGB 形式で指定することも、色名を使用して指定することもできます。

Hue-Saturation-Value

色を定義する最も簡単な方法は、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 の彩度と値の定数を入力します(デフォルトはそれぞれ 45% と 65%)。色相スライダーをスライドして、選択した色にします。この色相数値を colour 値として使用します。

RGB

HSV カラー空間を使用することを強くおすすめしますが、Blockly は #RRGGBB 16 進文字列で指定された色もサポートしています。これにより、他のアプリケーションの色(CSS のスタイルなど)やデザイン アプリケーション(Photoshop)を使用する場合は、慎重に選択しないとブロックが調整されなくなるという設計上のリスクがあります。

不適切な色を選択した例。

専用のビジュアル デザイン リソースがない限り、HSV 色空間の制約内で作業することをおすすめします。この方法ですべての色を再定義する場合は、色に関する Google の Material Design リソースを検討してください。

色の名前

W3C で定義された色名を使用して色を指定することもできます。

色の参照

多くの場合、複数のブロックが同じ色を共有します。色の定義を 1 か所にまとめることで、色の管理と、正しい色の新しいブロックの追加が簡単になります。ブロックの色とツールボックスのカテゴリでは、ローカライズ トークンを使用して、まさにそのことができます。

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 表記では参照がすでにサポートされているため、便利です。また、必要に応じて色をローカライズすることもできます。