diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 3599edbe7..38036fbc2 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -175,7 +175,7 @@ a {
 }
 
 a:hover {
-  color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
+  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
 }
 
 abbr[title] {
@@ -310,7 +310,7 @@ svg.wordmark {
 
 .anchor-heading a::after {
   content: '#';
-  color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
+  color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
   margin-inline: 0.5rem;
   opacity: 0;
   transition: 100ms opacity;
@@ -492,11 +492,11 @@ pre .token.italic {
 }
 
 .copy-code-button::part(button):hover {
-  background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 4%);
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
 }
 
 .copy-code-button::part(button):active {
-  background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 8%);
+  background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
 }
 
 pre .copy-code-button {
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index 92b017b13..47e9f211b 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -41,7 +41,7 @@ export default css`
   }
 
   :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
-    color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
+    color: color-mix(in oklab, var(--wa-color-brand-text-on-surface), var(--wa-color-tint-hover));
   }
 
   :host(:not(:last-of-type)) .breadcrumb-item__label:active {
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 8efd51724..f0b65b8a6 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -99,11 +99,11 @@ export default css`
   }
 
   .button--standard.button--brand:hover:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
   }
 
   .button--standard.button--brand:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Success */
@@ -113,11 +113,11 @@ export default css`
   }
 
   .button--standard.button--success:hover:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
   }
 
   .button--standard.button--success:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Neutral */
@@ -127,11 +127,11 @@ export default css`
   }
 
   .button--standard.button--neutral:hover:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
   }
 
   .button--standard.button--neutral:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Warning */
@@ -140,11 +140,11 @@ export default css`
     color: var(--wa-color-warning-text-on-vivid);
   }
   .button--standard.button--warning:hover:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
   }
 
   .button--standard.button--warning:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Danger */
@@ -154,11 +154,11 @@ export default css`
   }
 
   .button--standard.button--danger:hover:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
   }
 
   .button--standard.button--danger:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
   }
 
   /*
@@ -178,14 +178,14 @@ export default css`
 
   .button--outline.button--brand:hover:not(.button--disabled),
   .button--outline.button--brand.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
-    border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
+    border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
     color: var(--wa-color-brand-text-on-vivid);
   }
 
   .button--outline.button--brand:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
-    border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
+    border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Success */
@@ -196,14 +196,14 @@ export default css`
 
   .button--outline.button--success:hover:not(.button--disabled),
   .button--outline.button--success.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
-    border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
+    border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
     color: var(--wa-color-success-text-on-vivid);
   }
 
   .button--outline.button--success:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
-    border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
+    border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
   }
 
   .button--outline.button--small {
@@ -226,14 +226,14 @@ export default css`
 
   .button--outline.button--neutral:hover:not(.button--disabled),
   .button--outline.button--neutral.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
-    border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
+    border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
     color: var(--wa-color-neutral-text-on-vivid);
   }
 
   .button--outline.button--neutral:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
-    border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
+    border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Warning */
@@ -244,14 +244,14 @@ export default css`
 
   .button--outline.button--warning:hover:not(.button--disabled),
   .button--outline.button--warning.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
-    border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
+    border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
     color: var(--wa-color-warning-text-on-vivid);
   }
 
   .button--outline.button--warning:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
-    border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
+    border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Danger */
@@ -262,14 +262,14 @@ export default css`
 
   .button--outline.button--danger:hover:not(.button--disabled),
   .button--outline.button--danger.button--checked:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
-    border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
+    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
+    border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
     color: var(--wa-color-danger-text-on-vivid);
   }
 
   .button--outline.button--danger:active:not(.button--disabled) {
-    background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
-    border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
+    background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
+    border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
   }
 
   @media (forced-colors: active) {
@@ -289,7 +289,7 @@ export default css`
   }
 
   .button--text:hover:not(.button--disabled) {
-    color: color-mix(in oklch, var(--wa-color-text-link), white 6%);
+    color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-tint-hover));
   }
 
   .button--text:focus-visible:not(.button--disabled),
@@ -368,7 +368,7 @@ export default css`
 
   .button--loading wa-spinner {
     --indicator-color: currentColor;
-    --track-color: color-mix(in oklch, currentColor, transparent 90%);
+    --track-color: color-mix(in oklab, currentColor, transparent 90%);
     position: absolute;
     font-size: 1em;
     height: 1em;
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index 6e4e9af8e..c89f9063b 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/src/components/icon-button/icon-button.styles.ts
@@ -26,11 +26,11 @@ export default css`
 
   .icon-button:hover:not(.icon-button--disabled),
   .icon-button:focus-visible:not(.icon-button--disabled) {
-    color: var(--wa-color-brand-text-on-surface);
+    color: var(--wa-color-brand-fill-vivid);
   }
 
   .icon-button:active:not(.icon-button--disabled) {
-    color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
+    color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
   }
 
   .icon-button:focus {
diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
index 27bbdf605..bb8a67d79 100644
--- a/src/components/input/input.styles.ts
+++ b/src/components/input/input.styles.ts
@@ -239,7 +239,7 @@ export default css`
 
   .input__clear:active,
   .input__password-toggle:active {
-    color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
+    color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
   }
 
   .input__clear:focus,
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index 0d67004ad..977f1acc5 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -261,7 +261,7 @@ export default css`
   }
 
   .select__clear:active {
-    color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
+    color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
   }
 
   /* Expand icon */
diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts
index 82ad8bfce..9d7cd87ce 100644
--- a/src/components/skeleton/skeleton.styles.ts
+++ b/src/components/skeleton/skeleton.styles.ts
@@ -7,7 +7,7 @@ export default css`
   :host {
     --border-radius: var(--wa-corners-pill);
     --color: var(--wa-color-neutral-fill-muted);
-    --sheen-color: color-mix(in oklch, var(--wa-color-neutral-fill-muted), white 50%);
+    --sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), white 50%);
 
     display: block;
     position: relative;
diff --git a/src/themes/default.css b/src/themes/default.css
index fe1fa55ad..6becd5d6f 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -86,11 +86,13 @@
   --wa-color-tint-white: rgb(255 255 255 / 0.2);
   --wa-color-tint-black: rgb(0 0 0 / 0.2);
 
+  --wa-color-tint-hover: black 8%;
+  --wa-color-tint-active: black 16%;
+
   /**
    * Semantic color variants
    */
   /* TODO: Add comments for semantic color tokens and usage expectations */
-  /* TODO: Add tokens for hover and active tints */
   /* CONSIDER: Change -alt naming to -tint or -shade? */
   --wa-color-brand-fill-vivid: var(--wa-color-blue-50);
   --wa-color-brand-fill-vivid-alt: var(--wa-color-blue-40);