diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 8039939231..3078ae2399 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -1007,7 +1007,7 @@ div.overlay {
         margin-bottom: 10px;
 
         &.active {
-            outline: 2px solid hsl(215deg 47% 50%);
+            outline: 2px solid var(--color-outline-focus);
             border-radius: 7px;
         }
 
diff --git a/web/styles/hotspots.css b/web/styles/hotspots.css
index 9188b61103..e38b074f65 100644
--- a/web/styles/hotspots.css
+++ b/web/styles/hotspots.css
@@ -11,7 +11,7 @@
         border-radius: 50%;
         position: absolute;
         background-color: hsl(196deg 100% 82% / 30%);
-        border: 2px solid hsl(215deg 47% 50%);
+        border: 2px solid var(--color-outline-focus);
         top: 50%;
         left: 50%;
     }
@@ -39,7 +39,7 @@
             left: -5px;
             bottom: 3px;
             transform: rotate(7deg);
-            color: hsl(215deg 47% 50%);
+            color: var(--color-outline-focus);
             font-size: 2.75em;
             font-weight: 600;
         }
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index f696d5516c..5b94ea1efb 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -839,7 +839,7 @@ ul {
 
             &:focus {
                 .fa-remove {
-                    outline: 2px solid hsl(215deg 47% 50%);
+                    outline: 2px solid var(--color-outline-focus);
                 }
             }
         }
diff --git a/web/styles/recent_view.css b/web/styles/recent_view.css
index fe494e121a..8750189f06 100644
--- a/web/styles/recent_view.css
+++ b/web/styles/recent_view.css
@@ -36,7 +36,7 @@
 
             &:focus-within {
                 /* Use the same color as the message feed pointer */
-                box-shadow: 0 3px 0 hsl(215deg 47% 50%);
+                box-shadow: 0 3px 0 var(--color-outline-focus);
             }
 
             .change_visibility_policy i {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 9a6eb43e45..8b41ca1e2e 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -164,6 +164,7 @@ body {
     --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
     --color-background-modal: hsl(0deg 0% 98%);
     --color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%);
+    --color-outline-focus: hsl(215deg 47% 50%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
@@ -831,7 +832,7 @@ i.fa:focus,
 i.zulip-icon:focus-visible,
 .auto-select:focus,
 [role="button"]:focus {
-    outline: 2px solid hsl(215deg 47% 50%);
+    outline: 2px solid var(--color-outline-focus);
     /* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
 }