Wartości kolorów można podać w formacie HSV lub RGB albo podając nazwę koloru.
Odcień-Nasycenie-Wartość
Najprostszym sposobem na zdefiniowanie koloru jest podanie liczby z zakresu 0–360, która określa odcień w modelu kolorów hue-saturation-value (HSV).
Korzystanie z modelu HSV z ustawionymi nasyceniem i wartością dla wszystkich kolorów bloków pozwala wybrać kolor bloku, a jednocześnie zapewnić spójność palety dla wszystkich bloków.
Nasycenie i wartości można dostosować do poszczególnych zastosowań, wywołując te funkcje:
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
Wiele selektorów kolorów oferuje przestrzeń kolorów HSV, np. selektor HSV. Wpisz stałe wartości nasycenia i wartości Blockly (domyślnie odpowiednio 45% i 65%), a następnie przesuń barwę do wybranego koloru. Użyj tego numeru odcienia jako wartości colour.
RGB
Zdecydowanie zalecamy używanie przestrzeni kolorów HSV, ale Blockly obsługuje też kolory określone jako #RRGGBB ciągi szesnastkowe. Może to ułatwić koordynację z innymi kolorami aplikacji (np. stylami w CSS) i aplikacji do projektowania (np. Photoshop), to ryzyko związane z projektowaniem, które może prowadzić do nieskoordynowanych bloków, jeśli nie zostanie wybrane ostrożnie.
Jeśli nie masz specjalnych zasobów do projektowania wizualnego, zalecamy tworzenie grafik w ograniczeniach przestrzeni kolorów HSV. Jeśli chcesz zmienić definicję wszystkich kolorów w ten sposób, zapoznaj się z zasobami Google dotyczącymi systemu Material Design na temat kolorów.
nazwy kolorów,
Kolory możesz też określać za pomocą nazwy koloru zdefiniowanej przez W3C.
Odwołania do kolorów
Często wiele bloków ma ten sam kolor, a centralizacja definicji kolorów upraszcza zarządzanie kolorami i dodawanie nowych bloków o właściwym kolorze. Kolory bloków i kategorie w skrzynce narzędzi można lokalizować za pomocą tokenów.
W tabeli ciągów znaków w Blockly znajduje się 9 konstant kolorów odpowiadających kategoriom w narzędziowniku oraz osobny kolor dla zmiennych dynamicznych:
'%{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}'
Wartości te mogą być używane zarówno w definicjach JSON, jak i w block.setColour(..).
Możesz dodać własne stałe kolorów, dodając je do Blockly.Msg:
// Define the colour
Blockly.Msg['EVERYTHING_HUE'] = '42';
// Use in a block or block definition:
block.setColour('%{BKY_EVERYTHING_HUE}');
Przechowywanie kolorów w tabeli ciągów tekstowych do lokalizacji może wydawać się nietypowe, ale jest wygodne, ponieważ notacja JSON obsługuje już odwołania. Umożliwia też lokalizowanie kolorów w razie potrzeby.