Blocklyに最初から組み込まれているブロックが沢山あります。
今回はcolour_blocks.jsonのブロック に定義されているブロックについて説明します。
このファイルには色に関するブロックが定義されています。

colour_picker

colour_pickerは色を選択するピッカーを表示するブロックです。
このブロックには出力端子が存在し、選択した色のカラーコードが出力されます。

colour_pickerの定義

  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "colour": 20,
    "tooltip": "Choose a colour from the palette.",
    "helpUrl": "https://en.wikipedia.org/wiki/Color"
  }

colour_pickerの生成コード

    [出力端子] = '[選択した色のカラーコード]';

colour_random

colour_randomは色はランダムに取得するブロックです。
このブロックには出力端子が存在し、選択した色のカラーコードが出力されます。

colour_randomの定義

  {
    "type": "colour_random",
    "message0": "random colour",
    "args0": [],
    "output": null,
    "colour": 20,
    "tooltip": "Choose a colour at random.",
    "helpUrl": "http://randomcolour.com"
  }

colour_randomの生成コード

    function colourRandom() {
        var num = Math.floor(Math.random() * Math.pow(2, 24));
        return '#' + ('00000' + num.toString(16)).substr(-6);
    }
    [出力端子] = colourRandom();

colour_rgb

colour_rgbは色を構成するRGBを指定して色を作成するブロックです。
このブロックには3つの入力端子があります、1つ目の入力端子でR、2つ目の入力端子でG、3つ目の入力端子でBを指定します。
各値は0~100の間で値を設定し、指定しない場合は0、101以上の場合は100が設定されます。
このブロックには出力端子が存在し、作成した色のカラーコードが出力されます。

colour_rgbの定義

  {
    "type": "colour_rgb",
    "message0": "colour with red %1 green %2 blue %3",
    "args0": [
      {
        "type": "input_value",
        "name": "RED",
        "check": "Number",
        "align": "RIGHT"
      },
      {
        "type": "input_value",
        "name": "GREEN",
        "check": "Number",
        "align": "RIGHT"
      },
      {
        "type": "input_value",
        "name": "BLUE",
        "check": "Number",
        "align": "RIGHT"
      }
    ],
    "output": "Colour",
    "colour": 20,
    "tooltip": "Create a colour with the specified amount of red, green, and blue. All values must be between 0 and 100.",
    "helpUrl": "http://www.december.com/html/spec/colorper.html"
  }

colour_rgbの生成コード

    function colourRgb(r, g, b) {
        r = Math.max(Math.min(Number(r), 100), 0) * 2.55;
        g = Math.max(Math.min(Number(g), 100), 0) * 2.55;
        b = Math.max(Math.min(Number(b), 100), 0) * 2.55;
        r = ('0' + (Math.round(r) || 0).toString(16)).slice(-2);
        g = ('0' + (Math.round(g) || 0).toString(16)).slice(-2);
        b = ('0' + (Math.round(b) || 0).toString(16)).slice(-2);
        return '#' + r + g + b;
    }
    [出力端子] = colourRgb([1つ目の入力端子], [2つ目の入力端子], [3つ目の入力端子]);

colour_blend

colour_blendは色を合成するブロックです。
このブロックには3つの入力端子があります、1つ目の入力端子で色1を指定し 、2つ目の入力端子で色2を指定します、3つ目の入力端子で合成した色の中での色2の割合を指定します。
このブロックには出力端子が存在し、合成した色のカラーコードが出力されます。

colour_blendの定義

  {
    "type": "colour_blend",
    "message0": "blend colour 1 %1 colour 2 %2 ratio %3",
    "args0": [
      {
        "type": "input_value",
        "name": "COLOUR1",
        "check": "Colour",
        "align": "RIGHT"
      },
      {
        "type": "input_value",
        "name": "COLOUR2",
        "check": "Colour",
        "align": "RIGHT"
      },
      {
        "type": "input_value",
        "name": "RATIO",
        "check": "Number",
        "align": "RIGHT"
      }
    ],
    "output": null,
    "colour": 20,
    "tooltip": "Blends two colours together with a given ratio (0.0 - 1.0).",
    "helpUrl": "http://meyerweb.com/eric/tools/color-blend/"
  }

colour_blendの生成コード

    function colourBlend(c1, c2, ratio) {
        ratio = Math.max(Math.min(Number(ratio), 1), 0);
        var r1 = parseInt(c1.substring(1, 3), 16);
        var g1 = parseInt(c1.substring(3, 5), 16);
        var b1 = parseInt(c1.substring(5, 7), 16);
        var r2 = parseInt(c2.substring(1, 3), 16);
        var g2 = parseInt(c2.substring(3, 5), 16);
        var b2 = parseInt(c2.substring(5, 7), 16);
        var r = Math.round(r1 * (1 - ratio) + r2 * ratio);
        var g = Math.round(g1 * (1 - ratio) + g2 * ratio);
        var b = Math.round(b1 * (1 - ratio) + b2 * ratio);
        r = ('0' + (r || 0).toString(16)).slice(-2);
        g = ('0' + (g || 0).toString(16)).slice(-2);
        b = ('0' + (b || 0).toString(16)).slice(-2);
        return '#' + r + g + b;
    }

    [出力端子] = colourBlend([1つ目の入力端子], [2つ目の入力端子], [3つ目の入力端子]);