diff --git a/package.json b/package.json
index ea1d80b..be433e5 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@babel/preset-typescript": "^7.7.7",
     "@babel/register": "^7.0.0",
     "@cerner/duplicate-package-checker-webpack-plugin": "~2.1.0",
+    "@csstools/postcss-relative-color-syntax": "^2.0.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@svgr/webpack": "^8.1.0",
     "add-asset-html-webpack-plugin": "^5.0.2",
diff --git a/postcss.config.js b/postcss.config.js
index 1016842..42c38be 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -7,7 +7,7 @@ const postCssNesting = require('postcss-nesting');
 const postCssCustomMedia = require('postcss-custom-media');
 const postCssMediaMinMax = require('postcss-media-minmax');
 const postCssColorFunction = require('postcss-color-function');
-
+const postCssRelativeColorSyntax = require('@csstools/postcss-relative-color-syntax');
 const { generateStripesAlias, tryResolve } = require('./webpack/module-paths');
 
 const locateCssVariables = () => {
@@ -34,6 +34,7 @@ module.exports = {
     postCssNesting(),
     postCssCustomMedia(),
     postCssMediaMinMax(),
+    postCssRelativeColorSyntax(),
     postCssColorFunction(),
   ],
 };