diff --git a/app/assets/stylesheets/chords.css.scss b/app/assets/stylesheets/chords.css.scss
deleted file mode 100644
index f233836..0000000
--- a/app/assets/stylesheets/chords.css.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.chords-2 { width: 4em; }
-.chords-3 { width: 7em; }
-.chords-4 { width: 9em; }
-.chords-5 { width: 11em; }
-.chords-6 { width: 13em; }
-.chords-7 { width: 15em; }
-.chords-8 { width: 18em; }
-
-.chord-C  { background: #F0838B; }
-.chord-Am { background: #D4747B; }
-.chord-G  { background: #B8DA89; }
-.chord-Em { background: #A3C17B; }
-.chord-D  { background: #838DD5; }
-.chord-A  { background: #F79D6F; }
-.chord-E  { background: #5DC3F3; }
-.chord-B  { background: #84E2A1; }
-.chord-F  { background: #76DBD3; }
-.chord-Dm { background: #6AC3BB; }
-
-.chord-G⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #B8DA89,
-    #B8DA89 5px,
-    #A3C17B 5px,
-    #A3C17B 10px
-  );
-}
-.chord-D⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #838DD5,
-    #838DD5 5px,
-    #746AAF 5px,
-    #746AAF 10px
-  );
-}
-.chord-A⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #F59D6F,
-    #F59D6F 5px,
-    #D4885F 5px,
-    #D4885F 10px
-  );
-}
-.chord-E⁷ {
-  background: repeating-linear-gradient(
-    45deg,
-    #5DC3F3,
-    #5DC3F3 5px,
-    #53ACD6 5px,
-    #53ACD6 10px
-  );
-}
diff --git a/app/assets/stylesheets/chords.css.scss.erb b/app/assets/stylesheets/chords.css.scss.erb
new file mode 100644
index 0000000..32e569f
--- /dev/null
+++ b/app/assets/stylesheets/chords.css.scss.erb
@@ -0,0 +1,51 @@
+$stripe: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxIDUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3BhY2l0eT0iMC40Ij4NCjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSI1IiBzdHlsZT0ic3Ryb2tlOnJnYigwLDAsMCk7c3Ryb2tlLXdpZHRoOjEiIC8+DQo8L3N2Zz4NCg==');
+$seventh: top left/1px 5px repeat-x $stripe;
+$minor: bottom left/1px 5px repeat-x $stripe;
+$minor_7th: 0px 0px/48px 24px url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4xLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNi43IDE0LjIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2LjcgMTQuMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgb3BhY2l0eT0iMC40Ij4NCjx0ZXh0IHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIDEgMCAxMC4yOTc5KSIgZm9udC1mYW1pbHk9IidBcmlhbE1UJyIgZm9udC1zaXplPSIxMiI+bTc8L3RleHQ+DQo8L3N2Zz4NCg==');
+
+$base_C: #F0838B;
+$base_C♯: #AE75B2;
+$base_G: #B8DA89;
+$base_G♯: #FFF887;
+$base_D: #939DE5;
+$base_D♯: #EF83B4;
+$base_A: #F79D6F;
+$base_A♯: #888;
+$base_E: #5DC3F3;
+$base_B: #84E2A1;
+$base_F: #76DBD3;
+$base_F♯: #FBBA76;
+
+.chords-2 { width: 4em; }
+.chords-3 { width: 7em; }
+.chords-4 { width: 9em; }
+.chords-5 { width: 11em; }
+.chords-6 { width: 13em; }
+.chords-7 { width: 15em; }
+.chords-8 { width: 18em; }
+
+.chord-C   { background: $base_C; }
+.chord-Cm  { background: $base_C $minor; }
+.chord-C⁷  { background: $base_C $seventh; }
+.chord-C♯m { background: $base_C♯ $minor; }
+.chord-G   { background: $base_G; }
+.chord-Gm  { background: $base_G $minor; }
+.chord-G⁷  { background: $base_G $seventh; }
+.chord-G♯m { background: $base_G♯ $minor; }
+.chord-D   { background: $base_D; }
+.chord-Dm  { background: $base_D $minor; }
+.chord-D⁷  { background: $base_D $seventh; }
+.chord-Dm⁷ { background: $base_D $minor_7th; }
+.chord-D♯m { background: $base_D♯ $minor; }
+.chord-A   { background: $base_A; }
+.chord-Am  { background: $base_A $minor; }
+.chord-A⁷  { background: $base_A $seventh; }
+.chord-A♯m { background: $base_A♯ $minor; }
+.chord-E   { background: $base_E; }
+.chord-Em  { background: $base_E $minor; }
+.chord-E⁷  { background: $base_E $seventh; }
+.chord-B   { background: $base_B; }
+.chord-Bm  { background: $base_B $minor; }
+.chord-B⁷  { background: $base_B $seventh; }
+.chord-F   { background: $base_F; }
+.chord-F♯m { background: $base_F♯ $minor; }