Formatos de cores

Os valores de cor podem ser informados no formato HSV ou RGB ou usando um nome de cor.

Matiz-Saturação-Valor

A maneira mais simples de definir uma cor é um número entre 0 e 360, definindo a tonalidade no modelo de cor hue-saturation-value (HSV, em inglês).

Espectro de cores HSV

O uso de HSV com saturação e valor fixos para todas as cores de bloco permite selecionar uma cor de bloco e garantir que todos os blocos compartilhem uma paleta coesa.

A saturação e os valores podem ser adaptados para cada aplicativo chamando as seguintes funções:

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

Vários seletores de cores oferecem o espaço de cores HSV, como o seletor HSV. Insira as constantes de saturação e valor do Blockly (os padrões são 45% e 65%, respectivamente) e, em seguida, deslize a matiz para a cor escolhida. Use esse número de matiz como o valor colour.

RGB

É altamente recomendável usar o espaço de cores HSV, mas o Blockly oferece suporte a cores especificadas como strings hexadecimais #RRGGBB. Isso pode facilitar a coordenação com outras cores do aplicativo (por exemplo, estilos em CSS) e aplicativos de design (por exemplo, Photoshop), é um risco de design que pode levar a blocos descoordenados se não for escolhido com cuidado.

Exemplo de cores mal selecionadas.

A menos que você tenha recursos de design visual dedicados, é recomendável trabalhar dentro das restrições do espaço de cores HSV. Se você tentar redefinir todas as cores dessa maneira, consulte os recursos do Material Design do Google sobre cores.

Nomes das cores

Também é possível especificar cores usando os nomes de cores definidos pelo W3C.

Referências de cores

Muitas vezes, vários blocos compartilham a mesma cor, e centralizar as definições de cores simplifica o gerenciamento e a adição de novos blocos da cor correta. As cores de bloco e as categorias da caixa de ferramentas podem usar tokens de localização para fazer exatamente isso.

O Blockly inclui nove constantes de cor na tabela de strings, correspondendo às categorias da caixa de ferramentas, além de uma cor distinta para variáveis dinâmicas:

'%{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}'

Esses valores de string podem ser usados nas definições JSON e block.setColour(..).

É possível adicionar suas próprias constantes de cor adicionando ao Blockly.Msg:

// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');

Armazenar as cores na tabela de string de localização pode parecer incomum, mas é conveniente, já que a notação JSON já tem suporte para as referências. Ele também permite que as cores sejam localizadas, se necessário.