diff --git a/src/generators/backgrounds.less b/src/generators/backgrounds.less
index c4d533ebf..3c989a981 100644
--- a/src/generators/backgrounds.less
+++ b/src/generators/backgrounds.less
@@ -1,27 +1,18 @@
-.generate-bg-color-utility(@name; @variant; @color) when (@variant = default) {
-  .define-selector(~"bg-@{name}"; { background-color: @color; });
+.define-bg-color(@color-name; @variants) {
+  .generate-utility-variants(~"bg-@{color-name}"; @variants; {
+    background-color: extract(@__variant-value, 2);
+  });
 }
 
-.generate-bg-color-utility(@name; @variant; @color) when not (@variant = default) {
-  .define-selector(~"bg-@{name}-@{variant}"; { background-color: @color; });
+.define-bg-color(@color-name; @variants; none) {
+  .define-bg-color(@color-name; @variants);
 }
 
-.generate-bg-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 1) {
-  @variant-name: extract(@color-variants, 1);
-  @variant-color: extract(@color-variants, 2);
-
-  .generate-bg-color-utility(@color-name; @variant-name; @variant-color);
+.define-bg-color(@color-name; @variants; @screens) when not (@screens = none) {
+  .define-bg-color(@color-name; @variants);
+  .generate-responsive-utility-variants(~"bg-@{color-name}"; @variants; @screens; {
+    background-color: extract(@__variant-value, 2);
+  });
 }
 
-.generate-bg-color-utilities(@color-name; @color-variants; @i: 1) when (@i <= length(@color-variants)) and (length(extract(@color-variants, @i)) = 2) {
-  @variant: extract(@color-variants, @i);
-  @variant-name: extract(@variant, 1);
-  @variant-color: extract(@variant, 2);
 
-  .generate-bg-color-utility(@color-name; @variant-name; @variant-color);
-  .generate-bg-color-utilities(@color-name; @color-variants; @i + 1);
-}
-
-.define-bg-color(@color-name; @color-variants) {
-    .generate-bg-color-utilities(@color-name; @color-variants);
-}
diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less
index 10025fa96..ddbff7152 100644
--- a/src/utilities/backgrounds.less
+++ b/src/utilities/backgrounds.less
@@ -6,26 +6,15 @@
 @bg-dark-soft: hsl(0, 0%, 42%);
 @bg-dark-softer: hsl(0, 0%, 52%);
 
-.bg-light { background-color: @bg-light; }
-.bg-light-soft { background-color: @bg-light-soft; }
-.bg-light-softer { background-color: @bg-light-softer; }
+@bg-light-scale:
+  default @bg-light,
+  'soft' @bg-light-soft,
+  'softer' @bg-light-softer;
 
-.hover-bg-light { &:hover { .bg-light; } }
-.hover-bg-light-soft { &:hover { .bg-light-soft; } }
-.hover-bg-light-softer { &:hover { .bg-light-softer; } }
+@bg-dark-scale:
+  default @bg-dark,
+  'soft' @bg-dark-soft,
+  'softer' @bg-dark-softer;
 
-.bg-dark { background-color: @bg-dark; }
-.bg-dark-soft { background-color: @bg-dark-soft; }
-.bg-dark-softer { background-color: @bg-dark-softer; }
-
-.bg-overlay-softest { background-color: rgba(0,0,0,0.15); }
-.bg-overlay-soft { background-color: rgba(0,0,0,0.5); }
-.bg-overlay-dark { background-color: rgba(0,0,0,0.75); }
-
-.responsive({
-  &bg-light { .bg-light; }
-  &bg-light-soft { .bg-light-soft; }
-  &bg-light-softer { .bg-light-softer; }
-  &bg-overlay-soft { .bg-overlay-soft; }
-  &bg-overlay-dark { .bg-overlay-dark; }
-});
+.define-bg-color('light'; @bg-light-scale; @screens);
+.define-bg-color('dark'; @bg-dark-scale; @screens);