diff --git a/src/js/viz_circles.js b/src/js/viz_circles.js
index 9ec8e03..2b5651b 100644
--- a/src/js/viz_circles.js
+++ b/src/js/viz_circles.js
@@ -1,3 +1,5 @@
+import * as u from './utils.js';
+
 export default class Circles {
   constructor(canvas, options={}) {
     this.canvas = canvas;
@@ -56,10 +58,9 @@ export default class Circles {
   }
 
   getColor(noteNumber) {
-    if (noteNumber == 0) {
-      return '#E74C3C';
-    }
-    return '#95A5A6';
+    return u.sprintf(
+        'rgb($, $, $)',
+        50, 150, Math.floor(255 - (255 / this.numBeats) * noteNumber));
   }
 
   /** Change how many beats per measure. */
diff --git a/src/js/viz_squares.js b/src/js/viz_squares.js
index 333562b..edf55a1 100644
--- a/src/js/viz_squares.js
+++ b/src/js/viz_squares.js
@@ -1,3 +1,5 @@
+import * as u from './utils.js';
+
 export default class Squares {
   constructor(canvas, options={}) {
     this.canvas = canvas;
@@ -41,10 +43,9 @@ export default class Squares {
   }
 
   getColor(noteNumber) {
-    if (noteNumber == 0) {
-      return '#E74C3C';
-    }
-    return '#95A5A6';
+    return u.sprintf(
+        'rgb($, $, $)',
+        50, 150, Math.floor(255 - (255 / this.numBeats) * noteNumber));
   }
 
   /** Change how many beats per measure. */