diff --git a/src/components/list/demoBasicUsage/index.html b/src/components/list/demoBasicUsage/index.html
index 90adad34785..74c640488dc 100644
--- a/src/components/list/demoBasicUsage/index.html
+++ b/src/components/list/demoBasicUsage/index.html
@@ -2,7 +2,7 @@
 
   <div flex-gt-sm="50" flex>
 
-    <md-toolbar layout="row" class="md-hue-2">
+    <md-toolbar layout="row" class="md-hue-3">
       <div class="md-toolbar-tools">
         <span>Normal</span>
       </div>
@@ -74,7 +74,7 @@ <h3> {{ phone.number }} </h3>
 
   <div flex-gt-sm="50" flex>
 
-    <md-toolbar layout="row" class="md-hue-2">
+    <md-toolbar layout="row" class="md-hue-3">
       <div class="md-toolbar-tools">
         <span>Dense</span>
       </div>
diff --git a/src/core/style/mixins.scss b/src/core/style/mixins.scss
index c3224a685c7..45974f3ff37 100644
--- a/src/core/style/mixins.scss
+++ b/src/core/style/mixins.scss
@@ -22,7 +22,7 @@
   // won't be set on the most browsers.
   @each $pseudo in $pseudos {
     &#{$pseudo} {
-      color: $color;
+      color: unquote($color);
     }
   }
 }