diff --git a/web-components/src/components/date-range-picker/tokens/md-date-range-picker-tokens.js b/web-components/src/components/date-range-picker/tokens/md-date-range-picker-tokens.js
index ef7881b938..5140b8a96e 100644
--- a/web-components/src/components/date-range-picker/tokens/md-date-range-picker-tokens.js
+++ b/web-components/src/components/date-range-picker/tokens/md-date-range-picker-tokens.js
@@ -9,7 +9,7 @@ const datepicker = {
     hover: {
       "bg-color": {
         light: colors.gray[20].name,
-        dark: colors.gray[70].name
+        dark: colors.gray[90].name
       }
     }
   },
diff --git a/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js b/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js
index d74ee79a09..d3fe15e066 100644
--- a/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js
+++ b/web-components/src/components/datepicker/tokens/md-datepicker-tokens.js
@@ -9,7 +9,7 @@ const datepicker = {
     hover: {
       "bg-color": {
         light: colors.gray[20].name,
-        dark: colors.gray[70].name
+        dark: colors.gray[90].name
       }
     }
   },