diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
index e472e99ac7f..8dd0574aa91 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js
@@ -53,11 +53,13 @@ export default class SectionLink extends Component {
 
   get prefixElementColors() {
     const prefixElementColors = this.args.prefixElementColors.filter((color) =>
-      color?.match(/^\w{6}$/)
+      color?.slice(0, 6)
     );
+
     if (prefixElementColors.length === 1) {
       prefixElementColors.push(prefixElementColors[0]);
     }
+
     return prefixElementColors.map((color) => `#${color} 50%`).join(", ");
   }
 }
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
index 96656d8cf10..20a402d5350 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
@@ -291,6 +291,20 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
   });
 
+  test("category section link for category with 3-digit hex code for color", async function (assert) {
+    const { category1 } = setupUserSidebarCategories();
+    category1.set("color", "888");
+
+    await visit("/");
+
+    assert.ok(
+      exists(
+        `.sidebar-section-link-${category1.slug} .sidebar-section-link-prefix .prefix-span[style="background: linear-gradient(90deg, #888 50%, #888 50%)"]`
+      ),
+      "category1 section link is rendered with the right solid prefix icon color"
+    );
+  });
+
   test("category section link have the right title", async function (assert) {
     const categories = Site.current().categories;