Los valores de color se pueden proporcionar en formato HSV o RGB, o bien con un nombre de color.
Matiz, saturación y valor
La forma más sencilla de definir un color es un número entre 0 y 360, que define el tono en el modelo de color tono-saturación-valor (HSV).
El uso de HSV con saturación y valor fijos para todos los colores de bloque te permite seleccionar un color de bloque y, al mismo tiempo, garantizar que todos los bloques compartan una paleta cohesiva.
La saturación y los valores se pueden adaptar para cada aplicación llamando a las siguientes funciones:
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
Varios selectores de color ofrecen el espacio de color HSV, como el selector de HSV. Ingresa las constantes de saturación y valor de Blockly (los valores predeterminados son 45% y 65%, respectivamente) y, luego, desliza el tono hasta el color que elijas. Usa este número de tono como el valor colour.
RGB
Se recomienda usar el espacio de color HSV, pero Blockly admite colores especificados como cadenas hexadecimales #RRGGBB. Si bien esto puede facilitar la coordinación con otros colores de la aplicación (p.ej., estilos en CSS) y aplicaciones de diseño (p.ej., Photoshop), es un riesgo de diseño que podría generar bloques no coordinados si no se elige con cuidado.
A menos que tengas recursos de diseño visual dedicados, se recomienda trabajar dentro de las restricciones del espacio de color HSV. Si intentas redefinir todos los colores de esta manera, consulta los recursos de Material Design de Google sobre el color.
Nombres de los colores
También puedes especificar colores con los nombres de colores definidos por el W3C.
Referencias de colores
A menudo, varios bloques comparten el mismo color, y centralizar las definiciones de color simplifica la administración de los colores y la adición de bloques nuevos del color correcto. Los colores de los bloques y las categorías de la caja de herramientas pueden usar tokens de localización para hacer exactamente eso.
Blockly incluye nueve constantes de color en la tabla de cadenas, que corresponden a las categorías de la caja de herramientas, además de un color distinto para las variables 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}'
Estos valores de cadena se pueden usar en las definiciones de JSON y en block.setColour(..).
Para agregar tus propias constantes de color, agrega lo siguiente a Blockly.Msg:
// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Almacenar los colores en la tabla de cadenas de localización puede parecer inusual, pero es conveniente, ya que la notación JSON ya admite las referencias. También permite que se localicen los colores, si es necesario.