diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss
index 9830e13..877433b 100644
--- a/assets/css/buttons.scss
+++ b/assets/css/buttons.scss
@@ -26,7 +26,7 @@ a.button {
   outline: none;
 
   &:hover {
-    background: rgba(var(--accent), 0.1);
+    background: color-mix(in srgb, var(--accent), transparent 10%);
   }
 
   /* variants */
diff --git a/assets/css/form.scss b/assets/css/form.scss
index 613fd51..fb3bee8 100644
--- a/assets/css/form.scss
+++ b/assets/css/form.scss
@@ -27,7 +27,7 @@ select {
 }
 
 ::placeholder {
-  color: rgba(var(--accent), 0.5);
+  color: color-mix(in srgb, var(--accent), transparent 50%);
 }
 
 input {
diff --git a/assets/css/main.scss b/assets/css/main.scss
index fc24a7e..99f2930 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -130,7 +130,7 @@ figure {
 code, kbd {
   font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
   font-feature-settings: normal;
-  background: rgba(var(--accent), 0.8);
+  background: color-mix(in srgb, var(--accent), transparent 80%);
   color: var(--accent);
   padding: 1px 6px;
   margin: 0 2px;
@@ -203,7 +203,7 @@ blockquote {
 
   &.twitter-tweet {
     position: relative;
-    background: rgba(var(--accent), 0.9);
+    background: color-mix(in srgb, var(--accent), transparent 90%);;
     font: inherit;
     color: inherit;
     border: 1px solid var(--accent);
diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index e352489..7d5ec5c 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -1,5 +1,5 @@
 @mixin menu {
-  --shadow-color: rgba(var(--background), 0.2);
+  --shadow-color: color-mix(in srgb, var(--background), transparent 20%);;
   display: none;
   flex-direction: column;
   --shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
diff --git a/assets/css/pagination.scss b/assets/css/pagination.scss
index 1eb8f87..bf49038 100644
--- a/assets/css/pagination.scss
+++ b/assets/css/pagination.scss
@@ -16,7 +16,7 @@
       margin: 0 auto;
       padding: 5px 10px;
       background: var(--background);
-      color: rgba(var(--color), 0.7);
+      color: color-mix(in srgb, var(--accent), transparent 70%);;
       font-size: .8rem;
       text-transform: uppercase;
       text-decoration: none;
diff --git a/assets/css/post.scss b/assets/css/post.scss
index b3b37d7..594e02e 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -32,7 +32,7 @@
   &-meta {
     font-size: 1rem;
     margin-bottom: 10px;
-    color: rgba(var(--accent), 0.3);
+    color: color-mix(in srgb, var(--accent), transparent 30%);;
 
     & > *:not(:first-child) {
       &::before {
@@ -121,7 +121,7 @@
 }
 
 .hanchor {
-  color: rgba(var(--accent), 0.1);
+  color: color-mix(in srgb, var(--accent), transparent 10%);
   text-decoration: none;
   margin-left: 10px;
   visibility: hidden;
@@ -132,5 +132,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
 }
 
 .footnotes {
-  color: rgba(var(--color), 0.5);
+  color: color-mix(in srgb, var(--accent), transparent 50%);
 }
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 20095ce..0018971 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -81,7 +81,7 @@ pre[class*="language-"] {
   right: 0;
   padding: 0;
   margin: 0;
-  background: rgba(var(--line-highlight-mix), 0.92);
+  background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%);
   pointer-events: none;
   line-height: inherit;
   white-space: pre;