I valori di colore possono essere specificati in formato HSV o RGB oppure utilizzando il nome di un colore.
Tonalità-Saturazione-Valore
Il modo più semplice per definire un colore è un numero compreso tra 0 e 360, che definisce la tonalità nel modello di colore hue-saturation-value (HSV).
L'utilizzo di HSV con saturazione e valore fissi per tutti i colori dei blocchi ti consente di selezionare un colore del blocco garantendo al contempo che tutti i blocchi condividano una tavolozza coerente.
La saturazione e i valori possono essere adattati a ogni applicazione chiamando le seguenti funzioni:
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
Diversi selettori di colori offrono lo spazio di colore HSV, ad esempio il selettore di colori HSV. Inserisci le costanti di saturazione e valore di Blockly (i valori predefiniti sono rispettivamente 45% e 65%), quindi scorri la tonalità fino a un colore scelto. Utilizza questo numero di tonalità come valore colour.
RGB
Ti consigliamo vivamente di utilizzare lo spazio colore HSV, ma Blockly supporta anche i colori specificati come stringhe esadecimali #RRGGBB. Sebbene questo possa facilitare la coordinazione con altri colori dell'applicazione (ad es. stili in CSS) e applicazioni di design (ad es. Photoshop), è un rischio di progettazione che potrebbe portare a blocchi scoordinati se non scelto con cura.
A meno che tu non disponga di risorse di design visivo dedicate, ti consigliamo di lavorare rispettando le limitazioni dello spazio colore HSV. Se stai tentando di ridefinire tutti i colori in questo modo, consulta le risorse di Material Design di Google sul colore.
Nomi dei colori
Puoi anche specificare i colori utilizzando i nomi dei colori definiti dal W3C.
Riferimenti ai colori
Spesso più blocchi condividono lo stesso colore e la centralizzazione delle definizioni di colore semplifica la gestione dei colori e l'aggiunta di nuovi blocchi del colore corretto. I colori dei blocchi e le categorie della cassetta degli attrezzi possono utilizzare i token di localizzazione per fare esattamente questo.
Blockly include nove costanti di colore nella tabella di stringhe, corrispondenti alle categorie della cassetta degli attrezzi, oltre a un colore distinto per le variabili dinamiche:
'%{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}'
Questi valori di stringa possono essere utilizzati sia nelle definizioni JSON sia in
block.setColour(..).
Puoi aggiungere le tue costanti di colore aggiungendo a Blockly.Msg:
// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
L'archiviazione dei colori nella tabella delle stringhe di localizzazione può sembrare insolita, ma è comoda dato che la notazione JSON supporta già i riferimenti. Inoltre, consente di localizzare i colori, se necessario.