diff --git a/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss b/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss
index 7251f7084b..1661400e05 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss
+++ b/wagtail/admin/static_src/wagtailadmin/scss/_variables.scss
@@ -27,7 +27,8 @@ $breakpoint-desktop-larger: 100em; // 1600px
 // colours
 $color-teal: #43b1b0;
 $color-teal-darker: darken($color-teal, 10%);
-$color-teal-dark: #246060;
+$color-teal-dark: darken(saturate(adjust-hue($color-teal, 1), 0.37), 21.96);
+
 $color-blue: #71b2d4;
 $color-red: #cd3238;
 $color-orange: #e9b04d;
@@ -38,22 +39,25 @@ $color-white: #fff;
 $color-black: #000;
 
 // darker to lighter
-$color-grey-1: #333;
-$color-grey-1-1: #404040;
-$color-grey-2: #666;
-$color-grey-3: #d9d9d9;
-$color-grey-4: #e6e6e6;
-$color-grey-5: #fafafa;
+$color-grey-1: darken($color-white, 80);
+$color-grey-1-1: darken($color-white, 74.9);
+$color-grey-2: darken($color-white, 60);
 
-$color-menu-text: #cacaca; // was #aaa wich was too low contrast
+$color-grey-3: darken($color-white, 14.9);
+$color-grey-4: darken($color-white, 9.8);
+$color-grey-5: darken($color-white, 1.96);
+
+$color-menu-text: darken($color-white, 20.78);
 
 $color-thead-bg: $color-grey-5;
-$color-header-bg: $color-teal; // #ff6a58;
+$color-header-bg: $color-teal;
+
 $color-fieldset-hover: $color-grey-5;
 $color-input-border: $color-grey-4;
-$color-input-focus: #f4fcfc;
-$color-input-focus-border: darken($color-input-focus, 40%);
-$color-input-error-bg: #feedee;
+$color-input-focus: lighten(saturate(adjust-hue($color-teal, 1), 12.06), 49.41);
+$color-input-focus-border: lighten(saturate(adjust-hue($color-teal, 1), 11.8), 9.41);
+$color-input-error-bg: lighten(saturate(adjust-hue($color-red, -1), 28.69), 46.27);
+
 $color-button: $color-teal;
 $color-button-hover: $color-teal-darker;
 $color-button-yes: $color-green;