diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 3f9262e781..b5d60d9bb1 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -280,7 +280,7 @@ export class HaStateLabelBadge extends LitElement {
         font-size: 70%;
       }
       ha-label-badge {
-        --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        --ha-label-badge-color: var(--label-badge-red);
       }
       ha-label-badge.has-unit_of_measurement {
         --ha-label-badge-label-text-transform: none;
@@ -288,31 +288,31 @@ export class HaStateLabelBadge extends LitElement {
 
       ha-label-badge.binary_sensor,
       ha-label-badge.updater {
-        --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        --ha-label-badge-color: var(--label-badge-blue);
       }
 
       .red {
-        --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        --ha-label-badge-color: var(--label-badge-red);
       }
 
       .blue {
-        --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        --ha-label-badge-color: var(--label-badge-blue);
       }
 
       .green {
-        --ha-label-badge-color: var(--label-badge-green, #0da035);
+        --ha-label-badge-color: var(--label-badge-green);
       }
 
       .yellow {
-        --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+        --ha-label-badge-color: var(--label-badge-yellow);
       }
 
       .grey {
-        --ha-label-badge-color: var(--label-badge-grey, var(--paper-grey-500));
+        --ha-label-badge-color: var(--label-badge-grey);
       }
 
       .warning {
-        --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+        --ha-label-badge-color: var(--label-badge-yellow);
       }
     `;
   }
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index cab06c3858..4bdac11926 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -50,10 +50,10 @@ documentContainer.innerHTML = `<custom-style>
       --header-height: 56px;
 
       /* for label-badge */
-      --label-badge-red: #DF4C1E;
-      --label-badge-blue: #039be5;
-      --label-badge-green: #0DA035;
-      --label-badge-yellow: #f4b400;
+      --label-badge-red: var(--error-color);
+      --label-badge-blue: var(--info-color);
+      --label-badge-green: var(--success-color);
+      --label-badge-yellow: var(--warning-color);
       --label-badge-grey: #9e9e9e;
 
       /* states icon */