diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index aeac9c0166..0aac4e66c9 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -24,7 +24,7 @@ export default function HoverPopover(theme: Theme) {
       ...baseContainer,
       background: backgroundColor(theme, "on500Info"),
       border: {
-        color: theme.ramps.blue(0.2).hex(),
+        color: theme.ramps.blue(0).hex(),
         width: 1,
       },
     },
@@ -32,7 +32,7 @@ export default function HoverPopover(theme: Theme) {
       ...baseContainer,
       background: backgroundColor(theme, "on500Warning"),
       border: {
-        color: theme.ramps.yellow(0.2).hex(),
+        color: theme.ramps.yellow(0).hex(),
         width: 1,
       },
     },
@@ -40,7 +40,7 @@ export default function HoverPopover(theme: Theme) {
       ...baseContainer,
       background: backgroundColor(theme, "on500Error"),
       border: {
-        color: theme.ramps.red(0.2).hex(),
+        color: theme.ramps.red(0).hex(),
         width: 1,
       }
     },
diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts
index 78856d6191..321184d40d 100644
--- a/styles/src/themes/common/base16.ts
+++ b/styles/src/themes/common/base16.ts
@@ -89,9 +89,9 @@ export function createTheme(
       active: withOpacity(sample(ramps.red, 0.5), 0.25),
     },
     on500Error: {
-      base: sample(ramps.red, 0.1),
-      hovered: sample(ramps.red, 0.15),
-      active: sample(ramps.red, 0.2),
+      base: sample(ramps.red, 0.05),
+      hovered: sample(ramps.red, 0.1),
+      active: sample(ramps.red, 0.15),
     },
     warning: {
       base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
@@ -99,9 +99,9 @@ export function createTheme(
       active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
     },
     on500Warning: {
-      base: sample(ramps.yellow, 0.1),
-      hovered: sample(ramps.yellow, 0.15),
-      active: sample(ramps.yellow, 0.2),
+      base: sample(ramps.yellow, 0.05),
+      hovered: sample(ramps.yellow, 0.1),
+      active: sample(ramps.yellow, 0.15),
     },
     info: {
       base: withOpacity(sample(ramps.blue, 0.5), 0.15),
@@ -109,9 +109,9 @@ export function createTheme(
       active: withOpacity(sample(ramps.blue, 0.5), 0.25),
     },
     on500Info: {
-      base: sample(ramps.blue, 0.1),
-      hovered: sample(ramps.blue, 0.15),
-      active: sample(ramps.blue, 0.2),
+      base: sample(ramps.blue, 0.05),
+      hovered: sample(ramps.blue, 0.1),
+      active: sample(ramps.blue, 0.15),
     },
   };