diff --git a/client/galaxy/scripts/mvc/ui/ui-select-default.js b/client/galaxy/scripts/mvc/ui/ui-select-default.js
index 91365a0b80e..e8e31950dcc 100644
--- a/client/galaxy/scripts/mvc/ui/ui-select-default.js
+++ b/client/galaxy/scripts/mvc/ui/ui-select-default.js
@@ -5,6 +5,7 @@ import $ from "jquery";
 import _ from "underscore";
 import Backbone from "backbone";
 import Utils from "utils/utils";
+import { keyedColorScheme } from "utils/color";
 import Buttons from "mvc/ui/ui-buttons";
 var View = Backbone.View.extend({
     initialize: function(options) {
@@ -211,9 +212,10 @@ var View = Backbone.View.extend({
                         ${_.reduce(
                             filteredTags.slice(0, 5),
                             (memo, tag) => {
-                                return `${memo}&nbsp;<div style="${Utils.generateTagStyle(
-                                    tag.slice(5)
-                                )}" class="badge badge-primary badge-tags">${_.escape(tag)}</div>`;
+                                const tagColors = keyedColorScheme(tag.slice(5));
+                                return `${memo}&nbsp;<div style="background-color: ${tagColors.primary}; color: ${tagColors.contrasting}; border: 1px solid ${tagColors.darker}" class="badge badge-primary badge-tags">${_.escape(
+                                    tag
+                                )}</div>`;
                             },
                             ""
                         )}