diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx
index 9826a901..17a567d3 100644
--- a/client/src/components/instance.component.jsx
+++ b/client/src/components/instance.component.jsx
@@ -1,6 +1,7 @@
 const preact = require('preact');
 // const key = require('keymaster');
 const range = require('lodash/range');
+const mapValues = require('loadsh/mapValues');
 
 const VboxContainer = require('./vbox.container');
 const InfoContainer = require('./info.container');
@@ -46,6 +47,13 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
             <figcaption>{SPECS[s].caption}</figcaption>
         </figure>
     ));
+    const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green;
+    const colours = mapValues(cryp.colours, c => {
+        if (cTotal === 0) return 245;
+        return Math.floor(c / cTotal * 255);
+    });
+    const alpha = cTotal === 0 ? 1 : 0.75;
+    const border = { border: `1px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
 
     return (
         <div
@@ -53,6 +61,7 @@ function Cryp(cryp, sendVboxApply, setInfo, activeVar) {
             className="cryp-box"
             onDragOver={onDragOver}
             onDrop={onDrop}
+            style={border}
             >
             <div className="cryp-box-top">
                 <figure className="img" onClick={onClick}>