diff --git a/res/controllers/midi-components-0.0.js b/res/controllers/midi-components-0.0.js
index 4e5dec43d16..de21bc40993 100644
--- a/res/controllers/midi-components-0.0.js
+++ b/res/controllers/midi-components-0.0.js
@@ -290,6 +290,12 @@
             print('ERROR: No hotcue number specified for new HotcueButton.');
             return;
         }
+        if (options.colors !== undefined || options.sendRGB !== undefined) {
+            this.colorIdKey = 'hotcue_' + options.number + '_color_id';
+            if (options.colors === undefined) {
+                options.colors = color.predefinedColorsList();
+            }
+        }
         this.number = options.number;
         this.outKey = 'hotcue_' + this.number + '_enabled';
         Button.call(this, options);
@@ -301,8 +307,52 @@
         shift: function () {
             this.inKey = 'hotcue_' + this.number + '_clear';
         },
+        getColor: function() {
+            if (this.colorIdKey !== undefined) {
+                return color.predefinedColorFromId(engine.getValue(this.group,this.colorIdKey));
+            } else {
+                return null;
+            }
+        },
+        output: function(value) {
+            var outval = this.outValueScale(value);
+            // WARNING: outputColor only handles hotcueColors
+            // and there is no hotcueColor for turning the LED
+            // off. So the `send()` function is responsible for turning the 
+            // actual LED off.
+            if (this.colorIdKey !== undefined && outval !== this.off) {
+                this.outputColor(engine.getValue(this.group, this.colorIdKey));
+            } else {
+                this.send(outval);
+            }
+        },
+        outputColor: function (id) {
+            var color = this.colors[id];
+            if (color instanceof Array) {
+                if (color.length !== 3) {
+                    print("ERROR: invalid color array for id: " + id);
+                    return;
+                }
+                if (this.sendRGB === undefined) {
+                    print("ERROR: no function defined for sending RGB colors");
+                    return;
+                }
+                this.sendRGB(color);
+            } else if (typeof color === 'number') {
+                this.send(color);
+            }
+        },
+        connect: function() {
+            Button.prototype.connect.call(this); // call parent connect
+            if (undefined !== this.group && this.colorIdKey !== undefined) {
+                this.connections[1] = engine.makeConnection(this.group, this.colorIdKey, function (id) {
+                    if (engine.getValue(this.group,this.outKey)) {
+                        this.outputColor(id);
+                    }
+                });
+            }
+        },
     });
-
     var SamplerButton = function (options) {
         if (options.number === undefined) {
             print('ERROR: No sampler number specified for new SamplerButton.');