diff --git a/src/@fuse/scss/partials/_colors.scss b/src/@fuse/scss/partials/_colors.scss
index c68b3f01..7950231a 100644
--- a/src/@fuse/scss/partials/_colors.scss
+++ b/src/@fuse/scss/partials/_colors.scss
@@ -13,10 +13,10 @@
 
         // If it's a light theme, use a darker background
         // color other than the default #fafafa
-        @if ($is-dark == false) {
-            background: #F5F5F5;
-        } @else {
+        @if ($is-dark) {
             background: map-get($background, background);
+        } @else {
+            background: #F5F5F5;
         }
     }
 
@@ -300,7 +300,8 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
                 }
 
                 // Run the generator one more time for default values (500)
-                @if ($hue == 500) {
+                // if we are not working with primary, accent or warn palettes
+                @if ($hue == 500 and $paletteName != 'primary' and $paletteName != 'accent' and $paletteName != 'warn') {
 
                     // Generate color classes
                     @include generate-color-classes($paletteName, $color, $contrast, '');
@@ -318,6 +319,33 @@ $matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A70
                 }
             }
         }
+
+        // Run the generator again for the selected default hue values for
+        // primary, accent and warn palettes
+        //
+        // We are doing this because the default hue value can be changed
+        // by the user when the Material theme being generated.
+        @if ($paletteName == 'primary' or $paletteName == 'accent' or $paletteName == 'warn') {
+
+            // Get the color and the contrasting color for the selected
+            // default hue
+            $color: map-get($palette, 'default');
+            $contrast: map-get($palette, 'default-contrast');
+
+            // Generate color classes
+            @include generate-color-classes($paletteName, $color, $contrast, '');
+
+            // Add color to the correct list depending on the contrasting color
+
+            // If the contrast color is dark
+            @if (rgba(black, 1) == rgba($contrast, 1)) {
+                $dark-contrasting-classes: append($dark-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
+            }
+                // if the contrast color is light
+            @else {
+                $light-contrasting-classes: append($light-contrasting-classes, unquote('.#{$paletteName}'), 'comma');
+            }
+        }
     }
 
     // Generate contrasting colors
diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss
index dbb249a7..8025cabe 100644
--- a/src/app/app.theme.scss
+++ b/src/app/app.theme.scss
@@ -187,13 +187,13 @@ body.theme-default {
     @include components-theme($theme);
 
     // Generate Fuse color classes for primary, accent and warn colors
-    $custom-palettes: (
+    $palettes: (
         primary: $default-primary-palette,
         accent: $default-accent-palette,
         warn: $default-warn-palette
     );
 
-    @include fuse-color-classes($custom-palettes);
+    @include fuse-color-classes($palettes);
 }
 
 // -----------------------------------------------------------------------------------------------------
@@ -222,13 +222,13 @@ body.theme-yellow-light {
     @include components-theme($yellow-light-theme);
 
     // Generate Fuse color classes for primary, accent and warn colors
-    $custom-palettes: (
+    $palettes: (
         primary: $yellow-light-theme-primary-palette,
         accent: $yellow-light-theme-accent-palette,
         warn: $yellow-light-theme-warn-palette
     );
 
-    @include fuse-color-classes($custom-palettes);
+    @include fuse-color-classes($palettes);
 }
 
 // -----------------------------------------------------------------------------------------------------
@@ -257,13 +257,13 @@ body.theme-blue-gray-dark {
     @include components-theme($blue-gray-dark-theme);
 
     // Generate Fuse color classes for primary, accent and warn colors
-    $custom-palettes: (
+    $palettes: (
         primary: $blue-gray-dark-theme-primary-palette,
         accent: $blue-gray-dark-theme-accent-palette,
         warn: $blue-gray-dark-theme-warn-palette
     );
 
-    @include fuse-color-classes($custom-palettes);
+    @include fuse-color-classes($palettes);
 }
 
 // -----------------------------------------------------------------------------------------------------
@@ -292,11 +292,11 @@ body.theme-pink-dark {
     @include components-theme($pink-dark-theme);
 
     // Generate Fuse color classes for primary, accent and warn colors
-    $custom-palettes: (
+    $palettes: (
         primary: $pink-dark-theme-primary-palette,
         accent: $pink-dark-theme-accent-palette,
         warn: $pink-dark-theme-warn-palette
     );
 
-    @include fuse-color-classes($custom-palettes);
+    @include fuse-color-classes($palettes);
 }
\ No newline at end of file
diff --git a/src/app/main/ui/colors/colors.component.html b/src/app/main/ui/colors/colors.component.html
index ea871540..3a19941c 100644
--- a/src/app/main/ui/colors/colors.component.html
+++ b/src/app/main/ui/colors/colors.component.html
@@ -67,7 +67,9 @@
 
                 <div class="colored-bg p-8" fxLayout="row" [ngClass]="selectedColor">
 
-                    <div class="colored-bg p-8" fxFlex="30" fxLayoutAlign="start center">500</div>
+                    <div class="colored-bg p-8" fxFlex="30" fxLayoutAlign="start center">
+                        Default
+                    </div>
 
                     <div class="colored-bg p-8" [ngClass]="selectedColor" fxFlex="30">
                         <div class="pb-4">.{{selectedColor}}</div>