diff --git a/config.toml b/config.toml
index 88ede2f..7f6c53a 100644
--- a/config.toml
+++ b/config.toml
@@ -25,9 +25,9 @@ smart_punctuation = true
 [extra]
 # Sets theme and browser theme color.
 # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
-primary_color = "hsl(28 100% 50%)"
+primary_color = "#ff7800"
 # Same as primary_color, but with 20% opacity
-primary_color_alpha = "hsl(28 100% 50% / 20%)"
+primary_color_alpha = "rgba(255, 120, 0, 0.2)"
 # Whether to use emoji as a favicon.
 # Replace with an emoji wrapped in quotes.
 emoji_favicon = false
diff --git a/sass/_crt.scss b/sass/_crt.scss
index 3a57f48..5c987b6 100644
--- a/sass/_crt.scss
+++ b/sass/_crt.scss
@@ -2,7 +2,7 @@
 	margin: 1rem 0 1rem;
 	box-shadow: 0 0 0 1px var(--primary-color-alpha), 0 2px 6px 2px var(--primary-color-alpha), 0 4px 24px 4px var(--primary-color-alpha);
 	border-radius: var(--rounded-corner);
-	background: radial-gradient(hsl(0 0% 0% / 70%), hsl(0 0% 0% / 85%)), var(--primary-color);
+	background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
 
 	pre {
 		animation: flicker 0.25s alternate infinite;
@@ -52,7 +52,7 @@
 		left: 0;
 		z-index: 1;
 		animation: scanlines 0.25s linear infinite;
-		background: repeating-linear-gradient(to top, hsl(0 0% 0% / 25%), hsl(0 0% 0% / 25%) 1px, transparent 3px, transparent 4px);
+		background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px);
 		width: 100%;
 		height: calc(100% + 0.5rem);
 		pointer-events: none;
diff --git a/sass/_nav.scss b/sass/_nav.scss
index 17a2440..0403b74 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -5,7 +5,7 @@
 	z-index: 999;
 	backdrop-filter: var(--blur);
 	margin: 1rem auto;
-	box-shadow: var(--edge-highlight), 0px 12px 24px -16px hsl(0 0% 0% / 50%);
+	box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
 	border-radius: 26px;
 	background-color: var(--nav-bg);
 	max-width: min(calc(var(--container-width) + 10rem), 90%);
diff --git a/sass/_variables.scss b/sass/_variables.scss
index e838bf6..6919cd7 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -1,38 +1,38 @@
 :root {
 	// COLORS
 	--bg-color: var(--bg-color-l);
-	--fg-color: hsl(0 0% 0% / 80%);
-	--fg-muted-1: hsl(0 0% 0% / 5%);
-	--fg-muted-2: hsl(0 0% 0% / 10%);
-	--fg-muted-3: hsl(0 0% 0% / 20%);
-	--fg-muted-4: hsl(0 0% 0% / 50%);
-	--fg-muted-5: hsl(0 0% 0% / 60%);
-	--nav-bg: hsl(0 0% 95% / 70%);
-	--purple-bg: hsl(285 45% 46% / 10%);
-	--purple-fg: hsl(285 45% 46%);
-	--red-bg: hsl(357 78% 49% / 10%);
-	--red-fg: hsl(357 78% 49%);
-	--yellow-bg: hsl(42 96% 31% / 10%);
-	--yellow-fg: hsl(42 96% 31%);
-	--boosts-bg: hsl(285 45% 46% / 10%);
-	--boosts-fg: hsl(285 45% 46%);
-	--faves-bg: hsl(42 92% 47% / 10%);
-	--faves-fg: hsl(42 92% 47%);
+	--fg-color: rgba(0, 0, 0, 0.8);
+	--fg-muted-1: rgba(0, 0, 0, 0.05);
+	--fg-muted-2: rgba(0, 0, 0, 0.1);
+	--fg-muted-3: rgba(0, 0, 0, 0.2);
+	--fg-muted-4: rgba(0, 0, 0, 0.5);
+	--fg-muted-5: rgba(0, 0, 0, 0.6);
+	--nav-bg: rgba(242, 242, 242, 0.7);
+	--purple-bg: rgba(145, 65, 172, 0.1);
+	--purple-fg: rgb(145, 65, 172);
+	--red-bg: rgba(224, 27, 36, 0.1);
+	--red-fg: rgb(224, 27, 36);
+	--yellow-bg: rgba(156, 110, 3, 0.1);
+	--yellow-fg: rgb(156, 110, 3);
+	--boosts-bg: rgba(145, 65, 172, 0.1);
+	--boosts-fg: rgb(145, 65, 172);
+	--faves-bg: rgba(229, 165, 10, 0.1);
+	--faves-fg: rgb(229, 165, 10);
 
 	// VARIABLES
 	--active: 0.9;
-	--bg-color-d: linear-gradient(hsl(0 0% 0% / 90%), hsl(0 0% 0% / 90%)), var(--primary-color);
-	--bg-color-l: linear-gradient(hsl(0 0% 100% / 80%), hsl(0 0% 100% / 80%)), var(--primary-color);
+	--bg-color-d: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color);
+	--bg-color-l: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), var(--primary-color);
 	--blur: saturate(180%) blur(10px);
 	--container-width: 720px;
-	--edge-highlight: inset 0 1px 0 hsl(0 0% 100% / 10%);
+	--edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 	--font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
 	--font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
 	--font-system: system-ui, sans-serif;
 	--rounded-corner-small: 8px;
 	--rounded-corner: 12px;
-	--shadow-raised: 0 0 0 1px hsl(0 0% 0% / 6%), 0 2px 6px 2px hsl(0 0% 0% / 14%), 0 4px 12px 4px hsl(0 0% 0% / 6%);
-	--shadow: 0 0 0 1px hsl(0 0% 0% / 3%), 0 1px 3px 1px hsl(0 0% 0% / 7%), 0 2px 6px 2px hsl(0 0% 0% / 3%);
+	--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
+	--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
 	--transition-long: 0.8s;
 	--transition-longer: 0.4s;
 	--transition: 0.2s;
@@ -40,30 +40,29 @@
 	@media (prefers-color-scheme: dark) {
 		// COLORS
 		--bg-color: var(--bg-color-d);
-		--fg-color: hsl(0 0% 100%);
-		--fg-muted-1: hsl(0 0% 100% / 5%);
-		--fg-muted-2: hsl(0 0% 100% / 10%);
-		--fg-muted-3: hsl(0 0% 100% / 20%);
-		--fg-muted-4: hsl(0 0% 100% / 50%);
-		--fg-muted-5: hsl(0 0% 100% / 60%);
-		--nav-bg: hsl(0 0% 10% / 70%);
-		--purple-bg: hsl(299 55% 70% / 10%);
-		--purple-fg: hsl(299 55% 70%);
-		--red-bg: hsl(7 71% 60% / 10%);
-		--red-fg: hsl(6 90% 64%);
-		--yellow-bg: hsl(52 92% 67% / 10%);
-		--yellow-fg: hsl(52 92% 67%);
-		--boosts-bg: hsl(299 55% 70% / 10%);
-		--boosts-fg: hsl(299 55% 70%);
-		--faves-bg: hsl(56 92% 70% / 10%);
-		--faves-fg: hsl(56 92% 70%);
+		--fg-color: rgb(255, 255, 255);
+		--fg-muted-1: rgba(255, 255, 255, 0.05);
+		--fg-muted-2: rgba(255, 255, 255, 0.1);
+		--fg-muted-3: rgba(255, 255, 255, 0.2);
+		--fg-muted-4: rgba(255, 255, 255, 0.5);
+		--fg-muted-5: rgba(255, 255, 255, 0.6);
+		--nav-bg: rgba(25, 25, 25, 0.7);
+		--purple-bg: rgba(220, 138, 221, 0.1);
+		--purple-fg: rgb(220, 138, 221);
+		--red-bg: rgba(226, 97, 81, 0.1);
+		--red-fg: rgb(246, 97, 81);
+		--yellow-bg: rgba(248, 228, 92, 0.1);
+		--yellow-fg: rgb(248, 228, 92);
+		--boosts-bg: rgba(220, 138, 221, 0.1);
+		--boosts-fg: rgb(220, 138, 221);
+		--faves-bg: rgba(249, 240, 107, 0.1);
+		--faves-fg: rgb(249, 240, 107);
 
 		color-scheme: dark;
 	}
 }
 
 @media (prefers-reduced-motion) {
-
 	*,
 	*::before,
 	*::after {
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 6985dbf..aa06c38 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -28,8 +28,8 @@
 
 	<style type="text/css">
 		:root {
-			--primary-color-alpha: {{ config.extra.primary_color_alpha | safe }};
-			--primary-color: {{ config.extra.primary_color | safe}};
+			--primary-color-alpha: {{ config.extra.primary_color_alpha }};
+			--primary-color: {{ config.extra.primary_color }};
 		}
 	</style>
 
diff --git a/theme.toml b/theme.toml
index 1fbcd33..24d8b35 100644
--- a/theme.toml
+++ b/theme.toml
@@ -6,8 +6,8 @@ min_version = "0.17.2"
 demo = "https://daudix.codeberg.page/duckquill"
 
 [extra]
-primary_color = "hsl(45 2% 60%)"
-primary_color_alpha = "hsl(45 2% 60% / 20%)"
+primary_color = "#9a9996"
+primary_color_alpha = "rgba(154, 153, 150, 0.2)"
 date_format = "%d %B %Y"
 issues_url = ""
 source_url = ""