diff --git a/packages/material/scss/chip/_variables.scss b/packages/material/scss/chip/_variables.scss
index 6ef4ecd4678..715a54eb6be 100644
--- a/packages/material/scss/chip/_variables.scss
+++ b/packages/material/scss/chip/_variables.scss
@@ -21,17 +21,17 @@ $chip-remove-icon-font-size: 14px !default;
 
 $chip-avatar-size: 24px !default;
 
-$chip-filled-bg: #e0e0e0 !default;
+$chip-filled-bg: try-shade( $body-bg, 1 ) !default;
 $chip-filled-text: $body-text !default;
 $chip-filled-border: transparent !default;
 
-$chip-filled-hovered-bg: #d8d8d8 !default;
+$chip-filled-hovered-bg: try-shade( $body-bg, 2 ) !default;
 $chip-filled-hovered-border: transparent !default;
 
-$chip-filled-focused-bg: #c2c2c2 !default;
+$chip-filled-focused-bg: try-shade( $body-bg, 3 ) !default;
 $chip-filled-focused-shadow: none !default;
 
-$chip-filled-selected-bg: #c2c2c2 !default;
+$chip-filled-selected-bg: try-shade( $body-bg, 4 ) !default;
 $chip-filled-selected-border: transparent !default;
 
 $chip-filled-success-bg: rgba($success, .12) !default;
@@ -52,18 +52,18 @@ $chip-filled-info-border: transparent !default;
 
 $chip-outline-bg: transparent !default;
 $chip-outline-text: $body-text !default;
-$chip-outline-border: rgba(0, 0, 0, .2) !default;
+$chip-outline-border: rgba( $body-text , .2) !default;
 
-$chip-outline-hovered-bg: #f6f6f6 !default;
+$chip-outline-hovered-bg: try-shade( $body-bg, .5 ) !default;
 $chip-outline-hovered-text: $chip-outline-text !default;
 $chip-outline-hovered-border: $chip-outline-border !default;
 
-$chip-outline-focused-bg: #e0e0e0 !default;
+$chip-outline-focused-bg: try-shade( $body-bg, 1 ) !default;
 $chip-outline-focused-text: $chip-outline-text !default;
 $chip-outline-focused-border: $chip-outline-border !default;
 $chip-outline-focused-shadow: none !default;
 
-$chip-outline-selected-bg: #e0e0e0 !default;
+$chip-outline-selected-bg: try-shade( $body-bg, 1 ) !default;
 $chip-outline-selected-text: $chip-outline-text !default;
 
 $chip-outline-success-bg: transparent !default;