diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index 28b5d999ed..c7561e1d25 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -2035,7 +2035,7 @@ tr td button i {
 
 .form-control {
     border-color: @b7grey;
-    background-color: @f2grey;
+    background-color: @fcgrey;
     color: @default-data-txt;
     transition: border-color 0.3s;
     box-shadow: none;
@@ -2045,7 +2045,7 @@ tr td button i {
 
 .form-control + .select2 .select2-selection {
     border-color: @b7grey !important;
-    background-color: @f2grey !important;
+    background-color: @fcgrey !important;
     color: @default-data-txt !important;
     transition: border-color 0.3s !important;
     box-shadow: none !important;
@@ -2095,12 +2095,12 @@ tr td button i {
 .select2-container--disabled,.select2-container--disabled  .select2-selection--single,.select2-container--disabled .select2-selection--multiple {
     cursor: not-allowed;
     opacity: 100;
-    background: @ebgrey;
+    background-color: @ebgrey;
     border-radius: 5px;
 }
 
 .select2-container--default .select2-selection--single {
-    background-color: @f2grey;
+    background-color: @fcgrey;
     border: 1px solid @d7grey;
     border-radius: 4px;
 }
@@ -2266,7 +2266,7 @@ html input[disabled] {
 
 .select2-container--disabled .select2-selection,
 .select2-container--disabled .select2-arrow {
-    background: @ebgrey;
+    background-color: @ebgrey;
 }
 
 .btn.disabled,.btn[disabled],fieldset[disabled] .bt {
@@ -2275,7 +2275,7 @@ html input[disabled] {
 
 .ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled {
     opacity: 1;
-    background: @ebgrey;
+    background-color: @ebgrey;
 }
 
 input[disabled].ui-spinner-input {
diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index 7f44ed0193..c263e0568e 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/awx/ui/client/legacy-styles/forms.less
@@ -198,13 +198,18 @@
 
 .Form-formGroup {
     input.form-control {
-       background-color: @f2grey;
+       background-color: @fcgrey;
        border-color: @b7grey;
        border-radius: 5px;
        height: auto;
        min-height: 30px;
        padding: 0 10px;
     }
+
+    input.form-control[disabled], input.form-control[readonly], fieldset[disabled] input.form-control {
+        border-color: @b7grey;
+        background-color: @ebgrey;
+    }
 }
 
 .Form-checkbox--stacked {
@@ -316,7 +321,7 @@
 
 .ui-spinner {
     height: 30px;
-    background-color: @f2grey !important;
+    background-color: @fcgrey !important;
     border-radius: 5px;
     border:1px solid @field-border !important;
     color: @field-input-text;
@@ -325,7 +330,7 @@
 
 .ui-spinner-input {
     color: @field-input-text;
-    background-color: @f2grey;
+    background-color: @fcgrey;
 }
 
 .ui-spinner-input:focus {
@@ -369,7 +374,7 @@
 }
 
 .select2-container--disabled .select2-selection__arrow {
-    background: @ebgrey !important;
+    background-color: @ebgrey !important;
 }
 
 .select2-results__option {
@@ -762,5 +767,5 @@ input[type='radio']:checked:before {
 
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
     border-color: @b7grey;
-    background: @ebgrey;
+    background-color: @ebgrey;
 }
diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less
index 01ce3b160a..149ba2c80d 100644
--- a/awx/ui/client/legacy-styles/lists.less
+++ b/awx/ui/client/legacy-styles/lists.less
@@ -66,7 +66,7 @@ table, tbody {
 }
 
 .List-tableRow:hover {
-    background-color: #f2f2f2;
+    background-color: @f2grey;
 }
 
 .List-tableRow--selected {
diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less
index af8286108f..89d1778152 100644
--- a/awx/ui/client/src/shared/branding/colors.default.less
+++ b/awx/ui/client/src/shared/branding/colors.default.less
@@ -25,6 +25,7 @@
 @f7grey:                #F7F7F7;
 @insights-yellow:       #dedc4f;
 @f2grey:                #f2f2f2;
+@fcgrey:                #fcfcfc;
 @f6grey:                #f6f6f6;
 @ebgrey:                #ebebeb;
 
diff --git a/awx/ui/client/src/system-tracking/date-picker/date-picker.block.less b/awx/ui/client/src/system-tracking/date-picker/date-picker.block.less
index 670ba31c8f..207cfca6a5 100644
--- a/awx/ui/client/src/system-tracking/date-picker/date-picker.block.less
+++ b/awx/ui/client/src/system-tracking/date-picker/date-picker.block.less
@@ -26,7 +26,7 @@
         border-radius: 0 4px 4px 0;
         border: 1px solid @b7grey;
         padding: 6px 12px;
-        background-color: @f2grey;
+        background-color: @fcgrey;
     }
 
     &-input:focus,
diff --git a/awx/ui/client/src/system-tracking/system-tracking-container.block.less b/awx/ui/client/src/system-tracking/system-tracking-container.block.less
index 62d5c1ee05..c8252662ff 100644
--- a/awx/ui/client/src/system-tracking/system-tracking-container.block.less
+++ b/awx/ui/client/src/system-tracking/system-tracking-container.block.less
@@ -18,7 +18,7 @@
     .DatePicker-input {
         width: 100%;
         flex: none;
-        background: @f2grey;
+        background: @fcgrey;
     }
 
     .DatePicker-icon {