diff --git a/package-lock.json b/package-lock.json
index ab5ed071e..db21a4c2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,7 @@
         "sass": "^1.51.0",
         "sgds-govtech": "^1.3.16",
         "slugify": "^1.6.5",
+        "tinycolor2": "^1.6.0",
         "toml": "^3.0.0",
         "turndown": "^7.1.1",
         "turndown-plugin-gfm": "^1.0.2",
@@ -35650,7 +35651,8 @@
     },
     "node_modules/tinycolor2": {
       "version": "1.6.0",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz",
+      "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw=="
     },
     "node_modules/tmp": {
       "version": "0.2.1",
diff --git a/package.json b/package.json
index 805bc5fa7..bdf48b2fa 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "sass": "^1.51.0",
     "sgds-govtech": "^1.3.16",
     "slugify": "^1.6.5",
+    "tinycolor2": "^1.6.0",
     "toml": "^3.0.0",
     "turndown": "^7.1.1",
     "turndown-plugin-gfm": "^1.0.2",
diff --git a/src/utils/siteColorUtils.js b/src/utils/siteColorUtils.js
index a4fb85aee..ad92358df 100644
--- a/src/utils/siteColorUtils.js
+++ b/src/utils/siteColorUtils.js
@@ -1,4 +1,5 @@
 import axios from "axios"
+import tinycolor from "tinycolor2"
 
 // axios settings
 axios.defaults.withCredentials = true
@@ -31,6 +32,7 @@ const createPageStyleSheet = (repoName, primaryColor, secondaryColor) => {
   styleElement.setAttribute("title", styleTitle)
   document.head.appendChild(styleElement)
 
+  const secondaryColorHover = tinycolor(secondaryColor).lighten(10).toString()
   const customStyleSheet = getStyleSheet(styleTitle)
 
   // breadcrumb - primary color
@@ -130,6 +132,11 @@ const createPageStyleSheet = (repoName, primaryColor, secondaryColor) => {
     `.sgds-icon.bx-chevron-down:before { color: ${secondaryColor} !important;}`,
     0
   )
+
+  customStyleSheet.insertRule(
+    `:root { --site-primary-color: ${primaryColor} !important; --site-secondary-color: ${secondaryColor} !important; --site-secondary-color-hover: ${secondaryColorHover} !important;}`,
+    0
+  )
 }
 
 const getSiteColors = async (siteName) => {