diff --git a/frontend/src/styles/components/action.scss b/frontend/src/styles/components/action.scss
index 453d20d..1c70c73 100644
--- a/frontend/src/styles/components/action.scss
+++ b/frontend/src/styles/components/action.scss
@@ -12,7 +12,7 @@
 		color 200ms ease-in-out;
 }
 .action--primary:hover {
-	background-color: #{color.adjust(settings.$colors-emphasizing, $lightness: -10%)};
+	background-color: var(--hb-colors-emphasizing-darken);
 	color: inherit;
 }
 .action--primary:not(.action--lg) {
diff --git a/frontend/src/styles/components/brontographics.scss b/frontend/src/styles/components/brontographics.scss
index 2d5fee0..1194412 100644
--- a/frontend/src/styles/components/brontographics.scss
+++ b/frontend/src/styles/components/brontographics.scss
@@ -7,7 +7,7 @@
     transition: fill 200ms linear;
 }
 .brontographics__shape:hover {
-    fill: color.adjust(settings.$colors-emphasizing, $lightness: -10%);
+    fill: var(--hb-colors-emphasizing-darken);
 }
 
 .brontographics__label {
diff --git a/frontend/src/styles/components/buttons.scss b/frontend/src/styles/components/buttons.scss
index 96b5759..28a48dd 100644
--- a/frontend/src/styles/components/buttons.scss
+++ b/frontend/src/styles/components/buttons.scss
@@ -67,7 +67,7 @@
 }
 .button--secondary::after {
 	content: "";
-	background-color: color.adjust(settings.$colors-default-background, $alpha: -0.2);
+	background-color: color-mix(in srgb, var(--hb-colors-default-background) 80%, transparent);
 	width: 13em;
 	height: 13em;
 	position: absolute;
@@ -83,7 +83,7 @@
 }
 @media (settings.$buttons-secondary-breakpoint-centeredButton-from) {
 	.button--secondary::after {
-		background-color: color.adjust(settings.$colors-default-background, $alpha: -0.1);
+		background-color: color-mix(in srgb, var(--hb-colors-default-background) 90%, transparent);
 		width: 100%;
 		height: 100%;
 		top: 0;
@@ -110,7 +110,7 @@
 }
 .button--customization:hover,
 .button--customization:active {
-	background-color: color.adjust(settings.$colors-tinge, $lightness: -10%);
+	background-color: var(--hb-colors-tinge-darken);
 	color: initial !important; // overwrite `.content a` style
 }
 .button--customization:active {
diff --git a/frontend/src/styles/components/content.scss b/frontend/src/styles/components/content.scss
index d94a6ab..0ef1839 100644
--- a/frontend/src/styles/components/content.scss
+++ b/frontend/src/styles/components/content.scss
@@ -4,7 +4,7 @@
 
 .content {
 	padding: 0.5rlh 1rlh 2rlh;
-	color: color.adjust(settings.$colors-text, $alpha: -0.2);
+	color: color-mix(in srgb, var(--hb-colors-text) 80%, transparent);
 }
 @media (settings.$header-breakpoint-navigationHiddenToVisible-visible-from) {
 	.content {
@@ -16,7 +16,7 @@
 	padding-block-start: 2rlh;
 }
 .content a {
-	color: color.adjust(settings.$colors-text, $alpha: -0.2);
+	color: color-mix(in srgb, var(--hb-colors-text) 80%, transparent);
 }
 .content a:hover {
 	color: var(--hb-colors-emphasizing); // same as in defaults
diff --git a/frontend/src/styles/components/eventLabels.scss b/frontend/src/styles/components/eventLabels.scss
index 88623f2..afd81f0 100644
--- a/frontend/src/styles/components/eventLabels.scss
+++ b/frontend/src/styles/components/eventLabels.scss
@@ -11,7 +11,7 @@
 }
 .eventLabels__item {
 	padding: 0.25rlh 0.5rlh calc(0.25rlh - 0.15em);
-	background-color: color.adjust(settings.$colors-default-background, $alpha: -0.1);
+	background-color: color-mix(in srgb, var(--hb-colors-default-background) 90%, transparent);
 	background-repeat: no-repeat;
 	border-radius: 2em;
 }
diff --git a/frontend/src/styles/components/expandable.scss b/frontend/src/styles/components/expandable.scss
index 75bdc0d..e86385c 100644
--- a/frontend/src/styles/components/expandable.scss
+++ b/frontend/src/styles/components/expandable.scss
@@ -26,7 +26,7 @@
 	background-color: transparent; // overwrite button style
 }
 .hb-expandable--expanded .hb-expandable__toggler:hover {
-	background-color: color.adjust(settings.$colors-tinge, $lightness: -10%);
+	background-color: var(--hb-colors-tinge-darken);
 }
 .hb-expandable--expanded .hb-expandable__toggler::after {
 	transform: rotate(180deg);
diff --git a/frontend/src/styles/components/footer.scss b/frontend/src/styles/components/footer.scss
index 1f8013e..d7fe180 100644
--- a/frontend/src/styles/components/footer.scss
+++ b/frontend/src/styles/components/footer.scss
@@ -57,7 +57,7 @@
 }
 .footer__navigation .menu > .menu-item.current-menu-item > a:hover::before,
 .footer__navigation .menu > .menu-item.active > a:hover::before {
-	background-color: color.adjust(settings.$colors-emphasizing, $lightness: -10%);
+	background-color: var(--hb-colors-emphasizing-darken);
 }
 
 .footer__bottom {
diff --git a/frontend/src/styles/components/header.scss b/frontend/src/styles/components/header.scss
index 101f53a..a60576f 100644
--- a/frontend/src/styles/components/header.scss
+++ b/frontend/src/styles/components/header.scss
@@ -225,7 +225,7 @@
 }
 @media (settings.$header-breakpoint-navigationHiddenToVisible-visible-from) {
 	.header-mainNavigation .menu > .menu-item:is(.active, .current_page_item, .current-page-ancestor) > a:hover {
-		background-color: color.adjust(settings.$colors-emphasizing, $lightness: -10%);
+		background-color: var(--hb-colors-emphasizing-darken);
 	}
 }
 @media (settings.$header-breakpoint-navigationHiddenToVisible-visible-from) {
@@ -269,7 +269,7 @@
 		color: var(--hb-colors-default-background) !important;
 	}
 	.header-mainNavigation__languageLink--active:hover {
-		background-color: color.adjust(settings.$colors-emphasizing, $lightness: -10%);
+		background-color: var(--hb-colors-emphasizing-darken);
 	}
 }
 @media (settings.$header-breakpoint-navigationHiddenToVisible-visible-from) {
@@ -300,7 +300,7 @@
 		background-image: url("../../../images/icons/icon-datetime-white.svg");
 	}
 	.header__futureEventsLink--active:hover {
-		background-color: color.adjust(settings.$colors-emphasizing, $lightness: -10%);
+		background-color: var(--hb-colors-emphasizing-darken);
 	}
 
 	.header__searchBarToggler {
diff --git a/frontend/src/styles/components/icon.scss b/frontend/src/styles/components/icon.scss
index b610e6b..77448ba 100644
--- a/frontend/src/styles/components/icon.scss
+++ b/frontend/src/styles/components/icon.scss
@@ -7,5 +7,5 @@
 	transition: fill 100ms linear;
 }
 .icon:hover {
-	fill: color.adjust(settings.$colors-emphasizing, $lightness: -10%);
+	fill: var(--hb-colors-emphasizing-darken);
 }
diff --git a/frontend/src/styles/components/message.scss b/frontend/src/styles/components/message.scss
index 9f5fd11..c98f2bc 100644
--- a/frontend/src/styles/components/message.scss
+++ b/frontend/src/styles/components/message.scss
@@ -5,7 +5,7 @@
 	max-width: max-content;
 	margin-inline: auto;
 	padding: 1rlh 2rlh;
-	background-color: color.adjust(settings.$colors-emphasizing, $alpha: -0.9);
+	background-color: color-mix(in srgb, var(--hb-colors-emphasizing) 10%, transparent);
 	border-radius: 2em;
 	text-align: center;
 }
diff --git a/frontend/src/styles/components/newsletter.scss b/frontend/src/styles/components/newsletter.scss
index 82f9f5e..10ad589 100644
--- a/frontend/src/styles/components/newsletter.scss
+++ b/frontend/src/styles/components/newsletter.scss
@@ -2,7 +2,7 @@
 @use "../imports/settings";
 
 .newsletter {
-	background-color: color.adjust(settings.$colors-tinge, $lightness: 3%);
+	background-color: var(--hb-colors-light-grey-background);
 	padding: 2rlh 1rlh;
 	text-align: center;
 }
diff --git a/frontend/src/styles/components/presentationBox.scss b/frontend/src/styles/components/presentationBox.scss
index 4745720..e2e095b 100644
--- a/frontend/src/styles/components/presentationBox.scss
+++ b/frontend/src/styles/components/presentationBox.scss
@@ -77,7 +77,7 @@
 		position: absolute;
 		inset-block-start: 0;
 		z-index: -1;
-		background-color: color.adjust(settings.$colors-tinge, $alpha: -0.1);
+		background-color: color-mix(in srgb, var(--hb-colors-tinge) 90%, transparent);
 	}
 }
 @include presentationBox-breakpoint-textOnSide-from() {
diff --git a/frontend/src/styles/components/related.scss b/frontend/src/styles/components/related.scss
index f1ddd79..c2ad0b5 100644
--- a/frontend/src/styles/components/related.scss
+++ b/frontend/src/styles/components/related.scss
@@ -61,7 +61,7 @@ aside .related-list-item:hover {
 
 aside .related-list-item::before {
 	content: "";
-	background-color: color.adjust(settings.$colors-tinge, $alpha: -0.1);
+	background-color: color-mix(in srgb, var(--hb-colors-tinge) 90%, transparent);
 	position: absolute;
 	width: 100%;
 	height: 100%;
diff --git a/frontend/src/styles/imports/defaults.scss b/frontend/src/styles/imports/defaults.scss
index 6eebab6..d02ba8f 100644
--- a/frontend/src/styles/imports/defaults.scss
+++ b/frontend/src/styles/imports/defaults.scss
@@ -28,11 +28,14 @@
 
 
 :root {
-	--hb-colors-default-background: #{settings.$colors-default-background};
-	--hb-colors-emphasizing: #{settings.$colors-emphasizing};
+	--hb-colors-default-background: #ffffff;
+	--hb-colors-light-grey-background: #f9faf9; /* tinge - lightness: 3% */
+	--hb-colors-emphasizing: #00a651;
+	--hb-colors-emphasizing-darken: #007338; /* lightness: -10% */
 	--hb-colors-framing: #b3b3b3;
-	--hb-colors-text: #{settings.$colors-text};
-	--hb-colors-tinge: #{settings.$colors-tinge};
+	--hb-colors-text: #000000;
+	--hb-colors-tinge: #f0f3f2;
+	--hb-colors-tinge-darken: #d4dcd9; /* lightness: -10% */
 	--hb-colors-links: #e6e6e6;
 	--hb-colors-error: #a60000;
 
diff --git a/frontend/src/styles/imports/settings.scss b/frontend/src/styles/imports/settings.scss
index 190d131..9117eab 100644
--- a/frontend/src/styles/imports/settings.scss
+++ b/frontend/src/styles/imports/settings.scss
@@ -1,8 +1,3 @@
-$colors-default-background: #ffffff;
-$colors-emphasizing: #00a651;
-$colors-text: #000000;
-$colors-tinge: #f0f3f2;
-
 $typography-breakpoint: 60em;
 $typography-breakpoint-small-until: "max-width: " + $typography-breakpoint;
 $typography-breakpoint-large-from: "min-width: " + ($typography-breakpoint + 0.001);