diff --git a/CHANGELOG.md b/CHANGELOG.md
index f244f3f..a0dad16 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Add an entry point for stripes-core's service worker. Refs STRWEB-99.
 * Pass micro-stripes-config to service worker at build-time. Refs STRWEB-102.
+* Add postcss-plugin for relative color syntax support for Firefox. Refs STRWEB-103.
 
 ## [5.0.0](https://github.com/folio-org/stripes-webpack/tree/v5.0.0) (2023-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-webpack/compare/v4.2.0...v5.0.0)
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(),
   ],
 };