La mayoría de las apps de Blockly usan una variedad de colores de bloques para agrupar visualmente los bloques en categorías. Los bloques que se envían con Blockly incluyen varias categorías, con los colores reflejados en las distintas categorías de la barra de herramientas en las demostraciones:
Los colores adicionales del bloque derivan del color principal. Por ejemplo, los bloques de sombras son una versión desaturada del color principal y los colores de los bordes son una versión más oscura.
Establecer el color del bloque
El color del bloque se puede definir en las notaciones JSON o JavaScript:
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Presta atención a la ortografía británica. Si no se establece el color, se verá un bloque negro.
Formatos de color
El valor colour se puede proporcionar en formato HSV o hexadecimal.
Valor de saturación de tono
La forma más simple de definir el color de un bloque es un número entre 0 y 360, que define el matiz del bloque en el modelo de color matiz-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 a 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 de valor de Blockly (los valores predeterminados son del 45% y del 65% respectivamente) y, luego, desliza el matiz a un color que elijas. Usa este número de matiz como valor colour.
Hexadecimal
Se recomienda usar el espacio de color HSV, pero Blockly admite colores de bloque especificados como hexadecimales #RRGGBB. Si bien esto puede facilitar la coordinación con otros colores de aplicaciones (p.ej., estilos en CSS) y aplicaciones de diseño (p.ej., Photoshop), es un riesgo de diseño que podría generar bloques descoordinados si no se eligen con cuidado.
A menos que tengas recursos exclusivos de diseño visual, 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 color.
Referencias de colores
A menudo, varios bloques comparten el mismo color, y la centralización de las definiciones de color simplifica la administración de los colores y la adición de bloques nuevos del color correcto. Los colores de bloque pueden usar referencias de tablas de cadenas para hacer exactamente eso.
Blockly incluye nueve constantes de color en la tabla de cadenas, correspondientes 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(..).
Puedes agregar tus propias constantes de color agregando 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, dado que la notación JSON ya admite las referencias. También permite localizar los colores, si es necesario.
Inquietudes sobre accesibilidad
Blockly usa el color como un fuerte indicio sobre la función de cada bloque y para agrupar bloques. En el caso de los bloques incluidos, esta indicación es secundaria para el texto del bloque y, por lo tanto, no es un atributo crítico. Sin embargo, al elegir una paleta de colores de bloque, se debe tener en cuenta el daltonismo.
Blockly proporciona varios temas para adaptarse a algunos tipos de deficiencia en la visión de los colores. Esta página incluye las paletas de colores de ejemplo 7, 12 y 15 que intentan maximizar la distinción entre las formas más comunes de daltonismo. Ten en cuenta que esto no se asignaría a 7, 12 o 15 categorías de bloques en Blockly, ya que algunos matices deberían reservarse para campos y bloques de sombras.