diff --git a/packages/client/src/components/instance-ticker.vue b/packages/client/src/components/instance-ticker.vue
index 9b0a18ec90..317d89ceb3 100644
--- a/packages/client/src/components/instance-ticker.vue
+++ b/packages/client/src/components/instance-ticker.vue
@@ -7,6 +7,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
+import tinycolor from 'tinycolor2';
 import { instanceName } from '@/config';
 
 const props = defineProps<{
@@ -24,10 +25,10 @@ const instance = props.instance ?? {
 	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
 };
 
-const themeColor = instance.themeColor ?? '#777777';
+const themeColor = tinycolor(instance.themeColor ?? '#777777');
 
 const bg = {
-	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`
+	background: `linear-gradient(90deg, ${themeColor}, ${themeColor.clone().setAlpha(0)})`
 };
 </script>