diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
index 2ec4ac425b1..5ea4b6bf806 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
@@ -131,29 +131,29 @@
 /// @group Palettes
 /// @param {Color} $color - The base color to be used to generate a color shade.
 /// @param {number|string} $shade - The shade.
-@function _gen-gray($color, $shade) {
-    $lumen: luminance($color);
+@function _gen-gray($color, $shade, $base) {
+    $lumen: luminance($base);
 
     @if ($shade == 50) {
-        @return change-color($color, $lightness: if($lumen < .5, 98%, 13%));
+        @return change-color($color, $lightness: if($lumen > .5, 98%, 13%));
     } @else if ($shade == 100) {
-        @return change-color($color, $lightness: if($lumen < .5, 96%, 26%));
+        @return change-color($color, $lightness: if($lumen > .5, 96%, 26%));
     } @else if ($shade == 200) {
-        @return change-color($color, $lightness: if($lumen < .5, 93%, 38%));
+        @return change-color($color, $lightness: if($lumen > .5, 93%, 38%));
     } @else if ($shade == 300) {
-        @return change-color($color, $lightness: if($lumen < .5, 88%, 54%));
+        @return change-color($color, $lightness: if($lumen > .5, 88%, 54%));
     } @else if ($shade == 400) {
-        @return change-color($color, $lightness: if($lumen < .5, 74%, 62%));
+        @return change-color($color, $lightness: if($lumen > .5, 74%, 62%));
     } @else if ($shade == 500) {
-        @return change-color($color, $lightness: if($lumen < .5, 62%, 74%));
+        @return change-color($color, $lightness: if($lumen > .5, 62%, 74%));
     } @else if ($shade == 600) {
-        @return change-color($color, $lightness: if($lumen < .5, 54%, 88%));
+        @return change-color($color, $lightness: if($lumen > .5, 54%, 88%));
     } @else if ($shade == 700) {
-        @return change-color($color, $lightness: if($lumen < .5, 38%, 93%));
+        @return change-color($color, $lightness: if($lumen > .5, 38%, 93%));
     } @else if ($shade == 800) {
-        @return change-color($color, $lightness: if($lumen < .5, 26%, 96%));
+        @return change-color($color, $lightness: if($lumen > .5, 26%, 96%));
     } @else if ($shade == 900) {
-        @return change-color($color, $lightness: if($lumen < .5, 13%, 98%));
+        @return change-color($color, $lightness: if($lumen > .5, 13%, 98%));
     }
 }
 
@@ -164,69 +164,69 @@
 /// @param {number|string} $variant - The target shade variant.
 /// @param {number|string} $theme - The target theme variant.
 /// @param {String} $prefix [igx] - The prefix for the color variant.
-@function gen-hsla-color($name, $variant, $theme, $color, $prefix: 'igx') {
+@function gen-hsla-color($name, $variant, $theme, $color, $prefix: 'igx', $base) {
     $h: var(--#{$prefix}-#{$name}-h);
     $s: var(--#{$prefix}-#{$name}-s);
     $l: var(--#{$prefix}-#{$name}-l);
-    $lumen: luminance($color);
+    $lumen: luminance($base);
 
     @if ($variant == 50) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 98%, 13%)};
+            @return #{$h, $s, if($lumen > .5, 98%, 13%)};
         } @else {
             @return #{$h, calc(#{$s} * 1.23), calc(#{$l} * 1.78)};
         }
     } @else if ($variant == 100) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 96%, 26%)};
+            @return #{$h, $s, if($lumen > .5, 96%, 26%)};
         } @else {
             @return #{$h, calc(#{$s} / 1.25), calc(#{$l} * 1.66)};
         }
     } @else if ($variant == 200) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 93%, 38%)};
+            @return #{$h, $s, if($lumen > .5, 93%, 38%)};
         } @else {
             @return #{$h, calc(#{$s} * .64), calc(#{$l} * 1.43)};
         }
     } @else if ($variant == 300) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 88%, 54%)};
+            @return #{$h, $s, if($lumen > .5, 88%, 54%)};
         } @else {
             @return #{$h, calc(#{$s} * .73), calc(#{$l} * 1.19)};
         }
     } @else if ($variant == 400) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 74%, 62%)};
+            @return #{$h, $s, if($lumen > .5, 74%, 62%)};
         } @else {
             @return #{$h, calc(#{$s} * .875), calc(#{$l} * 1.08)};
         }
     } @else if ($variant == 500) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 62%, 72%)};
+            @return #{$h, $s, if($lumen > .5, 62%, 72%)};
         } @else {
             @return #{$h, $s, $l};
         }
     } @else if ($variant == 600) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 54%, 88%)};
+            @return #{$h, $s, if($lumen > .5, 54%, 88%)};
         } @else {
             @return #{$h, calc(#{$s} * 1.26), calc(#{$l} * .89)};
         }
     } @else if ($variant == 700) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 38%, 93%)};
+            @return #{$h, $s, if($lumen > .5, 38%, 93%)};
         } @else {
             @return #{$h, calc(#{$s} * 1.52), calc(#{$l} * .81)};
         }
     } @else if ($variant == 800) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 26%, 96%)};
+            @return #{$h, $s, if($lumen > .5, 26%, 96%)};
         } @else {
             @return #{$h, calc(#{$s} * 1.5), calc(#{$l} * .73)};
         }
     } @else if ($variant == 900) {
         @if $name == 'grays' or $name == 'gray' {
-            @return #{$h, $s, if($lumen < .5, 13%, 98%)};
+            @return #{$h, $s, if($lumen > .5, 13%, 98%)};
         } @else {
             @return #{$h, calc(#{$s} * 1.34), calc(#{$l} * .64)};
         }
@@ -283,7 +283,7 @@
 @function grayscale-palette($color, $shades, $base: #fff) {
     $result: ();
     @each $shade in $shades {
-        $gray-shade: _gen-gray($color, $shade);
+        $gray-shade: _gen-gray($color, $shade, $base);
         $contrast: text-contrast(to-opaque($gray-shade, $base, null));
 
         $result: map-merge($result, (
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss
index 7d1ff77627b..85ca41b8587 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss
@@ -200,6 +200,7 @@
     $_meta: map.get($palette, '_meta');
     $theme: if($_meta, map.get($_meta, 'variant'), null);
     $gray: if($_meta, map.get($_meta, 'grays'), #fff);
+    $surface: map.get(map.get($palette, 'surface'), 500);
 
     #{$scope} {
         @each $name, $color in $palette {
@@ -233,9 +234,9 @@
 
                 @if $_valid-base and $_valid-variant {
                     @if $prefix == 'igc' and $name == 'grays' {
-                        --#{$prefix}-gray-#{$variant}: #{gen-hsla-color('gray', $variant, $theme, $gray, #{$prefix})};
+                        --#{$prefix}-gray-#{$variant}: #{gen-hsla-color('gray', $variant, $theme, $gray, #{$prefix}, $surface)};
                     } @else {
-                        --#{$prefix}-#{$name}-#{$variant}: #{gen-hsla-color($name, $variant, $theme, $gray, #{$prefix})};
+                        --#{$prefix}-#{$name}-#{$variant}: #{gen-hsla-color($name, $variant, $theme, $gray, #{$prefix}, $surface)};
                     }
                 } @else if $name != '_meta' {
                     @if $prefix == 'igc' and $name == 'grays' {