diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css
index ad1b02e3f..ad618b5d1 100644
--- a/netbox/project-static/css/base.css
+++ b/netbox/project-static/css/base.css
@@ -120,6 +120,117 @@ input[name="pk"] {
margin-top: 0;
}
+/* Color Selections */
+.color-selection-aa1409 {
+ background-color: #aa1409;
+ color: #ffffff;
+}
+.color-selection-f44336 {
+ background-color: #f44336;
+ color: #ffffff;
+}
+.color-selection-e91e63 {
+ background-color: #e91e63;
+ color: #ffffff;
+}
+.color-selection-ffe4e1 {
+ background-color: #ffe4e1;
+ color: #000000;
+}
+.color-selection-ff66ff {
+ background-color: #ff66ff;
+ color: #ffffff;
+}
+.color-selection-9c27b0 {
+ background-color: #9c27b0;
+ color: #ffffff;
+}
+.color-selection-673ab7 {
+ background-color: #673ab7;
+ color: #ffffff;
+}
+.color-selection-3f51b5 {
+ background-color: #3f51b5;
+ color: #ffffff;
+}
+.color-selection-2196f3 {
+ background-color: #2196f3;
+ color: #ffffff;
+}
+.color-selection-03a9f4 {
+ background-color: #03a9f4;
+ color: #ffffff;
+}
+.color-selection-00bcd4 {
+ background-color: #00bcd4;
+ color: #ffffff;
+}
+.color-selection-009688 {
+ background-color: #009688;
+ color: #ffffff;
+}
+.color-selection-00ffff {
+ background-color: #00ffff;
+ color: #ffffff;
+}
+.color-selection-2f6a31 {
+ background-color: #2f6a31;
+ color: #ffffff;
+}
+.color-selection-4caf50 {
+ background-color: #4caf50;
+ color: #ffffff;
+}
+.color-selection-8bc34a {
+ background-color: #8bc34a;
+ color: #ffffff;
+}
+.color-selection-cddc39 {
+ background-color: #cddc39;
+ color: #000000;
+}
+.color-selection-ffeb3b {
+ background-color: #ffeb3b;
+ color: #000000;
+}
+.color-selection-ffc107 {
+ background-color: #ffc107;
+ color: #000000;
+}
+.color-selection-ff9800 {
+ background-color: #ff9800;
+ color: #ffffff;
+}
+.color-selection-ff5722 {
+ background-color: #ff5722;
+ color: #ffffff;
+}
+.color-selection-795548 {
+ background-color: #795548;
+ color: #ffffff;
+}
+.color-selection-c0c0c0 {
+ background-color: #c0c0c0;
+ color: #000000;
+}
+.color-selection-9e9e9e {
+ background-color: #9e9e9e;
+ color: #ffffff;
+}
+.color-selection-607d8b {
+ background-color: #607d8b;
+ color: #ffffff;
+}
+.color-selection-111111 {
+ background-color: #111111;
+ color: #ffffff;
+}
+.color-selection-ffffff {
+ background-color: #ffffff;
+ color: #000000;
+}
+
+
/* Tables */
th.pk, td.pk {
padding-bottom: 6px;
diff --git a/netbox/project-static/js/forms.js b/netbox/project-static/js/forms.js
index 63ee70a07..73d149408 100644
--- a/netbox/project-static/js/forms.js
+++ b/netbox/project-static/js/forms.js
@@ -86,6 +86,22 @@ $(document).ready(function() {
return rendered_url
}
+ function colorPickerClassCopy(data, container) {
+ console.log("hello");
+ if (data.element) {
+ $(container).addClass($(data.element).attr("class"));
+ }
+ return data.text;
+ }
+
+ // Color Picker
+ $('.netbox-select2-color-picker').select2({
+ allowClear: true,
+ placeholder: "---------",
+ templateResult: colorPickerClassCopy,
+ templateSelection: colorPickerClassCopy,
+ })
+
// Static choice selection
$('.netbox-select2-static').select2({
allowClear: true,
diff --git a/netbox/utilities/forms.py b/netbox/utilities/forms.py
index b66e859a3..e53617321 100644
--- a/netbox/utilities/forms.py
+++ b/netbox/utilities/forms.py
@@ -169,6 +169,7 @@ class ColorSelect(forms.Select):
def __init__(self, *args, **kwargs):
kwargs['choices'] = add_blank_choice(COLOR_CHOICES)
super().__init__(*args, **kwargs)
+ self.attrs['class'] = 'netbox-select2-color-picker'
class BulkEditNullBooleanSelect(forms.NullBooleanSelect):
diff --git a/netbox/utilities/templates/widgets/colorselect_option.html b/netbox/utilities/templates/widgets/colorselect_option.html
index 7d10b893f..a0e488f18 100644
--- a/netbox/utilities/templates/widgets/colorselect_option.html
+++ b/netbox/utilities/templates/widgets/colorselect_option.html
@@ -1 +1 @@
-
+