diff --git a/demos/custom-dialogs/index.html b/demos/custom-dialogs/index.html
index 517ca12b4..2b2b7be07 100644
--- a/demos/custom-dialogs/index.html
+++ b/demos/custom-dialogs/index.html
@@ -33,7 +33,7 @@
   <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Inputs" colour="230">
+    <category name="Inputs" colour="%{BKY_MATH_HUE}">
       <block type="math_number" gap="32">
         <field name="NUM">123</field>
       </block>
@@ -47,8 +47,8 @@
       </block>
     </category>
     <sep></sep>
-    <category name="Variables" colour="330" custom="VARIABLE"></category>
-    <category name="Functions" colour="290" custom="PROCEDURE"></category>
+    <category name="Variables" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category>
+    <category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category>
   </xml>
 
   <script>
diff --git a/demos/generator/index.html b/demos/generator/index.html
index b5621842a..b768959c5 100644
--- a/demos/generator/index.html
+++ b/demos/generator/index.html
@@ -34,14 +34,14 @@
   <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Logic">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
       <block type="logic_negate"></block>
       <block type="logic_boolean"></block>
     </category>
-    <category name="Loops">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <block type="math_number">
@@ -51,14 +51,14 @@
       </block>
       <block type="controls_whileUntil"></block>
     </category>
-    <category name="Math">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
       <block type="math_arithmetic"></block>
       <block type="math_single"></block>
     </category>
-    <category name="Text">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_length"></block>
       <block type="text_print"></block>
diff --git a/demos/graph/index.html b/demos/graph/index.html
index 90628577c..dd5401e29 100644
--- a/demos/graph/index.html
+++ b/demos/graph/index.html
@@ -58,7 +58,7 @@
   </div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Math">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
@@ -146,10 +146,10 @@
       </block>
       <block type="math_random_float"></block>
     </category>
-    <category name="Variables">
+    <category name="Variables" colour="%{BKY_VARIABLES_HUE}">
       <block type="graph_get_x"></block>
     </category>
-    <category name="Logic">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
       <block type="logic_negate"></block>
diff --git a/demos/interpreter/async-execution.html b/demos/interpreter/async-execution.html
index 0bf5f3f2d..f222caf4e 100644
--- a/demos/interpreter/async-execution.html
+++ b/demos/interpreter/async-execution.html
@@ -41,14 +41,14 @@
   </div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Logic">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
       <block type="logic_negate"></block>
       <block type="logic_boolean"></block>
     </category>
-    <category name="Loops">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <block type="math_number">
@@ -58,14 +58,14 @@
       </block>
       <block type="controls_whileUntil"></block>
     </category>
-    <category name="Math">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
       <block type="math_arithmetic"></block>
       <block type="math_single"></block>
     </category>
-    <category name="Text">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_length"></block>
       <block type="text_print"></block>
@@ -75,8 +75,11 @@
         </value>
       </block>
     </category>
-    <category name="Variables" custom="VARIABLE"></category>
-    <category name="Functions" custom="PROCEDURE"></category>
+    <sep></sep>
+    <category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
+    </category>
+    <category name="Functions" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}">
+    </category>
   </xml>
 
   <xml id="startBlocks" style="display: none">
diff --git a/demos/interpreter/step-execution.html b/demos/interpreter/step-execution.html
index 8ba01c118..98f9750b6 100644
--- a/demos/interpreter/step-execution.html
+++ b/demos/interpreter/step-execution.html
@@ -48,14 +48,14 @@
   </div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Logic">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
       <block type="logic_negate"></block>
       <block type="logic_boolean"></block>
     </category>
-    <category name="Loops">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <block type="math_number">
@@ -65,14 +65,14 @@
       </block>
       <block type="controls_whileUntil"></block>
     </category>
-    <category name="Math">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
       <block type="math_arithmetic"></block>
       <block type="math_single"></block>
     </category>
-    <category name="Text">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_length"></block>
       <block type="text_print"></block>
@@ -82,8 +82,11 @@
         </value>
       </block>
     </category>
-    <category name="Variables" custom="VARIABLE"></category>
-    <category name="Functions" custom="PROCEDURE"></category>
+    <sep></sep>
+    <category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
+    </category>
+    <category name="Functions" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}">
+    </category>
   </xml>
 
   <xml id="startBlocks" style="display: none">
diff --git a/demos/maxBlocks/index.html b/demos/maxBlocks/index.html
index ff0dc25dd..11c5b1e40 100644
--- a/demos/maxBlocks/index.html
+++ b/demos/maxBlocks/index.html
@@ -32,14 +32,14 @@
   <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Logic">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
       <block type="logic_negate"></block>
       <block type="logic_boolean"></block>
     </category>
-    <category name="Loops">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <block type="math_number">
@@ -67,14 +67,14 @@
         </value>
       </block>
     </category>
-    <category name="Math">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
       <block type="math_arithmetic"></block>
       <block type="math_single"></block>
     </category>
-    <category name="Text">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_length"></block>
       <block type="text_print"></block>
diff --git a/demos/rtl/index.html b/demos/rtl/index.html
index de911b13e..917d6f906 100644
--- a/demos/rtl/index.html
+++ b/demos/rtl/index.html
@@ -42,7 +42,7 @@
   <div id="blocklyDiv"></div>
 
   <xml id="toolbox" style="display: none">
-    <category name="منطق">
+    <category name="منطق" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
@@ -51,7 +51,7 @@
       <block type="logic_null"></block>
       <block type="logic_ternary"></block>
     </category>
-    <category name="الحلقات">
+    <category name="الحلقات" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <block type="math_number">
@@ -80,7 +80,7 @@
       <block type="controls_forEach"></block>
       <block type="controls_flow_statements"></block>
     </category>
-    <category name="رياضيات">
+    <category name="رياضيات" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
@@ -118,7 +118,7 @@
       </block>
       <block type="math_random_float"></block>
     </category>
-    <category name="نص">
+    <category name="نص" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_join"></block>
       <block type="text_append">
@@ -139,7 +139,7 @@
         </value>
       </block>
     </category>
-    <category name="قوائم">
+    <category name="قوائم" colour="%{BKY_LISTS_HUE}">
       <block type="lists_create_empty"></block>
       <block type="lists_create_with"></block>
       <block type="lists_repeat">
@@ -155,13 +155,16 @@
       <block type="lists_getIndex"></block>
       <block type="lists_setIndex"></block>
     </category>
-    <category name="لون">
+    <category name="لون" colour="%{BKY_COLOUR_HUE}">
       <block type="colour_picker"></block>
       <block type="colour_rgb"></block>
       <block type="colour_blend"></block>
     </category>
-    <category name="متغيرات" custom="VARIABLE"></category>
-    <category name="إجراءات" custom="PROCEDURE"></category>
+    <sep></sep>
+    <category name="متغيرات" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
+    </category>
+    <category name="إجراءات" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}">
+    </category>
   </xml>
 
   <xml id="startBlocks" style="display: none">
diff --git a/demos/storage/index.html b/demos/storage/index.html
index d8d4a0aa1..ac054559d 100644
--- a/demos/storage/index.html
+++ b/demos/storage/index.html
@@ -50,14 +50,14 @@
   <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Logic">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
       <block type="logic_negate"></block>
       <block type="logic_boolean"></block>
     </category>
-    <category name="Loops">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <block type="math_number">
@@ -67,14 +67,14 @@
       </block>
       <block type="controls_whileUntil"></block>
     </category>
-    <category name="Math">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
       <block type="math_arithmetic"></block>
       <block type="math_single"></block>
     </category>
-    <category name="Text">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_length"></block>
       <block type="text_print"></block>
diff --git a/demos/toolbox/index.html b/demos/toolbox/index.html
index df291e008..311460e0a 100644
--- a/demos/toolbox/index.html
+++ b/demos/toolbox/index.html
@@ -28,7 +28,7 @@
   <div id="blocklyDiv" style="height: 600px; width: 800px;"></div>
 
   <xml id="toolbox" style="display: none">
-    <category name="Logic">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <category name="If">
         <block type="controls_if"></block>
         <block type="controls_if">
@@ -38,7 +38,7 @@
           <mutation elseif="1" else="1"></mutation>
         </block>
       </category>
-      <category name="Boolean">
+      <category name="Boolean" colour="%{BKY_LOGIC_HUE}">
         <block type="logic_compare"></block>
         <block type="logic_operation"></block>
         <block type="logic_negate"></block>
@@ -47,7 +47,7 @@
         <block type="logic_ternary"></block>
       </category>
     </category>
-    <category name="Loops">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <block type="math_number">
@@ -77,7 +77,7 @@
       <block type="controls_forEach"></block>
       <block type="controls_flow_statements"></block>
     </category>
-    <category name="Math">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number">
         <field name="NUM">123</field>
       </block>
@@ -115,7 +115,7 @@
       </block>
       <block type="math_random_float"></block>
     </category>
-    <category name="Lists">
+    <category name="Lists" colour="%{BKY_LISTS_HUE}">
       <block type="lists_create_empty"></block>
       <block type="lists_create_with"></block>
       <block type="lists_repeat">
@@ -131,8 +131,11 @@
       <block type="lists_getIndex"></block>
       <block type="lists_setIndex"></block>
     </category>
-    <category name="Variables" custom="VARIABLE"></category>
-    <category name="Functions" custom="PROCEDURE"></category>
+    <sep></sep>
+    <category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
+    </category>
+    <category name="Functions" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}">
+    </category>
     <sep></sep>
     <category name="Library" expanded="true">
       <category name="Randomize">
diff --git a/tests/multi_playground.html b/tests/multi_playground.html
index a9ad9f834..afbcbf8cf 100644
--- a/tests/multi_playground.html
+++ b/tests/multi_playground.html
@@ -162,7 +162,7 @@ h1 {
   </xml>
 
   <xml id="toolbox-categories" style="display: none">
-    <category name="Logic" colour="210">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
@@ -171,7 +171,7 @@ h1 {
       <block type="logic_null" disabled="true"></block>
       <block type="logic_ternary"></block>
     </category>
-    <category name="Loops" colour="120">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <shadow type="math_number">
@@ -201,7 +201,7 @@ h1 {
       <block type="controls_forEach"></block>
       <block type="controls_flow_statements"></block>
     </category>
-    <category name="Math" colour="230">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number" gap="32">
         <field name="NUM">123</field>
       </block>
@@ -290,7 +290,7 @@ h1 {
       </block>
       <block type="math_random_float"></block>
     </category>
-    <category name="Text" colour="160">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_join"></block>
       <block type="text_append">
@@ -367,7 +367,7 @@ h1 {
         </value>
       </block>
     </category>
-    <category name="Lists" colour="260">
+    <category name="Lists" colour="%{BKY_LISTS_HUE}">
       <block type="lists_create_with">
         <mutation items="0"></mutation>
       </block>
@@ -418,7 +418,7 @@ h1 {
       </block>
       <block type="lists_sort"></block>
     </category>
-    <category name="Colour" colour="20">
+    <category name="Colour" colour="%{BKY_COLOUR_HUE}">
       <block type="colour_picker"></block>
       <block type="colour_random"></block>
       <block type="colour_rgb">
@@ -457,8 +457,8 @@ h1 {
       </block>
     </category>
     <sep></sep>
-    <category name="Variables" colour="330" custom="VARIABLE"></category>
-    <category name="Functions" colour="290" custom="PROCEDURE"></category>
+    <category name="Variables" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category>
+    <category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category>
   </xml>
 </body>
 </html>
diff --git a/tests/playground.html b/tests/playground.html
index c91703281..745ba0cab 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -401,7 +401,7 @@ h1 {
   Variables category uses untyped variable blocks.
   See https://developers.google.com/blockly/guides/create-custom-blocks/variables#untyped_variable_blocks for more information. -->
   <xml id="toolbox-categories" style="display: none">
-    <category name="Logic" colour="210">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
@@ -410,7 +410,7 @@ h1 {
       <block type="logic_null" disabled="true"></block>
       <block type="logic_ternary"></block>
     </category>
-    <category name="Loops" colour="120">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <shadow type="math_number">
@@ -440,7 +440,7 @@ h1 {
       <block type="controls_forEach"></block>
       <block type="controls_flow_statements"></block>
     </category>
-    <category name="Math" colour="230">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number" gap="32">
         <field name="NUM">123</field>
       </block>
@@ -529,7 +529,7 @@ h1 {
       </block>
       <block type="math_random_float"></block>
     </category>
-    <category name="Text" colour="160">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_join"></block>
       <block type="text_append">
@@ -631,7 +631,7 @@ h1 {
         </value>
       </block>
     </category>
-    <category name="Lists" colour="260">
+    <category name="Lists" colour="%{BKY_LISTS_HUE}">
       <block type="lists_create_with">
         <mutation items="0"></mutation>
       </block>
@@ -683,7 +683,7 @@ h1 {
       <block type="lists_sort"></block>
       <block type="lists_reverse"></block>
     </category>
-    <category name="Colour" colour="20">
+    <category name="Colour" colour="%{BKY_COLOUR_HUE}">
       <block type="colour_picker"></block>
       <block type="colour_random"></block>
       <block type="colour_rgb">
@@ -722,15 +722,15 @@ h1 {
       </block>
     </category>
     <sep></sep>
-    <category name="Variables" colour="330" custom="VARIABLE"></category>
-    <category name="Functions" colour="290" custom="PROCEDURE"></category>
+    <category name="Variables" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category>
+    <category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category>
   </xml>
 
   <!-- toolbox-categories-typed-variables has a category menu and an
   auto-closing flyout.  The Variables category uses typed variable blocks.
   See https://developers.google.com/blockly/guides/create-custom-blocks/variables#typed_variable_blocks for more information. -->
   <xml id="toolbox-categories-typed-variables" style="display: none">
-    <category name="Logic" colour="210">
+    <category name="Logic" colour="%{BKY_LOGIC_HUE}">
       <block type="controls_if"></block>
       <block type="logic_compare"></block>
       <block type="logic_operation"></block>
@@ -739,7 +739,7 @@ h1 {
       <block type="logic_null" disabled="true"></block>
       <block type="logic_ternary"></block>
     </category>
-    <category name="Loops" colour="120">
+    <category name="Loops" colour="%{BKY_LOOPS_HUE}">
       <block type="controls_repeat_ext">
         <value name="TIMES">
           <shadow type="math_number">
@@ -769,7 +769,7 @@ h1 {
       <block type="controls_forEach"></block>
       <block type="controls_flow_statements"></block>
     </category>
-    <category name="Math" colour="230">
+    <category name="Math" colour="%{BKY_MATH_HUE}">
       <block type="math_number" gap="32">
         <field name="NUM">123</field>
       </block>
@@ -858,7 +858,7 @@ h1 {
       </block>
       <block type="math_random_float"></block>
     </category>
-    <category name="Text" colour="160">
+    <category name="Text" colour="%{BKY_TEXTS_HUE}">
       <block type="text"></block>
       <block type="text_join"></block>
       <block type="text_append">
@@ -960,7 +960,7 @@ h1 {
         </value>
       </block>
     </category>
-    <category name="Lists" colour="260">
+    <category name="Lists" colour="%{BKY_LISTS_HUE}">
       <block type="lists_create_with">
         <mutation items="0"></mutation>
       </block>
@@ -1012,7 +1012,7 @@ h1 {
       <block type="lists_sort"></block>
       <block type="lists_reverse"></block>
     </category>
-    <category name="Colour" colour="20">
+    <category name="Colour" colour="%{BKY_COLOUR_HUE}">
       <block type="colour_picker"></block>
       <block type="colour_random"></block>
       <block type="colour_rgb">
@@ -1051,8 +1051,8 @@ h1 {
       </block>
     </category>
     <sep></sep>
-    <category name="Variables" colour="310" custom="VARIABLE_DYNAMIC"></category>
-    <category name="Functions" colour="290" custom="PROCEDURE"></category>
+    <category name="Variables" colour="%{BKY_VARIABLES_DYNAMIC_HUE}" custom="VARIABLE_DYNAMIC"></category>
+    <category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category>
   </xml>
 
   <!-- toolbox-test-blocks has a category menu and an auto-closing flyout.