diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index d9739ce935b3..38856147db0e 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -265,11 +265,11 @@ function onMousedown(evt: MouseEvent): void {
         }
       }
 		&:not(:disabled):hover {
-			background: hsl(from var(--accent) h s calc(l + 5%));
+			background: hsl(from var(--accent) h s 60%);
 		}
 
 		&:not(:disabled):active {
-			background: hsl(from var(--accent) h s calc(l + 5%));
+			background: hsl(from var(--accent) h s 60%);
 		}
 	}
 
@@ -324,7 +324,7 @@ function onMousedown(evt: MouseEvent): void {
 			z-index: -1;
 			width: 100%;
 			height: 100%;
-			background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+			background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
 			opacity: 0;
 			transition: opacity 0.1s ease;
 
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 45bb0c4c065f..6df260f70303 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1352,13 +1352,13 @@ defineExpose({
 
   &:not(:disabled):hover {
     > .inner {
-      background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+      background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
     }
   }
 
   &:not(:disabled):active {
     > .inner {
-      background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+      background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
     }
   }
 }
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 338a0a6ecb67..cabe6374c946 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -277,11 +277,11 @@ rt {
 	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 
 	&:not(:disabled):hover {
-		background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+		background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
 	}
 
 	&:not(:disabled):active {
-		background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+		background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
 	}
 }
 
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index a146008985b6..4ee53a8193be 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -460,11 +460,11 @@ body {
 	color: var(--fgOnAccent);
 
 	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+		background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
 	}
 
 	&:active {
-		background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+		background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
 	}
 }
 
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 28af2aebc883..23d8f6516fc4 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -566,11 +566,11 @@ $widgets-hide-threshold: 1090px;
   color: var(--fgOnAccent);
 
   &:hover {
-    background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+    background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
   }
 
   &:active {
-    background: linear-gradient(90deg, hsl(from var(--accent) h s calc(l + 5%)), hsl(from var(--accent) h s calc(l + 5%)));
+    background: linear-gradient(90deg, hsl(from var(--accent) h s 60%), hsl(from var(--accent) h s 60%));
   }
 }