diff --git a/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs b/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs
index 28cb478ea6f..0562ed9eb97 100644
--- a/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs
+++ b/app/assets/javascripts/discourse/app/components/bread-crumbs.hbs
@@ -16,19 +16,7 @@
 {{#each this.categoryBreadcrumbs as |breadcrumb|}}
   {{#if breadcrumb.hasOptions}}
     <li
-      style={{html-safe
-        (if
-          breadcrumb.category
-          (concat
-            "--category-bg-color:#"
-            breadcrumb.category.color
-            "; "
-            "--category-text-color:#"
-            breadcrumb.category.text_color
-            ";"
-          )
-        )
-      }}
+      style={{if breadcrumb.category (category-variables breadcrumb.category)}}
     >
       <CategoryDrop
         @category={{breadcrumb.category}}
diff --git a/app/assets/javascripts/discourse/app/helpers/category-color-variable.js b/app/assets/javascripts/discourse/app/helpers/category-color-variable.js
index 05831521ad4..5ac36c3a40e 100644
--- a/app/assets/javascripts/discourse/app/helpers/category-color-variable.js
+++ b/app/assets/javascripts/discourse/app/helpers/category-color-variable.js
@@ -1,5 +1,5 @@
 import { htmlSafe } from "@ember/template";
 
 export default function categoryColorVariable(color) {
-  return htmlSafe(`--category-color: #${color};`);
+  return htmlSafe(`--category-badge-color: #${color};`);
 }
diff --git a/app/assets/javascripts/discourse/app/helpers/category-variables.js b/app/assets/javascripts/discourse/app/helpers/category-variables.js
new file mode 100644
index 00000000000..e57b69797a3
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/helpers/category-variables.js
@@ -0,0 +1,23 @@
+import { htmlSafe } from "@ember/template";
+
+export default function categoryVariables(category) {
+  let vars = "";
+
+  if (category.color) {
+    vars += `--category-badge-color: #${category.color};`;
+  }
+
+  if (category.text_color) {
+    vars += `--category-badge-text-color: #${category.text_color};`;
+  }
+
+  if (category.parentCategory?.color) {
+    vars += `--parent-category-badge-color: #${category.parentCategory.color};`;
+  }
+
+  if (category.parentCategory?.text_color) {
+    vars += `--parent-category-badge-text-color: #${category.parentCategory.text_color};`;
+  }
+
+  return htmlSafe(vars);
+}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 82e0c1b5369..35cbf8a383e 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@@ -58,7 +58,7 @@
     border-width: 0;
     border-left-width: 6px;
     border-style: solid;
-    border-color: var(--category-color, var(--primary-low));
+    border-color: var(--category-badge-color, var(--primary-low));
 
     .mobile-view & {
       width: 100%;
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index bc5c108cd76..26f87e2318f 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -89,7 +89,7 @@
 
   tbody {
     .category {
-      border-left: 6px solid var(--category-color, var(--primary-low));
+      border-left: 6px solid var(--category-badge-color, var(--primary-low));
       h3,
       h4 {
         line-height: var(--line-height-medium);