diff --git a/templates/base.html b/templates/base.html
index 69a40f5e8adfcfd8d8887ca6190bd87b6dec644a..07e4d95986a55b1687e97d747a7cdbdfae977c9f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,10 +19,22 @@
     <meta name="author" content="Teckids e.V." />
     <style>
         :root {
-            --teckids-primary-light: {{ PRIMARY_LIGHT }};
-            --teckids-primary-dark: {{ PRIMARY_DARK }};
-            --teckids-secondary-light: {{ SECONDARY_LIGHT }};
-            --teckids-secondary-dark: {{ SECONDARY_DARK }};
+            --teckids-primary-light: {{ PRIMARY_LIGHT }}ff;
+            --teckids-primary-dark: {{ PRIMARY_DARK }}ff;
+            --teckids-secondary-light: {{ SECONDARY_LIGHT }}ff;
+            --teckids-secondary-dark: {{ SECONDARY_DARK }}ff;
+            --teckids-primary-light-10: {{ PRIMARY_LIGHT }}20;
+            --teckids-primary-dark-10: {{ PRIMARY_DARK }}20;
+            --teckids-secondary-light-10: {{ SECONDARY_LIGHT }}20;
+            --teckids-secondary-dark-10: {{ SECONDARY_DARK }}20;
+            --teckids-primary-light-25: {{ PRIMARY_LIGHT }}40;
+            --teckids-primary-dark-25: {{ PRIMARY_DARK }}40;
+            --teckids-secondary-light-25: {{ SECONDARY_LIGHT }}40;
+            --teckids-secondary-dark-25: {{ SECONDARY_DARK }}40;
+            --teckids-primary-light-50: {{ PRIMARY_LIGHT }}80;
+            --teckids-primary-dark-50: {{ PRIMARY_DARK }}80;
+            --teckids-secondary-light-50: {{ SECONDARY_LIGHT }}80;
+            --teckids-secondary-dark-50: {{ SECONDARY_DARK }}80;
         }
     </style>
     <link rel="stylesheet" type="text/css" href="/{{ THEME_STATIC_DIR }}/css/bootstrap.min.css" />