diff --git a/frontend_tests/node_tests/copy_and_paste.js b/frontend_tests/node_tests/copy_and_paste.js
index 1d04b2e976..000728e0be 100644
--- a/frontend_tests/node_tests/copy_and_paste.js
+++ b/frontend_tests/node_tests/copy_and_paste.js
@@ -39,7 +39,7 @@ run_test('paste_handler', () => {
     assert.equal(copy_and_paste.paste_handler_converter(input),
                  'love the  **Zulip****Organization**.');
 
-    input = '<meta http-equiv="content-type" content="text/html; charset=utf-8"><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">The<span> </span></span><code style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, &quot;Liberation Mono&quot;, Menlo, Courier, monospace; font-size: 13.6px; padding: 0.2em 0.4em; margin: 0px; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; color: hsl(210, 12%, 16%); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">JSDOM</code><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"><span> </span>constructor</span>';
+    input = '<meta http-equiv="content-type" content="text/html; charset=utf-8"><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">The<span> </span></span><code style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, &quot;Liberation Mono&quot;, Menlo, Courier, monospace; font-size: 13.6px; padding: 0.2em 0.4em; margin: 0px; background-color: hsla(210, 13%, 12%, 0.05); border-radius: 3px; color: hsl(210, 12%, 16%); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">JSDOM</code><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"><span> </span>constructor</span>';
     assert.equal(copy_and_paste.paste_handler_converter(input),
                  'The  `JSDOM`  constructor');
 
diff --git a/static/styles/components.scss b/static/styles/components.scss
index aa16a0de30..4e22a83c2d 100644
--- a/static/styles/components.scss
+++ b/static/styles/components.scss
@@ -71,7 +71,7 @@ a.no-underline:hover {
 .simplebar-track {
     .simplebar-scrollbar::before {
         background-color: hsl(0, 0%, 0%);
-        box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.33);
+        box-shadow: 0px 0px 0px 1px hsla(0, 0%, 100%, 0.33);
     }
 
     &.simplebar-vertical {
diff --git a/static/styles/hotspots.scss b/static/styles/hotspots.scss
index 08f4381c5a..97db871f62 100644
--- a/static/styles/hotspots.scss
+++ b/static/styles/hotspots.scss
@@ -246,7 +246,7 @@
 .hotspot-inline {
     width: 350px;
     max-width: 95%;
-    box-shadow: 0 5px 10px rgba(133, 136, 142, 0.1);
+    box-shadow: 0 5px 10px hsla(220, 4%, 54%, 0.1);
     border-radius: 4px;
     background-color: hsl(0, 0%, 98%);
     margin: 0 auto;
diff --git a/static/styles/lightbox.scss b/static/styles/lightbox.scss
index e832e6734d..0d65e14796 100644
--- a/static/styles/lightbox.scss
+++ b/static/styles/lightbox.scss
@@ -89,7 +89,7 @@
 
             border-radius: 4px;
 
-            border: 1px solid rgba(255, 255, 255, 0.6);
+            border: 1px solid hsla(0, 0%, 100%, 0.6);
 
             text-align: center;
             color: hsl(0, 0%, 100%);
diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.scss
index a9ffbbcd64..b4dd652e52 100644
--- a/static/styles/night_mode.scss
+++ b/static/styles/night_mode.scss
@@ -513,7 +513,7 @@ on a dark background, and don't change the dark labels dark either. */
     }
 
     .history-limited-box {
-        background-color: rgba(0, 0, 0, 0.2);
+        background-color: hsla(0, 0%, 0%, 0.2);
     }
 
     #feedback_container,
@@ -576,7 +576,7 @@ on a dark background, and don't change the dark labels dark either. */
 
     .simplebar-track .simplebar-scrollbar::before {
         background-color: hsl(0, 0%, 100%);
-        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.33);
+        box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.33);
     }
 
     .collapse-settings-btn:hover {
diff --git a/static/styles/popovers.scss b/static/styles/popovers.scss
index af4b3782ed..da6ec73d26 100644
--- a/static/styles/popovers.scss
+++ b/static/styles/popovers.scss
@@ -314,7 +314,7 @@ ul.remind_me_popover .remind_icon {
         justify-content: center;
         align-items: center;
 
-        background-color: rgba(0, 0, 0, 0.7);
+        background-color: hsla(0, 0%, 0%, 0.7);
 
         z-index: 103;
 
diff --git a/static/styles/portico/billing.scss b/static/styles/portico/billing.scss
index ac9fe3b4da..3a88bfe9c8 100644
--- a/static/styles/portico/billing.scss
+++ b/static/styles/portico/billing.scss
@@ -121,7 +121,7 @@
         color: hsl(0, 0%, 100%);
         background-color: hsl(185, 38%, 55%);
         background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
-        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
+        box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
         border: 0;
         height: 40px;
         margin: 5px 0 0 0;
@@ -137,7 +137,7 @@
 
     .stripe-button-el:hover {
         background-color: hsl(169, 65%, 42%);
-        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+        box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
     }
 
     .stripe-button-el:active,
diff --git a/static/styles/portico/integrations.scss b/static/styles/portico/integrations.scss
index 351cd69ab2..4c7e8fbe45 100644
--- a/static/styles/portico/integrations.scss
+++ b/static/styles/portico/integrations.scss
@@ -88,9 +88,9 @@
 }
 
 .portico-landing.integrations .searchbar input {
-    -webkit-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.03);
-    -moz-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.03);
-    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.03);
+    -webkit-box-shadow: 0px 0px 7px 2px hsla(0, 0%, 0%, 0.03);
+    -moz-box-shadow: 0px 0px 7px 2px hsla(0, 0%, 0%, 0.03);
+    box-shadow: 0px 0px 7px 2px hsla(0, 0%, 0%, 0.03);
 
     font-size: 1em;
     font-family: inherit;
diff --git a/static/styles/portico/integrations_dev_panel.css b/static/styles/portico/integrations_dev_panel.css
index 303696e912..82902b6157 100644
--- a/static/styles/portico/integrations_dev_panel.css
+++ b/static/styles/portico/integrations_dev_panel.css
@@ -28,7 +28,7 @@ button {
     padding-left: 10px;
     padding-right: 10px;
     background-color: hsl(173, 100%, 98%);
-    box-shadow: 8px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    box-shadow: 8px 4px 8px 0 hsla(0, 0%, 0%, 0.2), 0 6px 20px 0 hsla(0, 0%, 0%, 0.19);
 }
 
 #fixture_body {
diff --git a/static/styles/portico/landing-page.scss b/static/styles/portico/landing-page.scss
index 1443c2d479..dbd79b530f 100644
--- a/static/styles/portico/landing-page.scss
+++ b/static/styles/portico/landing-page.scss
@@ -461,7 +461,7 @@ nav ul li.active::after {
 .portico-landing.features-app section.hero .image {
     height: 400px;
     width: 40%;
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: hsla(0, 0%, 0%, 0.05);
 }
 
 .portico-landing.features-app section.keyboard-shortcuts {
@@ -553,7 +553,7 @@ nav ul li.active::after {
     background-color: hsl(0, 0%, 100%);
     border-radius: 10px;
 
-    box-shadow: 10px 20px 80px rgba(0, 0, 0, 0.15);
+    box-shadow: 10px 20px 80px hsla(0, 0%, 0%, 0.15);
 }
 
 .portico-landing.features-app section.notifications .envelope {
@@ -621,7 +621,7 @@ nav ul li.active::after {
     width: 400px;
     height: 280px;
 
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
+    background: linear-gradient(135deg, hsla(0, 0%, 0%, 0.05), hsla(0, 0%, 0%, 0.2));
     border-radius: 4px;
 
     background-image: url(/static/images/landing-page/notifications.jpg);
@@ -702,7 +702,7 @@ nav ul li.active::after {
 }
 
 .portico-landing.hello .gradients .gradient.dark-blue {
-    background: linear-gradient(10deg, rgba(15, 46, 57, 0) 50%, rgba(15, 46, 57, 0.7));
+    background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, 0.7));
 }
 
 .portico-landing.hello .gradients .gradient.green {
@@ -818,7 +818,7 @@ nav ul li.active::after {
     font-size: 3em;
     font-weight: 400;
 
-    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
+    text-shadow: 0px 0px 20px hsla(0, 0%, 100%, 0.2);
 }
 
 .portico-landing.hello .hero header p {
@@ -827,7 +827,7 @@ nav ul li.active::after {
     font-size: 1.5em;
     font-weight: 300;
     line-height: 1.4;
-    text-shadow: 0px 0px 5px rgba(10, 66, 51, 0.3), 0px 0px 20px rgba(255, 255, 255, 0.2);
+    text-shadow: 0px 0px 5px hsla(164, 74%, 15%, 0.3), 0px 0px 20px hsla(0, 0%, 100%, 0.2);
 }
 
 .portico-landing.hello .hero header a {
@@ -847,17 +847,17 @@ nav ul li.active::after {
     font-weight: 500;
     color: hsl(148, 23%, 51%);
 
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
 
     transition: all 0.2s ease;
 }
 
 .portico-landing.hello .hero header button:hover {
-    box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.2);
+    box-shadow: 0px 3px 10px hsla(0, 0%, 100%, 0.2);
 }
 
 .portico-landing.hello .hero header button:active {
-    box-shadow: 0px 3px 20px rgba(255, 255, 255, 0.5);
+    box-shadow: 0px 3px 20px hsla(0, 0%, 100%, 0.5);
 }
 
 .portico-landing.hello .hero header .download-button {
@@ -1361,10 +1361,10 @@ nav ul li.active::after {
     height: 520px;
     margin: 20px auto;
     padding: 30px 20px;
-    background-color: rgba(246, 247, 249, 0.6);
-    background: linear-gradient(rgba(246, 247, 249, 0.4), rgba(246, 247, 249, 0.9));
+    background-color: hsla(220, 20%, 97%, 0.6);
+    background: linear-gradient(hsla(220, 20%, 97%, 0.4), hsla(220, 20%, 97%, 0.9));
     border-radius: 12px;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.02);
+    box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.02);
     position: relative;
 }
 
@@ -1375,7 +1375,7 @@ nav ul li.active::after {
     color: hsl(0, 0%, 100%);
     background-color: hsl(185, 38%, 55%);
     background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
     border: 0;
     position: absolute;
     left: 50%;
@@ -1389,7 +1389,7 @@ nav ul li.active::after {
 
 .tour .carousel-inner .start-button:hover {
     background-color: hsl(169, 65%, 42%);
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
 }
 
 .tour .carousel-inner .start-image {
@@ -1549,13 +1549,13 @@ nav ul li.active::after {
 
     background-color: hsl(185, 38%, 55%);
     background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
     border: 0;
 }
 
 .tour .carousel-inner button.call-to-action:hover {
     background-color: hsl(169, 65%, 42%);
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
 }
 
 .tour .carousel-control {
@@ -1716,7 +1716,7 @@ nav ul li.active::after {
     width: 60%;
     margin: 0 auto;
     border: none;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
 }
 
 .portico-landing .testimonials .company-container {
@@ -2103,7 +2103,7 @@ nav ul li.active::after {
 }
 
 .portico-landing.apps .hero .info .cta {
-    text-shadow: 0px 0px 60px rgba(0, 0, 0, 0.3);
+    text-shadow: 0px 0px 60px hsla(0, 0%, 0%, 0.3);
     max-width: 600px;
 }
 
@@ -2346,7 +2346,7 @@ nav ul li.active::after {
     top: 0;
     left: 0;
 
-    background-color: rgba(15, 24, 48, 0.7);
+    background-color: hsla(224, 52%, 12%, 0.7);
 
     z-index: 0;
 }
@@ -2501,7 +2501,7 @@ nav ul li.active::after {
 }
 
 .gradients .gradient.dark-blue {
-    background: linear-gradient(10deg, rgba(15, 46, 57, 0) 50%, rgba(15, 46, 57, 0.7));
+    background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, 0.7));
 }
 
 .gradients .gradient.green {
@@ -2571,7 +2571,7 @@ nav ul li.active::after {
     width: 300px;
     height: 500px;
 
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
 
 
     text-align: left;
@@ -2741,7 +2741,7 @@ nav ul li.active::after {
 .pricing-overlay.pricing-model.active {
     opacity: 1;
     pointer-events: all;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: hsla(0, 0%, 0%, 0.6);
 }
 
 .pricing-overlay.pricing-model .price-box {
@@ -2842,15 +2842,15 @@ nav ul li.active::after {
 
 @keyframes box-shadow-pulse {
     0% {
-        box-shadow: 0px 0px 0px rgba(106, 201, 185, 0);
+        box-shadow: 0px 0px 0px hsla(170, 47%, 60%, 1);
     }
 
     50% {
-        box-shadow: 0px 0px 25px rgba(106, 201, 185, 0.8);
+        box-shadow: 0px 0px 25px hsla(170, 47%, 60%, 0.8);
     }
 
     100% {
-        box-shadow: 0px 0px 0px rgba(106, 201, 185, 0);
+        box-shadow: 0px 0px 0px hsla(170, 47%, 60%, 1);
     }
 }
 
@@ -3491,7 +3491,7 @@ nav ul li.active::after {
     }
 
     nav .content > ul.show {
-        outline-color: rgba(32, 62, 80, 0.7);
+        outline-color: hsla(203, 43%, 22%, 0.7);
     }
 
     nav ul .exit {
diff --git a/static/styles/portico/portico.scss b/static/styles/portico/portico.scss
index e950dcaa40..c75906866a 100644
--- a/static/styles/portico/portico.scss
+++ b/static/styles/portico/portico.scss
@@ -52,7 +52,7 @@ body {
     height: 29px;
 
     background-color: hsl(0, 0%, 100%);
-    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.1);
 
     z-index: 100;
 }
@@ -183,7 +183,7 @@ body {
 .app.help {
     display: inline-flex;
 
-    box-shadow: 0px -20px 50px rgba(0, 0, 0, 0.04);
+    box-shadow: 0px -20px 50px hsla(0, 0%, 0%, 0.04);
     overflow: auto;
 
     color: hsl(0, 0%, 27%);
@@ -776,7 +776,7 @@ input.text-error {
 
     border-radius: 4px;
     border: 1px solid hsl(0, 0%, 87%);
-    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 2px 5px hsla(0, 0%, 0%, 0.1);
 }
 
 .portico-header .dropdown.show ul {
@@ -835,7 +835,7 @@ input.text-error {
 }
 
 .portico-header .dropdown-pill {
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    border: 1px solid hsla(0, 0%, 0%, 0.2);
     border-radius: 4px;
     margin-left: 10px;
     font-weight: 400;
@@ -928,7 +928,7 @@ a.bottom-signup-button {
 
 .table.table-striped {
     background-color: hsl(0, 0%, 100%);
-    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.1);
 }
 
 .team-profiles {
diff --git a/static/styles/settings.scss b/static/styles/settings.scss
index bee130c1a8..e686d71add 100644
--- a/static/styles/settings.scss
+++ b/static/styles/settings.scss
@@ -1907,13 +1907,13 @@ thead .actions {
 }
 
 .custom_user_field .pill-container:focus-within {
-    border-color: rgba(82, 168, 236, 0.8);
+    border-color: hsla(206, 80%, 62%, 0.8);
     outline: 0;
     outline: 1px dotted \9;
 
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    -webkit-box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
+    -moz-box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
+    box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
 }
 
 #get_api_key_button {
diff --git a/static/styles/zulip.scss b/static/styles/zulip.scss
index fb1972dde4..0c11be245e 100644
--- a/static/styles/zulip.scss
+++ b/static/styles/zulip.scss
@@ -1579,7 +1579,7 @@ a:hover code {
         height: 80px;
         padding: 5px;
         z-index: 1;
-        text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
+        text-shadow: hsla(0, 0%, 0%, 0.01) 0 0 1px;
 
         .message_embed_title {
             padding-top: 0px;
diff --git a/static/templates/group_pms.handlebars b/static/templates/group_pms.handlebars
index bbfe9b74f5..8386a8186e 100644
--- a/static/templates/group_pms.handlebars
+++ b/static/templates/group_pms.handlebars
@@ -3,7 +3,7 @@
 <li data-user-ids="{{user_ids_string}}" class="group-pms-sidebar-entry narrow-filter">
     <div class="selectable_sidebar_block">
         {{#if fraction_present}}
-        <span class="user_circle_fraction" style="background:rgba(68,194,29,{{fraction_present}});"></span>
+        <span class="user_circle_fraction" style="background:hsla(106, 74%, 44%, {{fraction_present}});"></span>
         {{else}}
         <span class="user_circle_fraction" style="background:none; border-color:hsl(0, 0%, 50%);"></span>
         {{/if}}
diff --git a/static/templates/sidebar_private_message_list.handlebars b/static/templates/sidebar_private_message_list.handlebars
index f658c45c7d..921f349298 100644
--- a/static/templates/sidebar_private_message_list.handlebars
+++ b/static/templates/sidebar_private_message_list.handlebars
@@ -6,7 +6,7 @@
             <div class="pm_left_col">
                 {{#if is_group}}
                     {{#if fraction_present}}
-                    <span class="{{user_circle_class}} user_circle" style="background:rgba(68,194,29,{{fraction_present}});"></span>
+                    <span class="{{user_circle_class}} user_circle" style="background:hsla(106, 74%, 44%, {{fraction_present}});"></span>
                     {{else}}
                     <span class="{{user_circle_class}} user_circle" style="background:none; border-color:hsl(0, 0%, 50%);"></span>
                     {{/if}}