Using colors for blockly elements

Blockly supports a hexadecimal and HSV color model to display blocks. Whereas originally Cerebra used the hexadecimal model, this caused issues with colors blending in with the background of other blocks or text. As this impacts the accessibility of the programs view, we decided to switch to the HSV model, as recommend by Google's official Blockly usage guide.

Hue-Saturation-Value

The simplest way to define the color of a block is a number between 0-360, which defines the hue of the block in the Hue-Saturation-Value (HSV) color model.

Below we can see a comparison between RGB and HSV

more information can be found here

Using HSV with fixed saturation and value for all block colours allows you to select a block color while ensuring that all blocks share a consistent palette.

The saturation and values can be adapted for each application by calling the following functions:

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

A number of color pickers, such as HSV-Picker, offer the HSV color space. To utilise this, enter Blockly's saturation and value constants (the defaults are 45% and 65% respectively), then slide the hue to a chosen color. This hue number can then be used as the colour value.

Example from the code of how the color selection has changed

Before:

<category name="Time" colour="#ffff00">
    <block type = "sleep_for_seconds"></block>
    <block type = "get_system_time"></block>
</category>

After:

<category name="Time" colour="60">
    <block type = "sleep_for_seconds"></block>
    <block type = "get_system_time"></block>
</category>

Blockly colors before and after the transition to the new HSV color space.