diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index a2b8ee507..4543f2e8d 100644
Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ
diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 0d3feeced..3effdf7d6 100644
Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ
diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts
index 45009682f..dc3d9e26b 100644
--- a/netbox/project-static/src/netbox.ts
+++ b/netbox/project-static/src/netbox.ts
@@ -2,7 +2,7 @@ import { initForms } from './forms';
 import { initBootstrap } from './bs';
 import { initQuickSearch } from './search';
 // import { initSelect } from './select';
-import { initTomSelect } from './tomSelect';
+import { initSelects } from './tomSelect';
 import { initButtons } from './buttons';
 import { initColorMode } from './colorMode';
 import { initMessages } from './messages';
@@ -24,7 +24,7 @@ function initDocument(): void {
     initForms,
     initQuickSearch,
     // initSelect,
-    initTomSelect,
+    initSelects,
     initDateSelector,
     initButtons,
     initClipboard,
diff --git a/netbox/project-static/src/tomSelect.ts b/netbox/project-static/src/tomSelect.ts
index f03464ac8..abda429f3 100644
--- a/netbox/project-static/src/tomSelect.ts
+++ b/netbox/project-static/src/tomSelect.ts
@@ -1,15 +1,18 @@
 import { getElements } from './util';
+import { TomOption } from 'tom-select/src/types';
 import TomSelect from 'tom-select';
 
-export function initTomSelect(): void {
+function initStaticSelects(): void {
 
-  // Static selects
-  for (const select of getElements<HTMLSelectElement>('select:not(.api-select)')) {
+  for (const select of getElements<HTMLSelectElement>('select:not(.api-select):not(.color-select)')) {
     new TomSelect(select, {});
   }
 
-  // API selects
-  for (const select of getElements<HTMLSelectElement>('.api-select')) {
+}
+
+function initDynamicSelects(): void {
+
+  for (const select of getElements<HTMLSelectElement>('select.api-select')) {
     const api_url = select.getAttribute('data-url') as string;
     new TomSelect(select, {
       valueField: 'id',
@@ -19,9 +22,8 @@ export function initTomSelect(): void {
       dropdownParent: 'body',
       controlInput: '<input>',
       preload: 'focus',
-      load: function(query, callback) {
-        var url = api_url + '?brief=True&q=' + encodeURIComponent(query);
-        console.log(url);
+      load: function(query: string, callback: Function) {
+        let url = api_url + '?brief=True&q=' + encodeURIComponent(query);
         fetch(url)
             .then(response => response.json())
             .then(json => {
@@ -34,3 +36,23 @@ export function initTomSelect(): void {
   }
 
 }
+
+function initColorSelects(): void {
+
+  for (const select of getElements<HTMLSelectElement>('select.color-select')) {
+    new TomSelect(select, {
+      render: {
+        option: function(item: TomOption, escape: Function) {
+          return `<div style="background-color: #${escape(item.value)}">${escape(item.text)}</div>`;
+        }
+      }
+    });
+  }
+
+}
+
+export function initSelects(): void {
+  initStaticSelects();
+  initDynamicSelects();
+  initColorSelects();
+}
diff --git a/netbox/utilities/forms/widgets/select.py b/netbox/utilities/forms/widgets/select.py
index 33e6b2a2f..37443c056 100644
--- a/netbox/utilities/forms/widgets/select.py
+++ b/netbox/utilities/forms/widgets/select.py
@@ -36,7 +36,7 @@ class ColorSelect(forms.Select):
     def __init__(self, *args, **kwargs):
         kwargs['choices'] = add_blank_choice(ColorChoices)
         super().__init__(*args, **kwargs)
-        self.attrs['class'] = 'netbox-color-select'
+        self.attrs['class'] = 'color-select'
 
 
 class HTMXSelect(forms.Select):