diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss
index 3291225c01..ba50629d03 100644
--- a/app/webpacker/css/admin_v3/components/navigation.scss
+++ b/app/webpacker/css/admin_v3/components/navigation.scss
@@ -23,13 +23,13 @@ nav.menu {
       }
 
       &.active a {
-        color: $color-2;
+        color: $green;
         border-left-width: 0;
-        border-bottom-color: $color-2;
+        border-bottom-color: $green;
       }
 
       &:hover a {
-        color: $color-2;
+        color: $green;
       }
     }
   }
@@ -53,7 +53,7 @@ nav.menu {
 
       &:hover {
         i {
-          color: $color-2;
+          color: $green;
         }
       }
     }
@@ -76,7 +76,7 @@ nav.menu {
     a {
       display: block;
       padding: 25px 5px;
-      color: $color-9 !important;
+      color: $dark-grey !important;
       position: relative;
       text-align: center;
       font-weight: 600;
@@ -87,8 +87,8 @@ nav.menu {
       }
 
       &:hover {
-        color: $color-5 !important;
-        border-bottom: 2px solid $color-5;
+        color: $red !important;
+        border-bottom: 2px solid $red;
       }
 
       span.text {
@@ -103,7 +103,7 @@ nav.menu {
 
     .dropdown {
       width: 300px;
-      background-color: $color-3;
+      background-color: $teal;
       width: 200px;
       z-index: 100000;
 
@@ -124,13 +124,13 @@ nav.menu {
 
 #sub-menu {
   padding-bottom: 0;
-  box-shadow: 0px 1px 0px $color-7;
+  box-shadow: 0px 1px 0px $light-grey;
 
   li {
     a {
       display: block;
       padding: 12px 20px;
-      color: $color-9;
+      color: $dark-grey;
       text-align: center;
       position: relative;
       font-size: 14px;
@@ -138,8 +138,8 @@ nav.menu {
 
     &.selected a,
     a:hover {
-      color: $color-5;
-      border-bottom: 2px solid $color-5;
+      color: $red;
+      border-bottom: 2px solid $red;
     }
   }
 }
diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 6c14a1e787..dc269c4227 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -3,7 +3,7 @@
   margin: 2em 0 1em;
   padding: 10px 0;
 
-  background-color: $color-7;
+  background-color: $light-grey;
 
   .page {
     padding: 5px 8px;
@@ -12,22 +12,22 @@
     text-align: center;
 
     &.current {
-      background-color: $color-2;
+      background-color: $green;
       border-radius: 3px;
-      color: $color-1;
+      color: $white;
     }
   }
 
   button {
     margin: 0 0.35em;
 
-    background-color: $color-1;
-    color: $color-8;
+    background-color: $white;
+    color: $near-black;
     box-shadow: $color-btn-shadow;
 
     &.active {
-      color: $color-1;
-      background-color: $color-5;
+      color: $white;
+      background-color: $red;
       cursor: default;
     }
 
diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss
index 6130500366..a5f0777b9b 100644
--- a/app/webpacker/css/admin_v3/globals/palette.scss
+++ b/app/webpacker/css/admin_v3/globals/palette.scss
@@ -1,10 +1,21 @@
 // Basic color palette for admin styles v3
-$color-1: #ffffff !default; // White
-$color-2: #9fc820 !default; // Green
-$color-3: #008397 !default; // Teal (Allports)
-$color-4: #004e5b !default; // Dark Blue (Sherpa)
-$color-5: #c85136 !default; // Red/Orange (Mojo)
-$color-6: #ff9300 !default; // Yellow
-$color-7: #eff1f2 !default; // Light grey
-$color-8: #191c1d !default; // Near-black
-$color-9: #2e3132 !default; // Dark Grey
+$white: #ffffff !default; // White
+$green: #9fc820 !default; // Green
+$teal: #008397 !default; // Teal (Allports)
+$dark-blue: #004e5b !default; // Dark Blue (Sherpa)
+$red: #c85136 !default; // Red/Orange (Mojo)
+$yellow: #ff9300 !default; // Yellow
+$light-grey: #eff1f2 !default; // Light grey
+$near-black: #191c1d !default; // Near-black
+$dark-grey: #2e3132 !default; // Dark Grey
+
+// Old colour variables for backwards compatibility
+$color-1: $white;
+$color-2: $green;
+$color-3: $teal;
+$color-4: $dark-blue;
+$color-5: $red;
+$color-6: $yellow;
+$color-7: $light-grey;
+$color-8: $near-black;
+$color-9: $dark-grey;
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index c49ee66953..67a37c2f9f 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -10,32 +10,32 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
 //--------------------------------------------------------------
 
 // Body base colors
-$color-body-bg:                  $color-1 !default;
-$color-body-text:                $color-8 !default;
-$color-headers:                  $color-4 !default;
-$color-link:                     $color-3 !default;
+$color-body-bg:                  $white !default;
+$color-body-text:                $near-black !default;
+$color-headers:                  $dark-blue !default;
+$color-link:                     $teal !default;
 $color-link-hover:               lighten($color-link, 2) !default;
-$color-link-active:              $color-2 !default;
-$color-link-focus:               $color-2 !default;
-$color-link-visited:             $color-3 !default;
-$color-border:                   $color-7 !default;
+$color-link-active:              $green !default;
+$color-link-focus:               $green !default;
+$color-link-visited:             $teal !default;
+$color-border:                   $light-grey !default;
 
 // Basic flash colors
-$color-success:                  $color-2 !default;
-$color-notice:                   $color-6 !default;
-$color-error:                    $color-5 !default;
+$color-success:                  $green !default;
+$color-notice:                   $yellow !default;
+$color-error:                    $red !default;
 
 // Table colors
-$color-tbl-cell-bg:              $color-1 !default;
+$color-tbl-cell-bg:              $white !default;
 $color-tbl-thead-txt:            $color-headers !default;
-$color-tbl-thead-bg:             $color-7 !default;
+$color-tbl-thead-bg:             $light-grey !default;
 
 // Button colors
-$color-btn-bg:                   $color-3 !default;
-$color-btn-text:                 $color-1 !default;
+$color-btn-bg:                   $teal !default;
+$color-btn-text:                 $white !default;
 $color-btn-shadow:               0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07) !default;
 $color-btn-hover-bg:             lighten($color-btn-bg, 2) !default;
-$color-btn-hover-text:           $color-1 !default;
+$color-btn-hover-text:           $white !default;
 
 // Actions colors
 $color-action-edit-bg:           very-light($color-success, 5  ) !default;
@@ -56,65 +56,65 @@ $color-action-mail-bg:           very-light($color-success, 5  ) !default;
 $color-action-mail-brd:          very-light($color-success, 20 ) !default;
 
 // Select2 select field colors
-$color-sel-bg:                   $color-3 !default;
-$color-sel-text:                 $color-1 !default;
+$color-sel-bg:                   $teal !default;
+$color-sel-text:                 $white !default;
 $color-sel-hover-bg:             lighten($color-sel-bg, 2) !default;
-$color-sel-hover-text:           $color-1 !default;
+$color-sel-hover-text:           $white !default;
 
 // Text inputs colors
 $color-txt-brd:                  $color-border !default;
-$color-txt-text:                 $color-8 !default;
-$color-txt-hover-brd:            $color-3 !default;
+$color-txt-text:                 $near-black !default;
+$color-txt-hover-brd:            $teal !default;
 
 // States label colors
 $color-ste-complete-bg:          $color-success !default;
-$color-ste-complete-text:        $color-1 !default;
+$color-ste-complete-text:        $white !default;
 $color-ste-completed-bg:         $color-success !default;
-$color-ste-completed-text:       $color-1 !default;
+$color-ste-completed-text:       $white !default;
 $color-ste-sold-bg:              $color-success !default;
-$color-ste-sold-text:            $color-1 !default;
+$color-ste-sold-text:            $white !default;
 $color-ste-pending-bg:           $color-notice !default;
-$color-ste-pending-text:         $color-1 !default;
+$color-ste-pending-text:         $white !default;
 $color-ste-requires_authorization-bg: $color-notice !default;
-$color-ste-requires_authorization-text: $color-1 !default;
+$color-ste-requires_authorization-text: $white !default;
 $color-ste-awaiting_return-bg:   $color-notice !default;
-$color-ste-awaiting_return-text: $color-1 !default;
+$color-ste-awaiting_return-text: $white !default;
 $color-ste-returned-bg:          $color-notice !default;
-$color-ste-returned-text:        $color-1 !default;
+$color-ste-returned-text:        $white !default;
 $color-ste-credit_owed-bg:       $color-notice !default;
-$color-ste-credit_owed-text:     $color-1 !default;
+$color-ste-credit_owed-text:     $white !default;
 $color-ste-paid-bg:              $color-success !default;
-$color-ste-paid-text:            $color-1 !default;
+$color-ste-paid-text:            $white !default;
 $color-ste-shipped-bg:           $color-success !default;
-$color-ste-shipped-text:         $color-1 !default;
+$color-ste-shipped-text:         $white !default;
 $color-ste-balance_due-bg:       $color-notice !default;
-$color-ste-balance_due-text:     $color-1 !default;
+$color-ste-balance_due-text:     $white !default;
 $color-ste-backorder-bg:         $color-notice !default;
-$color-ste-backorder-text:       $color-1 !default;
+$color-ste-backorder-text:       $white !default;
 $color-ste-none-bg:              $color-error !default;
-$color-ste-none-text:            $color-1 !default;
+$color-ste-none-text:            $white !default;
 $color-ste-ready-bg:             $color-success !default;
-$color-ste-ready-text:           $color-1 !default;
+$color-ste-ready-text:           $white !default;
 $color-ste-void-bg:              $color-error !default;
-$color-ste-void-text:            $color-1 !default;
+$color-ste-void-text:            $white !default;
 $color-ste-canceled-bg:          $color-error !default;
-$color-ste-canceled-text:        $color-1 !default;
+$color-ste-canceled-text:        $white !default;
 $color-ste-address-bg:           $color-error !default;
-$color-ste-address-text:         $color-1 !default;
+$color-ste-address-text:         $white !default;
 $color-ste-checkout-bg:          $color-notice !default;
-$color-ste-checkout-text:        $color-1 !default;
+$color-ste-checkout-text:        $white !default;
 $color-ste-cart-bg:              $color-notice !default;
-$color-ste-cart-text:            $color-1 !default;
+$color-ste-cart-text:            $white !default;
 $color-ste-payment-bg:           $color-error !default;
-$color-ste-payment-text:         $color-1 !default;
+$color-ste-payment-text:         $white !default;
 $color-ste-delivery-bg:          $color-success !default;
-$color-ste-delivery-text:        $color-1 !default;
+$color-ste-delivery-text:        $white !default;
 $color-ste-confirmation-bg:      $color-error !default;
-$color-ste-confirmation-text:    $color-1 !default;
+$color-ste-confirmation-text:    $white !default;
 $color-ste-active-bg:            $color-success !default;
-$color-ste-active-text:          $color-1 !default;
+$color-ste-active-text:          $white !default;
 $color-ste-inactive-bg:          $color-notice !default;
-$color-ste-inactive-text:        $color-1 !default;
+$color-ste-inactive-text:        $white !default;
 
 // Available states
 $states:                      completed,                 complete,                 sold,                 pending,                 awaiting_return,                 returned,                 credit_owed,                 paid,                 shipped,                 balance_due,                 backorder,                 checkout,                 cart,                 address,                 delivery,                 payment,                 confirmation,                 canceled,                 ready,                 void,                 requires_authorization,                 active,                 inactive  !default;
diff --git a/app/webpacker/css/admin_v3/shared/layout.scss b/app/webpacker/css/admin_v3/shared/layout.scss
index c5cd8c71e2..addd363521 100644
--- a/app/webpacker/css/admin_v3/shared/layout.scss
+++ b/app/webpacker/css/admin_v3/shared/layout.scss
@@ -12,19 +12,19 @@
     margin-top: 25px;
 
     h1 {
-      color: $color-8;
+      color: $near-black;
     }
 
     .ofn-drop-down {
       border: 0;
       background-color: $spree-blue;
-      color: $color-1;
+      color: $white;
       float: none;
       margin-left: 3px;
       &:hover,
       &.expanded {
         border: 0;
-        color: $color-1;
+        color: $white;
       }
     }
 
@@ -97,7 +97,7 @@
 // Header
 //---------------------------------------------------
 #header {
-  background-color: $color-1;
+  background-color: $white;
   padding: 5px 0;
 }
 
@@ -107,14 +107,14 @@
 
 .page-title {
   i {
-    color: $color-2;
+    color: $green;
   }
 }
 
 // Content
 //---------------------------------------------------
 #content {
-  background-color: $color-1;
+  background-color: $white;
   position: relative;
   z-index: 0;
   padding: 0;
diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss
index 923e0bd481..46b20cf789 100644
--- a/app/webpacker/css/admin_v3/shared/tables.scss
+++ b/app/webpacker/css/admin_v3/shared/tables.scss
@@ -44,7 +44,7 @@ table {
 
       [class*="icon-"].no-text {
         font-size: 120%;
-        background-color: very-light($color-3);
+        background-color: very-light($teal);
         border: 1px solid $color-border;
         border-radius: 15px;
         width: 29px;
@@ -74,29 +74,29 @@ table {
         padding-left: 0px;
 
         &:hover {
-          background-color: $color-3;
-          color: $color-1;
+          background-color: $teal;
+          color: $white;
         }
       }
       .icon-trash:hover,
       .icon-void:hover {
         background-color: $color-error;
-        color: $color-1;
+        color: $white;
       }
       .icon-cancel:hover {
         background-color: $color-notice;
-        color: $color-1;
+        color: $white;
       }
       .icon-edit:hover,
       .icon-capture:hover,
       .icon-ok:hover,
       .icon-plus:hover {
         background-color: $color-success;
-        color: $color-1;
+        color: $white;
       }
       .icon-copy:hover {
         background-color: $color-notice;
-        color: $color-1;
+        color: $white;
       }
     }
 
@@ -144,7 +144,7 @@ table {
       }
 
       &:hover td {
-        background-color: very-light($color-3, 5);
+        background-color: very-light($teal, 5);
 
         img {
           border: 1px solid $color-border;
@@ -157,7 +157,7 @@ table {
       }
 
       &.ui-sortable-placeholder td {
-        border: 1px solid $color-2 !important;
+        border: 1px solid $green !important;
         visibility: visible !important;
 
         &.actions {
@@ -165,7 +165,7 @@ table {
           border-right: none !important;
           border-top: none !important;
           border-bottom: none !important;
-          border-left: 1px solid $color-2 !important;
+          border-left: 1px solid $green !important;
         }
       }
 
@@ -173,7 +173,7 @@ table {
         width: 100%;
 
         td {
-          background-color: lighten($color-3, 33);
+          background-color: lighten($teal, 33);
           border-bottom: 1px solid $color-border;
 
           &.actions {
@@ -189,15 +189,15 @@ table {
 
     &.grand-total {
       td {
-        border-color: $color-2 !important;
+        border-color: $green !important;
         text-transform: uppercase;
         font-size: 110%;
         font-weight: 600;
-        background-color: lighten($color-2, 50);
+        background-color: lighten($green, 50);
       }
       .total {
-        background-color: $color-2;
-        color: $color-1;
+        background-color: $green;
+        color: $white;
       }
     }
   }