diff --git a/aleksis/core/preferences.py b/aleksis/core/preferences.py
index c46fa8fe627fac341b22801c832f606e6449434f..ad90929ef8f4332daf50ef3485b47383f79a9dea 100644
--- a/aleksis/core/preferences.py
+++ b/aleksis/core/preferences.py
@@ -3,6 +3,7 @@ from django.forms import EmailField, ImageField, URLField
 from django.forms.widgets import SelectMultiple
 from django.utils.translation import gettext_lazy as _
 
+from colorfield.widgets import ColorWidget
 from dynamic_preferences.preferences import Section
 from dynamic_preferences.types import (
     BooleanPreference,
@@ -53,6 +54,7 @@ class ColourPrimary(StringPreference):
     default = "#0d5eaf"
     required = False
     verbose_name = _("Primary colour")
+    widget = ColorWidget
 
 
 @site_preferences_registry.register
@@ -62,6 +64,7 @@ class ColourSecondary(StringPreference):
     default = "#0d5eaf"
     required = False
     verbose_name = _("Secondary colour")
+    widget = ColorWidget
 
 
 @site_preferences_registry.register
diff --git a/aleksis/core/templates/dynamic_preferences/form.html b/aleksis/core/templates/dynamic_preferences/form.html
index da3d608285c43673bd27932d0d19cef303b1cef7..692d25e90b3dd5cb6554fe23010f5cbc542c3c94 100644
--- a/aleksis/core/templates/dynamic_preferences/form.html
+++ b/aleksis/core/templates/dynamic_preferences/form.html
@@ -25,4 +25,6 @@
       {% include "core/partials/save_button.html" with caption=_("Save preferences") %}
     </form>
   </div>
+
+  {{ form.media.js }}
 {% endblock %}