diff --git a/package-lock.json b/package-lock.json
index b62dd49b6..6a4be9656 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,7 +66,6 @@
         "postcss": "8.5.3",
         "postcss-advanced-variables": "5.0.0",
         "postcss-cli": "11.0.1",
-        "postcss-color-function": "4.1.0",
         "postcss-custom-properties": "14.0.4",
         "postcss-jsx": "0.36.4",
         "postcss-load-config": "6.0.1",
@@ -6550,33 +6549,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/ansi-styles/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/ansi-styles/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -7573,20 +7545,6 @@
         "axe-core": "^4.3.3"
       }
     },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/chalk-template": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
@@ -8072,17 +8030,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/color": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz",
-      "integrity": "sha512-Ajpjd8asqZ6EdxQeqGzU5WBhhTfJ/0cA4Wlbre7e5vXfmDSmda7Ov6jeKoru+b0vHcb1CqvuroTHp5zIWzhVMA==",
-      "dev": true,
-      "dependencies": {
-        "clone": "^1.0.2",
-        "color-convert": "^1.3.0",
-        "color-string": "^0.3.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -8101,15 +8048,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/color-string": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
-      "integrity": "sha512-sz29j1bmSDfoAxKIEU6zwoIZXN6BrFbAMIhfYCNyiZXBDuU/aiHlN84lp/xDzL2ubyFhLDobHIlU1X70XRrMDA==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "^1.0.0"
-      }
-    },
     "node_modules/color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -8119,30 +8057,6 @@
         "color-support": "bin.js"
       }
     },
-    "node_modules/color/node_modules/clone": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
-      "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/color/node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
-    "node_modules/color/node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
-    },
     "node_modules/colord": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -8684,33 +8598,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-color-function": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/css-color-function/-/css-color-function-1.3.3.tgz",
-      "integrity": "sha512-YD/WhiRZIYgadwFJ48X5QmlOQ/w8Me4yQI6/eSUoiE8spIFp+S/rGpsAH48iyq/0ZWkCDWqVQKUlQmUzn7BQ9w==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "0.1.0",
-        "color": "^0.11.0",
-        "debug": "^3.1.0",
-        "rgb": "~0.1.0"
-      }
-    },
-    "node_modules/css-color-function/node_modules/balanced-match": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.1.0.tgz",
-      "integrity": "sha512-4xb6XqAEo3Z+5pEDJz33R8BZXI8FRJU+cDNLdKgDpmnz+pKKRVYLpdv+VvUAC7yUhBMj4izmyt19eCGv1QGV7A==",
-      "dev": true
-    },
-    "node_modules/css-color-function/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -11164,15 +11051,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
@@ -16925,47 +16803,6 @@
         }
       }
     },
-    "node_modules/postcss-color-function": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-color-function/-/postcss-color-function-4.1.0.tgz",
-      "integrity": "sha512-2/fuv6mP5Lt03XbRpVfMdGC8lRP1sykme+H1bR4ARyOmSMB8LPSjcL6EAI1iX6dqUF+jNEvKIVVXhan1w/oFDQ==",
-      "dev": true,
-      "dependencies": {
-        "css-color-function": "~1.3.3",
-        "postcss": "^6.0.23",
-        "postcss-message-helpers": "^2.0.0",
-        "postcss-value-parser": "^3.3.1"
-      }
-    },
-    "node_modules/postcss-color-function/node_modules/postcss": {
-      "version": "6.0.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.4.1",
-        "source-map": "^0.6.1",
-        "supports-color": "^5.4.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/postcss-color-function/node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
-    },
-    "node_modules/postcss-color-function/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/postcss-colormin": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
@@ -17167,12 +17004,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-message-helpers": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz",
-      "integrity": "sha512-tPLZzVAiIJp46TBbpXtrUAKqedXSyW5xDEo1sikrfEfnTs+49SBZR/xDdqCiJvSSbtr615xDsaMF3RrxS2jZlA==",
-      "dev": true
-    },
     "node_modules/postcss-minify-font-values": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
@@ -18673,15 +18504,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/rgb": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/rgb/-/rgb-0.1.0.tgz",
-      "integrity": "sha512-F49dXX73a92N09uQkfCp2QjwXpmJcn9/i9PvjmwsSIXUGqRLCf/yx5Q9gRxuLQTq248kakqQuc8GX/U/CxSqlA==",
-      "dev": true,
-      "bin": {
-        "rgb": "bin/rgb"
-      }
-    },
     "node_modules/rimraf": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.5.tgz",
@@ -19708,18 +19530,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
diff --git a/package.json b/package.json
index b31eb4306..407fdbfdd 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,6 @@
     "postcss": "8.5.3",
     "postcss-advanced-variables": "5.0.0",
     "postcss-cli": "11.0.1",
-    "postcss-color-function": "4.1.0",
     "postcss-custom-properties": "14.0.4",
     "postcss-jsx": "0.36.4",
     "postcss-load-config": "6.0.1",
diff --git a/packages/uui-css/lib/custom-properties/palette.css b/packages/uui-css/lib/custom-properties/palette.css
index f77d7a901..d5e73889d 100644
--- a/packages/uui-css/lib/custom-properties/palette.css
+++ b/packages/uui-css/lib/custom-properties/palette.css
@@ -5,187 +5,428 @@
 :root {
   $deep-saffron: #f79c37;
   --uui-palette-deep-saffron: $deep-saffron;
-  --uui-palette-deep-saffron-light: color($deep-saffron lightness(+ 10%));
-  --uui-palette-deep-saffron-dark: color($deep-saffron blackness(+ 10%));
-  --uui-palette-deep-saffron-dimmed: color(
+  --uui-palette-deep-saffron-light: rgb(
+    249,
+    181,
+    103
+  ); /* color($deep-saffron lightness(+ 10%)) */
+  --uui-palette-deep-saffron-dark: rgb(
+    222,
+    145,
+    56
+  ); /* color($deep-saffron blackness(+ 10%)); */
+  --uui-palette-deep-saffron-dimmed: rgb(
+    166,
+    150,
+    133
+  ); /* color(
     $deep-saffron saturation(- 74%) blackness(+ 1%)
-  );
+  ); */
 
   $sunglow: #fad634;
   --uui-palette-sunglow: $sunglow;
-  --uui-palette-sunglow-light: color($sunglow lightness(+ 10%));
-  --uui-palette-sunglow-dark: color($sunglow blackness(+ 10%));
-  --uui-palette-sunglow-dimmed: color(
+  --uui-palette-sunglow-light: rgb(
+    251,
+    224,
+    101
+  ); /* color($sunglow lightness(+ 10%)); */
+  --uui-palette-sunglow-dark: rgb(
+    224,
+    193,
+    51
+  ); /* color($sunglow blackness(+ 10%)); */
+  --uui-palette-sunglow-dimmed: rgb(
+    166,
+    160,
+    133
+  ); /* color(
     $sunglow saturation(- 78%) blackness(+ 1%)
-  );
+  ); */
 
   $spanish-pink: #f5c1bc;
   --uui-palette-spanish-pink: $spanish-pink;
-  --uui-palette-spanish-pink-light: color($spanish-pink lightness(+ 5%));
-  --uui-palette-spanish-pink-dark: color($spanish-pink blackness(+ 5%));
-  --uui-palette-spanish-pink-dimmed: color(
+  --uui-palette-spanish-pink-light: rgb(
+    248,
+    214,
+    211
+  ); /* color($spanish-pink lightness(+ 5%)); */
+  --uui-palette-spanish-pink-dark: rgb(
+    232,
+    192,
+    189
+  ); /* color($spanish-pink blackness(+ 5%)); */
+  --uui-palette-spanish-pink-dimmed: rgb(
+    219,
+    212,
+    212
+  ); /* color(
     $spanish-pink saturation(- 60%) blackness(+ 1%)
-  );
+  ); */
 
   $gunmetal: #162335;
   --uui-palette-gunmetal: $gunmetal;
-  --uui-palette-gunmetal-light: color($gunmetal lightness(+ 8%));
-  --uui-palette-gunmetal-dark: color($gunmetal blackness(+ 8%));
-  --uui-palette-gunmetal-dimmed: color(
+  --uui-palette-gunmetal-light: rgb(
+    35,
+    55,
+    83
+  ); /* color($gunmetal lightness(+ 8%)); */
+  --uui-palette-gunmetal-dark: rgb(
+    23,
+    27,
+    33
+  ); /* color($gunmetal blackness(+ 8%)); */
+  --uui-palette-gunmetal-dimmed: rgb(
+    54,
+    54,
+    54
+  ); /* color(
     $gunmetal saturation(- 50%) lightness(+ 6%)
-  );
+  ); */
 
   $space-cadet: #1b264f;
   --uui-palette-space-cadet: $space-cadet;
-  --uui-palette-space-cadet-light: color($space-cadet lightness(+ 8%));
-  --uui-palette-space-cadet-dark: color($space-cadet blackness(+ 8%));
-  --uui-palette-space-cadet-dimmed: color(
+  --uui-palette-space-cadet-light: rgb(
+    38,
+    53,
+    110
+  ); /* color($space-cadet lightness(+ 8%)); */
+  --uui-palette-space-cadet-dark: rgb(
+    28,
+    35,
+    59
+  ); /* color($space-cadet blackness(+ 8%)); */
+  --uui-palette-space-cadet-dimmed: rgb(
+    106,
+    117,
+    154
+  ); /* color(
     $space-cadet saturation(- 30%) lightness(+ 30%)
-  );
+  ); */
 
   $violet-blue: #3544b1;
   --uui-palette-violet-blue: $violet-blue;
-  --uui-palette-violet-blue-light: color($violet-blue lightness(+ 8%));
-  --uui-palette-violet-blue-dark: color($violet-blue blackness(+ 8%));
-  --uui-palette-violet-blue-dimmed: color(
+  --uui-palette-violet-blue-light: rgb(
+    70,
+    86,
+    200
+  ); /* color($violet-blue lightness(+ 8%)); */
+  --uui-palette-violet-blue-dark: rgb(
+    54,
+    65,
+    156
+  ); /* color($violet-blue blackness(+ 8%)); */
+  --uui-palette-violet-blue-dimmed: rgb(
+    87,
+    87,
+    87
+  ); /* color(
     $violet-blue saturation(- 30%) blackness(+ 22%)
-  );
-
-  /*
-  // not used jet.
-  $matisse: #2152a3;
-  --uui-palette-matisse: $matisse;
-  --uui-palette-matisse-light: color($matisse lightness(+ 8%));
-  --uui-palette-matisse-dark: color($matisse blackness(+ 8%));
-  --uui-palette-matisse-dimmed: color(
-    $matisse saturation(- 30%) blackness(+ 22%)
-  );
-  */
+  ); */
 
   $malibu: #3879ff;
   --uui-palette-malibu: $malibu;
-  --uui-palette-malibu-light: color($malibu lightness(+ 8%));
-  --uui-palette-malibu-dark: color($malibu blackness(+ 8%));
-  --uui-palette-malibu-dimmed: color(
+  --uui-palette-malibu-light: rgb(
+    97,
+    150,
+    255
+  ); /* color($malibu lightness(+ 8%)); */
+  --uui-palette-malibu-dark: rgb(
+    56,
+    116,
+    235
+  ); /* color($malibu blackness(+ 8%)); */
+  --uui-palette-malibu-dimmed: rgb(
+    115,
+    120,
+    130
+  ); /* color(
     $malibu saturation(- 60%) blackness(+ 26%)
-  );
-  /*
-  $outline-blue: #3879ff;
-  --uui-palette-outline-blue: $outline-blue;
-  --uui-palette-outline-blue-light: color($outline-blue lightness(+ 8%));
-  --uui-palette-outline-blue-dark: color($outline-blue blackness(+ 8%));
-  --uui-palette-outline-blue-dimmed: color(
-    $outline-blue saturation(- 60%) blackness(+ 26%)
-  );
-*/
+  ); */
+
   $maroon-flush: #d42054;
   --uui-palette-maroon-flush: $maroon-flush;
-  --uui-palette-maroon-flush-light: color($maroon-flush lightness(+ 8%));
-  --uui-palette-maroon-flush-dark: color($maroon-flush blackness(+ 8%));
-  --uui-palette-maroon-flush-dimmed: color(
+  --uui-palette-maroon-flush-light: rgb(
+    226,
+    60,
+    107
+  ); /* color($maroon-flush lightness(+ 8%)); */
+  --uui-palette-maroon-flush-dark: rgb(
+    191,
+    33,
+    78
+  ); /* color($maroon-flush blackness(+ 8%)); */
+  --uui-palette-maroon-flush-dimmed: rgb(
+    133,
+    107,
+    114
+  ); /* color(
     $maroon-flush saturation(- 62%) blackness(+ 2%)
-  );
+  ); */
 
   $jungle-green: #2bc37c;
   --uui-palette-jungle-green: $jungle-green;
-  --uui-palette-jungle-green-light: color($jungle-green lightness(+ 6%));
-  --uui-palette-jungle-green-dark: color($jungle-green blackness(+ 6%));
-  --uui-palette-jungle-green-dimmed: color(
+  --uui-palette-jungle-green-light: rgb(
+    58,
+    212,
+    140
+  ); /* color($jungle-green lightness(+ 6%)); */
+  --uui-palette-jungle-green-dark: rgb(
+    43,
+    179,
+    115
+  ); /* color($jungle-green blackness(+ 6%)); */
+  --uui-palette-jungle-green-dimmed: rgb(
+    102,
+    135,
+    120
+  ); /* color(
     $jungle-green saturation(- 50%) blackness(+ 1%)
-  );
+  ); */
 
   $forest-green: #0b8152;
   --uui-palette-forest-green: $forest-green;
-  --uui-palette-forest-green-light: color($forest-green lightness(+ 6%));
-  --uui-palette-forest-green-dark: color($forest-green blackness(+ 6%));
-  --uui-palette-forest-green-dimmed: color(
+  --uui-palette-forest-green-light: rgb(
+    13,
+    155,
+    98
+  ); /* color($forest-green lightness(+ 6%)); */
+  --uui-palette-forest-green-dark: rgb(
+    10,
+    115,
+    73
+  ); /* color($forest-green blackness(+ 6%)); */
+  --uui-palette-forest-green-dimmed: rgb(
+    46,
+    89,
+    72
+  ); /* color(
     $forest-green saturation(- 50%) blackness(+ 1%)
-  );
+  ); */
 
   $cocoa-black: #191715;
   --uui-palette-cocoa-black: $cocoa-black;
-  --uui-palette-cocoa-black-light: color($cocoa-black lightness(+ 5%));
-  --uui-palette-cocoa-black-dark: color($cocoa-black blackness(+ 5%));
-  --uui-palette-cocoa-black-dimmed: color(
+  --uui-palette-cocoa-black-light: rgb(
+    39,
+    36,
+    32
+  ); /* color($cocoa-black lightness(+ 5%)); */
+  --uui-palette-cocoa-black-dark: rgb(
+    20,
+    20,
+    20
+  ); /* color($cocoa-black blackness(+ 5%)); */
+  --uui-palette-cocoa-black-dimmed: rgb(
+    48,
+    48,
+    48
+  ); /* color(
     $cocoa-black saturation(- 20%) lightness(+ 10%)
-  );
+  ); */
 
   $dune-black: #2e2b29;
   --uui-palette-dune-black: $dune-black;
-  --uui-palette-dune-black-light: color($dune-black lightness(+ 4%));
-  --uui-palette-dune-black-dark: color($dune-black blackness(+ 10%));
-  --uui-palette-dune-black-dimmed: color(
+  --uui-palette-dune-black-light: rgb(
+    57,
+    53,
+    50
+  ); /* color($dune-black lightness(+ 4%)); */
+  --uui-palette-dune-black-dark: rgb(
+    38,
+    38,
+    38
+  ); /* color($dune-black blackness(+ 10%)); */
+  --uui-palette-dune-black-dimmed: rgb(
+    64,
+    64,
+    64
+  ); /* color(
     $dune-black saturation(- 30%) lightness(+ 8%)
-  );
+  ); */
 
   $cocoa-brown: #332a24;
   --uui-palette-cocoa-brown: $cocoa-brown;
-  --uui-palette-cocoa-brown-light: color($cocoa-brown lightness(+ 5%));
-  --uui-palette-cocoa-brown-dark: color($cocoa-brown blackness(+ 5%));
-  --uui-palette-cocoa-brown-dimmed: color(
+  --uui-palette-cocoa-brown-light: rgb(
+    66,
+    54,
+    47
+  ); /* color($cocoa-brown lightness(+ 5%)); */
+  --uui-palette-cocoa-brown-dark: rgb(
+    38,
+    37,
+    36
+  ); /* color($cocoa-brown blackness(+ 5%)); */
+  --uui-palette-cocoa-brown-dimmed: rgb(
+    43,
+    43,
+    43
+  ); /* color(
     $cocoa-brown saturation(- 40%) blackness(+ 2%)
-  );
+  ); */
 
   $chamoisee: #9d8057;
   --uui-palette-chamoisee: $chamoisee;
-  --uui-palette-chamoisee-light: color($chamoisee lightness(+ 8%));
-  --uui-palette-chamoisee-dark: color($chamoisee blackness(+ 8%));
-  --uui-palette-chamoisee-dimmed: color(
+  --uui-palette-chamoisee-light: rgb(
+    175,
+    148,
+    110
+  ); /* color($chamoisee lightness(+ 8%)); */
+  --uui-palette-chamoisee-dark: rgb(
+    138,
+    116,
+    87
+  ); /* color($chamoisee blackness(+ 8%)); */
+  --uui-palette-chamoisee-dimmed: rgb(
+    115,
+    113,
+    110
+  ); /* color(
     $chamoisee saturation(- 18%) blackness(+ 8%)
-  );
+  ); */
 
   $timberwolf: #e2dad4;
   --uui-palette-timberwolf: $timberwolf;
-  --uui-palette-timberwolf-light: color($timberwolf lightness(+ 8%));
-  --uui-palette-timberwolf-dark: color($timberwolf blackness(+ 8%));
-  --uui-palette-timberwolf-dimmed: color(
+  --uui-palette-timberwolf-light: rgb(
+    243,
+    239,
+    237
+  ); /* color($timberwolf lightness(+ 8%)); */
+  --uui-palette-timberwolf-dark: rgb(
+    208,
+    208,
+    208
+  ); /* color($timberwolf blackness(+ 8%)); */
+  --uui-palette-timberwolf-dimmed: rgb(
+    207,
+    207,
+    207
+  ); /* color(
     $timberwolf saturation(- 82%) blackness(+ 6%)
-  );
+  ); */
 
   $gravel: #d8d7d9;
   --uui-palette-gravel: $gravel;
-  --uui-palette-gravel-light: color($gravel lightness(+ 8%));
-  --uui-palette-gravel-dark: color($gravel blackness(+ 8%));
-  --uui-palette-gravel-dimmed: color($gravel saturation(- 82%) blackness(+ 6%));
+  --uui-palette-gravel-light: rgb(
+    237,
+    237,
+    238
+  ); /* color($gravel lightness(+ 8%)); */
+  --uui-palette-gravel-dark: rgb(
+    200,
+    200,
+    200
+  ); /* color($gravel blackness(+ 8%)); */
+  --uui-palette-gravel-dimmed: rgb(
+    204,
+    204,
+    204
+  ); /* color($gravel saturation(- 82%) blackness(+ 6%)); */
 
   $sand: #f3f3f5;
   --uui-palette-sand: $sand;
-  --uui-palette-sand-light: color($sand lightness(+ 8%));
-  --uui-palette-sand-dark: color($sand blackness(+ 8%));
-  --uui-palette-sand-dimmed: color($sand saturation(- 82%) blackness(+ 6%));
+  --uui-palette-sand-light: rgb(
+    255,
+    255,
+    255
+  ); /* color($sand lightness(+ 8%)); */
+  --uui-palette-sand-dark: rgb(
+    226,
+    226,
+    226
+  ); /* color($sand blackness(+ 8%)); */
+  --uui-palette-sand-dimmed: rgb(
+    231,
+    231,
+    231
+  ); /* color($sand saturation(- 82%) blackness(+ 6%)); */
 
   $white: #fefefe;
   --uui-palette-white: $white;
-  --uui-palette-white-light: color($white lightness(+ 2%));
-  --uui-palette-white-dark: color($white blackness(+ 2%));
-  --uui-palette-white-dimmed: color($white saturation(- 100%) blackness(+ 12%));
+  --uui-palette-white-light: rgb(
+    255,
+    255,
+    255
+  ); /* color($white lightness(+ 2%)); */
+  --uui-palette-white-dark: rgb(
+    250,
+    250,
+    250
+  ); /* color($white blackness(+ 2%)); */
+  --uui-palette-white-dimmed: rgb(
+    228,
+    228,
+    228
+  ); /* color($white saturation(- 100%) blackness(+ 12%)); */
 
   $black: #060606;
   --uui-palette-black: $black;
-  --uui-palette-black-light: color($black lightness(+ 8%));
-  --uui-palette-black-dark: color($black blackness(+ 8%));
-  --uui-palette-black-dimmed: color($black saturation(- 100%) lightness(+ 12%));
+  --uui-palette-black-light: rgb(
+    26,
+    26,
+    26
+  ); /* color($black lightness(+ 8%)); */
+  --uui-palette-black-dark: rgb(5, 5, 5); /* color($black blackness(+ 8%)); */
+  --uui-palette-black-dimmed: rgb(
+    36,
+    36,
+    36
+  ); /* color($black saturation(- 100%) lightness(+ 12%)); */
 
   $grey: #c4c4c4;
   --uui-palette-grey: $grey;
-  --uui-palette-grey-light: color($grey lightness(+ 10%));
-  --uui-palette-grey-dark: color($grey blackness(+ 10%));
-  --uui-palette-grey-dimmed: color($grey saturation(- 100%) blackness(+ 4%));
+  --uui-palette-grey-light: rgb(
+    222,
+    222,
+    222
+  ); /* color($grey lightness(+ 10%)); */
+  --uui-palette-grey-dark: rgb(
+    179,
+    179,
+    179
+  ); /* color($grey blackness(+ 10%)); */
+  --uui-palette-grey-dimmed: rgb(
+    189,
+    189,
+    189
+  ); /* color($grey saturation(- 100%) blackness(+ 4%)); */
 
   /** not begin used currently. */
   $dusty-grey: #9b9b9b;
   --uui-palette-dusty-grey: $dusty-grey;
-  --uui-palette-dusty-grey-light: color($dusty-grey lightness(+ 8%));
-  --uui-palette-dusty-grey-dark: color($dusty-grey blackness(+ 10%));
-  --uui-palette-dusty-grey-dimmed: color(
+  --uui-palette-dusty-grey-light: rgb(
+    176,
+    176,
+    176
+  ); /* color($dusty-grey lightness(+ 8%)); */
+  --uui-palette-dusty-grey-dark: rgb(
+    141,
+    141,
+    141
+  ); /* color($dusty-grey blackness(+ 10%)); */
+  --uui-palette-dusty-grey-dimmed: rgb(
+    186,
+    186,
+    186
+  ); /* color(
     $dusty-grey saturation(- 100%) lightness(+ 12%)
-  );
+  ); */
 
   $mine-grey: #3e3e3e;
   --uui-palette-mine-grey: $mine-grey;
-  --uui-palette-mine-grey-light: color($mine-grey lightness(+ 8%));
-  --uui-palette-mine-grey-dark: color($mine-grey blackness(+ 10%));
-  --uui-palette-mine-grey-dimmed: color(
+  --uui-palette-mine-grey-light: rgb(
+    82,
+    82,
+    82
+  ); /* color($mine-grey lightness(+ 8%)); */
+  --uui-palette-mine-grey-dark: rgb(
+    56,
+    56,
+    56
+  ); /* color($mine-grey blackness(+ 10%)); */
+  --uui-palette-mine-grey-dimmed: rgb(
+    87,
+    87,
+    87
+  ); /* color(
     $mine-grey saturation(- 100%) lightness(+ 10%)
-  );
+  ); */
 }
diff --git a/packages/uui-css/package.json b/packages/uui-css/package.json
index 65b03cccf..da615542a 100644
--- a/packages/uui-css/package.json
+++ b/packages/uui-css/package.json
@@ -34,9 +34,8 @@
   },
   "scripts": {
     "build": "npm run build:cssprops && tsc --build && rollup -c rollup.config.js",
-    "build:cssprops": "npm run postcss:convert && npm run postcss:colors && npm run custom-properties-cache",
+    "build:cssprops": "npm run postcss:convert && npm run custom-properties-cache",
     "postcss:convert": "postcss lib/custom-properties.css -o dist/custom-properties.css",
-    "postcss:colors": "postcss dist/custom-properties.css -u postcss-color-function -o dist/custom-properties.css",
     "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json custom-properties.*",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json",
     "custom-properties-cache": "node ./scripts/update-custom-properties-cache.js"
diff --git a/packages/uui-css/postcss.config.cjs b/packages/uui-css/postcss.config.cjs
index 8589e7bba..f4ce78f96 100644
--- a/packages/uui-css/postcss.config.cjs
+++ b/packages/uui-css/postcss.config.cjs
@@ -2,7 +2,6 @@
 const config = {
   plugins: [
     require('postcss-advanced-variables'),
-    require('postcss-color-function'),
     require('postcss-url'),
     require('autoprefixer'),
   ],
diff --git a/postcss.config.js b/postcss.config.js
index b7a2e2672..f03564c32 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -2,7 +2,6 @@ module.exports = () => {
   return {
     plugins: {
       'postcss-advanced-variables': {},
-      'postcss-color-function': {},
     },
   };
 };