diff --git a/Build/Sources/Sass/component/_colorpicker.scss b/Build/Sources/Sass/component/_colorpicker.scss
index e8afcf1223688eec29bc3dff8861638cf406f8d5..3c8272f62f9e9554a9dbd6dc4035d6b93005c562 100644
--- a/Build/Sources/Sass/component/_colorpicker.scss
+++ b/Build/Sources/Sass/component/_colorpicker.scss
@@ -3,6 +3,7 @@
 }
 
 .alwan {
+    --color: rgba(var(--rgb), var(--a)); /* These properties are defined via alwan.js */
     color-scheme: light dark;
     direction: ltr;
     width: 100%;
@@ -299,7 +300,6 @@
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
-    background-color: var(--swatches-background, #f5f5f5);
     padding: 10px 15px 0;
     max-height: 100px;
     overflow-y: auto;
@@ -349,7 +349,7 @@
 }
 
 .alwan__swatch:focus {
-    outline: 1px solid var(--typo3-component-hover-border-color);
+    outline: 1px solid var(--color);
     outline-offset: 1px;
 }
 
@@ -401,7 +401,7 @@
     inset-inline-start: 0;
     width: 100%;
     height: 100%;
-    background: var(--typo3-component-bg);
+    background: var(--color);
 }
 
 .alwan__toggle-button {
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index 19819a248abf48846c218bfd967b0e6ed01f942f..00da5dacaf5249fa3f7c6ca5aa4d8f2d2fb2e7e5 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3184,7 +3184,7 @@ select-pure{--select-height:43.2px;--select-width:100%;--border-radius:calc(var(
 100%{transform:rotate(360deg)}
 }
 :root{--alwan-pattern:url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'><path fill='%23D0D0D0' d='M0 0h10v10H0Z'/><path fill='%23fff' d='M0 10h10v10H0Z'/><path fill='%23D0D0D0' d='M10 10h10v10H10Z'/><path fill='%23fff' d='M10 0h10v10H10Z'/></svg>")}
-.alwan{color-scheme:light dark;direction:ltr;width:100%;max-width:260px;background:var(--typo3-component-bg);border:1px solid var(--typo3-component-border-color);overflow-y:auto}
+.alwan{--color:rgba(var(--rgb), var(--a));color-scheme:light dark;direction:ltr;width:100%;max-width:260px;background:var(--typo3-component-bg);border:1px solid var(--typo3-component-border-color);overflow-y:auto}
 .alwan *{box-sizing:border-box}
 .alwan:not(.alwan--open){visibility:hidden}
 .alwan:not(.alwan--open)[data-display=block]{overflow:hidden;height:0;border:0}
@@ -3228,7 +3228,7 @@ select-pure{--select-height:43.2px;--select-width:100%;--border-radius:calc(var(
 .alwan__input:focus{outline:0;border-color:var(--typo3-input-focus-border-color);box-shadow:var(--bs-box-shadow-inset),0 0 0 .25rem rgba(0,120,230,.25)}
 .alwan__input:focus+span{color:var(--typo3-input-focus-border-color)}
 .alwan__input:disabled,.alwan__input:disabled+span{opacity:.5}
-.alwan__swatches{display:flex;justify-content:center;flex-wrap:wrap;background-color:var(--swatches-background,#f5f5f5);padding:10px 15px 0;max-height:100px;overflow-y:auto;border-top:1px solid var(--typo3-component-border-color,#ccc)}
+.alwan__swatches{display:flex;justify-content:center;flex-wrap:wrap;padding:10px 15px 0;max-height:100px;overflow-y:auto;border-top:1px solid var(--typo3-component-border-color,#ccc)}
 .alwan__button{display:inline-block;width:auto;background:rgba(0,0,0,0);color:var(--typo3-component-color);border:1px solid transparent;cursor:pointer;padding:8px 4px;transition:background-color .2s ease-in-out;outline:0}
 .alwan__button:disabled{opacity:.5;cursor:not-allowed}
 .alwan__button:hover:not(:disabled){background-color:var(--typo3-component-hover-bg)}
@@ -3236,13 +3236,13 @@ select-pure{--select-height:43.2px;--select-width:100%;--border-radius:calc(var(
 .alwan__button svg{fill:currentColor;pointer-events:none;vertical-align:middle}
 .alwan__swatch{width:22px;height:22px;margin:0 5px 10px;border-radius:3px}
 .alwan__swatch:hover:not(:disabled){transform:scale(1.1)}
-.alwan__swatch:focus{outline:1px solid var(--typo3-component-hover-border-color);outline-offset:1px}
+.alwan__swatch:focus{outline:1px solid var(--color);outline-offset:1px}
 .alwan__reference{width:26px;height:26px;border-radius:3px;border:3px solid #f5f5f5;outline:1px solid #333}
 .alwan__reference:focus,.alwan__reference:focus-visible{outline-color:#117ce0;box-shadow:0 0 2px 2px #117ce0}
 .alwan__copy-button{margin-inline-end:15px}
 .alwan__backdrop:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999999999;cursor:grabbing}
 .alwan__preview,.alwan__reference,.alwan__swatch{position:relative;background:var(--alwan-pattern);background-clip:padding-box;overflow:hidden;padding:0}
-.alwan__preview:before,.alwan__reference:before,.alwan__swatch:before{content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:var(--typo3-component-bg)}
+.alwan__preview:before,.alwan__reference:before,.alwan__swatch:before{content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;background:var(--color)}
 .alwan__toggle-button{display:flex;align-items:center;justify-content:center;width:100%;padding:0;height:10px;border-top:1px solid var(--typo3-component-border-color);overflow:hidden}
 .alwan--collapse.alwan__swatches{display:none}
 .alwan--collapse+.alwan__toggle-button svg{transform:rotate(180deg)}