diff --git a/_sparkle-settings.scss b/_sparkle-settings.scss
index 39ba4ad..1ab8736 100644
--- a/_sparkle-settings.scss
+++ b/_sparkle-settings.scss
@@ -9,6 +9,7 @@ $settings: (
   'loop-mq': true,
   'print-classes': true,
   'system-color': true,
+  'system-color-states': true,
   'system-grid': true,
   'system-spacing': true,
   'system-font-family': true,
diff --git a/systems/color/_mixin.scss b/systems/color/_mixin.scss
new file mode 100644
index 0000000..b729bf9
--- /dev/null
+++ b/systems/color/_mixin.scss
@@ -0,0 +1,36 @@
+@mixin sparkle-loop-states {
+  @if settings(system-color-states) {
+    &,
+    &\:hover:hover,
+    &\:active:active,
+    &\:focus:focus {
+        @content;
+    }
+  }
+  @else {
+    @content;
+  }
+
+  @if settings(system-color-states) and settings(loop-mq) {
+    // This is a variation on the loop-mq mixin
+    @each $key, $val in $media-queries {
+        // Checks that the media query is a number
+        @if $val != $val + "" {
+            @media (min-width: #{$val}) {
+                &\@#{$key},
+                &\@#{$key}\:hover:hover,
+                &\@#{$key}\:active:active,
+                &\@#{$key}\:focus:focus {
+                    @content;
+                }
+            }
+        }
+    }
+  }
+  @else if settings(loop-mq) {
+    @include loop-mq {
+      @content;
+    }
+  }
+}
+
diff --git a/systems/color/_test.scss b/systems/color/_test.scss
index e69de29..46a0e92 100644
--- a/systems/color/_test.scss
+++ b/systems/color/_test.scss
@@ -0,0 +1,50 @@
+@import 'true';
+$sparkle-show-docs: false;
+
+@import 'mixin';
+
+$settings: (
+  'loop-mq': true,
+  'system-color-states': true
+);
+
+$media-queries: (
+  'sm': 40rem,
+);
+
+$colors: (
+  'primary': deeppink,
+);
+
+
+
+@include describe('The color function and state mixin') {
+  @include it('outputs the media-query properties and state classes of the loop.') {
+    @include assert {
+      @include output {
+        .test {
+          @include sparkle-loop-states {
+            color: deeppink;
+          }
+        }
+      }
+      @include expect {
+        .test,
+        .test\:hover:hover,
+        .test\:active:active,
+        .test\:focus:focus {
+          color: deeppink;
+        }
+
+        @media (min-width: 40rem) {
+          .test\@sm,
+          .test\@sm\:hover:hover,
+          .test\@sm\:active:active,
+          .test\@sm\:focus:focus {
+            color: deeppink;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/systems/color/background/_utility.scss b/systems/color/background/_utility.scss
index eec298a..5b4ff57 100644
--- a/systems/color/background/_utility.scss
+++ b/systems/color/background/_utility.scss
@@ -1,3 +1,5 @@
+@import '../mixin';
+
 @if settings('utility-background-color') {
   @if $sparkle-show-docs {
     /* ---
@@ -34,11 +36,8 @@
       */
     }
 
-    .#{settings(prefix)}-background-color-#{$key},
-    .#{settings(prefix)}-background-color-#{$key}\:hover:hover,
-    .#{settings(prefix)}-background-color-#{$key}\:active:active,
-    .#{settings(prefix)}-background-color-#{$key}\:focus:focus {
-      @include loop-mq {
+    .#{settings(prefix)}-background-color-#{$key} {
+      @include sparkle-loop-states {
         background-color: $val;
       }
     }
diff --git a/systems/color/border/_utility.scss b/systems/color/border/_utility.scss
index 046ee6b..0a12713 100644
--- a/systems/color/border/_utility.scss
+++ b/systems/color/border/_utility.scss
@@ -1,3 +1,5 @@
+@import '../mixin';
+
 @if settings('utility-border-color') {
   @if $sparkle-show-docs {
     /* ---
@@ -32,11 +34,8 @@
       </tr>
       */
     }
-    .#{settings(prefix)}-border-color-#{$key},
-    .#{settings(prefix)}-border-color-#{$key}\:hover:hover,
-    .#{settings(prefix)}-border-color-#{$key}\:active:active,
-    .#{settings(prefix)}-border-color-#{$key}\:focus:focus {
-      @include loop-mq {
+    .#{settings(prefix)}-border-color-#{$key} {
+      @include sparkle-loop-states {
         border-color: $val;
       }
     }
diff --git a/systems/color/foreground/_utility.scss b/systems/color/foreground/_utility.scss
index 0c17fa4..f29661c 100644
--- a/systems/color/foreground/_utility.scss
+++ b/systems/color/foreground/_utility.scss
@@ -1,3 +1,5 @@
+@import '../mixin';
+
 @if settings('utility-foreground-color') {
   @if $sparkle-show-docs {
     /* ---
@@ -32,11 +34,8 @@
       </tr>
       */
     }
-    .#{settings(prefix)}-color-#{$key},
-    .#{settings(prefix)}-color-#{$key}\:hover:hover,
-    .#{settings(prefix)}-color-#{$key}\:active:active,
-    .#{settings(prefix)}-color-#{$key}\:focus:focus {
-      @include loop-mq {
+    .#{settings(prefix)}-color-#{$key} {
+      @include sparkle-loop-states {
         color: $val;
       }
     }
diff --git a/systems/color/outline/_utility.scss b/systems/color/outline/_utility.scss
index 0469915..11a1887 100644
--- a/systems/color/outline/_utility.scss
+++ b/systems/color/outline/_utility.scss
@@ -1,3 +1,5 @@
+@import '../mixin';
+
 @if settings('utility-outline-color') {
   @if $sparkle-show-docs {
     /* ---
@@ -33,11 +35,8 @@
       */
     }
 
-    .#{settings(prefix)}-outline-#{$key},
-    .#{settings(prefix)}-outline-#{$key}\:hover:hover,
-    .#{settings(prefix)}-outline-#{$key}\:active:active,
-    .#{settings(prefix)}-outline-#{$key}\:focus:focus {
-      @include loop-mq {
+    .#{settings(prefix)}-outline-#{$key} {
+      @include sparkle-loop-states {
         outline-color: $val;
       }
     }
diff --git a/systems/color/text-decoration/_utility.scss b/systems/color/text-decoration/_utility.scss
index 7b31359..9c875ff 100644
--- a/systems/color/text-decoration/_utility.scss
+++ b/systems/color/text-decoration/_utility.scss
@@ -1,3 +1,5 @@
+@import '../mixin';
+
 @if settings('utility-text-decoration-color') {
   @if $sparkle-show-docs {
     /* ---
@@ -34,11 +36,8 @@
       </tr>
       */
     }
-    .#{settings(prefix)}-decoration-color-#{$key},
-    .#{settings(prefix)}-decoration-color-#{$key}\:hover:hover,
-    .#{settings(prefix)}-decoration-color-#{$key}\:active:active,
-    .#{settings(prefix)}-decoration-color-#{$key}\:focus:focus {
-      @include loop-mq {
+    .#{settings(prefix)}-decoration-color-#{$key} {
+      @include sparkle-loop-states {
         text-decoration-color: $val;
       }
     }
diff --git a/test/test.scss b/test/test.scss
index 96c78cd..7d3e746 100644
--- a/test/test.scss
+++ b/test/test.scss
@@ -33,6 +33,7 @@
 @import "../systems/color/border/test";
 @import "../systems/color/outline/test";
 @import "../systems/color/text-decoration/test";
+@import "../systems/color/test";
 @import "../systems/z-index/test";
 @import "../systems/font/family/test";
 @import "../systems/font/size/test";