diff --git a/demo/sites/components/hover-effects.html b/demo/sites/components/hover-effects.html
index 5efa5b23d..5a7da5449 100644
--- a/demo/sites/components/hover-effects.html
+++ b/demo/sites/components/hover-effects.html
@@ -54,8 +54,7 @@
           alt="Louvre" />
         <a href="#!">
           <div
-            class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
-            style="background-color: rgba(251, 251, 251, 0.2)"></div>
+            class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsl(0,0%,98.4%,0.2)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
         </a>
       </div>
 
diff --git a/site/content/docs/standard/content-styles/hover-effects/index.html b/site/content/docs/standard/content-styles/hover-effects/index.html
index 28727348f..c1b561af9 100644
--- a/site/content/docs/standard/content-styles/hover-effects/index.html
+++ b/site/content/docs/standard/content-styles/hover-effects/index.html
@@ -43,8 +43,7 @@
         alt="Louvre" />
       <a href="#!">
         <div
-          class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
-          style="background-color: rgba(251, 251, 251, 0.2)"></div>
+          class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-[hsl(0,0%,98.4%,0.2)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
       </a>
     </div>
   </div>
@@ -65,8 +64,7 @@
           alt="Louvre" />
         <a href="#!">
           <div
-            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
-            style="background-color: rgba(251, 251, 251, 0.2)"></div>
+            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-[hsl(0,0%,98.4%,0.2)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
         </a>
       </div>
       {{< /twsnippet/code >}}