diff --git a/dist/index.css b/dist/index.css
index 0d79828a..fbb2dfc1 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -145,7 +145,7 @@ main {
 }
 [color]:not([color=standard]).subtle-background {
   --luma: var(--subtle-luma);
-  background: hsl(var(--hue), 30%, var(--luma));
+  background: hsl(var(--hue), 100%, var(--luma), 50%);
 }
 @media (prefers-color-scheme: dark) {
   [color]:not([color=standard]).subtle-background {
@@ -164,7 +164,7 @@ main {
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
   --background-luma: 90%;
-  --background-luma-dark: 10%;
+  --background-luma-dark: 11%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -175,7 +175,7 @@ main {
   --accent-text-luma: 0%;
   --accent-text-luma-dark: 0%;
   --background-luma: 85%;
-  --background-luma-dark: 10%;
+  --background-luma-dark: 11%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -186,7 +186,7 @@ main {
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 0%;
   --background-luma: 85%;
-  --background-luma-dark: 9%;
+  --background-luma-dark: 12%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -197,7 +197,7 @@ main {
   --accent-text-luma: 0%;
   --accent-text-luma-dark: 0%;
   --background-luma: 85%;
-  --background-luma-dark: 8%;
+  --background-luma-dark: 12%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -208,7 +208,7 @@ main {
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
   --background-luma: 90%;
-  --background-luma-dark: 10%;
+  --background-luma-dark: 12%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -219,7 +219,7 @@ main {
   --accent-text-luma: 100%;
   --accent-text-luma-dark: 100%;
   --background-luma: 90%;
-  --background-luma-dark: 12%;
+  --background-luma-dark: 11%;
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
 }
@@ -258,7 +258,7 @@ body[showing-chat] #chat-page-wrapper {
   left: 0px;
   right: 0px;
   bottom: 0px;
-  background-color: var(--background);
+  background-color: var(--background-glass);
   z-index: 2;
 }
 #chat-page {
diff --git a/src/View/chatPage.css b/src/View/chatPage.css
index cc8ea827..05d39717 100644
--- a/src/View/chatPage.css
+++ b/src/View/chatPage.css
@@ -16,7 +16,7 @@ body[showing-chat] #chat-page-wrapper {
   right: 0px;
   bottom: 0px;
 
-  background-color: var(--background);
+  background-color: var(--background-glass);
 
   z-index: 2;
 }
diff --git a/src/colors.css b/src/colors.css
index 4587d5fe..b82bf5da 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -89,7 +89,7 @@
 /* subtle */
 [color]:not([color="standard"]).subtle-background {
   --luma: var(--subtle-luma);
-  background: hsl(var(--hue), 30%, var(--luma));
+  background: hsl(var(--hue), 100%, var(--luma), 50%);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -115,7 +115,7 @@
   --accent-text-luma-dark: 100%;
 
   --background-luma: 90%;
-  --background-luma-dark: 10%;
+  --background-luma-dark: 11%;
 
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
@@ -131,7 +131,7 @@
   --accent-text-luma-dark: 0%;
 
   --background-luma: 85%;
-  --background-luma-dark: 10%;
+  --background-luma-dark: 11%;
 
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
@@ -147,7 +147,7 @@
   --accent-text-luma-dark: 0%;
 
   --background-luma: 85%;
-  --background-luma-dark: 9%;
+  --background-luma-dark: 12%;
 
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
@@ -163,7 +163,7 @@
   --accent-text-luma-dark: 0%;
 
   --background-luma: 85%;
-  --background-luma-dark: 8%;
+  --background-luma-dark: 12%;
 
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
@@ -179,7 +179,7 @@
   --accent-text-luma-dark: 100%;
 
   --background-luma: 90%;
-  --background-luma-dark: 10%;
+  --background-luma-dark: 12%;
 
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;
@@ -195,7 +195,7 @@
   --accent-text-luma-dark: 100%;
 
   --background-luma: 90%;
-  --background-luma-dark: 12%;
+  --background-luma-dark: 11%;
 
   --subtle-luma: 95%;
   --subtle-luma-dark: 5%;