diff --git a/esp/esp/program/modules/migrations/0043_auto_20240321_2023.py b/esp/esp/program/modules/migrations/0043_auto_20240321_2023.py
new file mode 100644
index 0000000000..b66d7e0535
--- /dev/null
+++ b/esp/esp/program/modules/migrations/0043_auto_20240321_2023.py
@@ -0,0 +1,51 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.11.29 on 2024-03-21 20:23
+from __future__ import unicode_literals
+
+import django.core.validators
+from django.db import migrations, models
+import re
+
+def set_my_defaults(apps, schema_editor):
+    classregmoduleinfo = apps.get_model('modules', 'classregmoduleinfo')
+    crmis = classregmoduleinfo.objects.filter(color_code_old__isnull = False)
+    for crmi in crmis.all():
+        old_color_code = crmi.color_code_old
+        # check the hex code is valid and then add #
+        if re.match(r'^([a-zA-Z0-9]{3}){1,2}$', old_color_code):
+            crmi.color_code = "#" + old_color_code
+            crmi.save()
+
+def reverse_func(apps, schema_editor):
+    classregmoduleinfo = apps.get_model('modules', 'classregmoduleinfo')
+    crmis = classregmoduleinfo.objects.filter(color_code__isnull = False)
+    for crmi in crmis.all():
+        # remove the #
+        new_color_code = crmi.color_code
+        crmi.color_code = new_color_code[1:]
+        crmi.save()
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('modules', '0042_delete_mailinglabels'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='classregmoduleinfo',
+            old_name='color_code',
+            new_name='color_code_old',
+        ),
+        migrations.AddField(
+            model_name='classregmoduleinfo',
+            name='color_code',
+            field=models.CharField(blank=True, help_text=b'The background color for class titles in the catalog and registration pages. If no color is chosen, the default light blue will be used.',
+                                   max_length=7, null=True, validators=[django.core.validators.RegexValidator(r'^#([a-zA-Z0-9]{3}){1,2}$', message = 'Value must be a valid 3-character or 6-character hex color starting with "#".')]),
+        ),
+        migrations.RunPython(set_my_defaults, reverse_func),
+        migrations.RemoveField(
+            model_name='classregmoduleinfo',
+            name='color_code_old',
+        )
+    ]
diff --git a/esp/esp/program/modules/module_ext.py b/esp/esp/program/modules/module_ext.py
index 16868e0738..a346a8775a 100644
--- a/esp/esp/program/modules/module_ext.py
+++ b/esp/esp/program/modules/module_ext.py
@@ -36,6 +36,7 @@
 from datetime import timedelta
 import time
 
+from django.core.validators import RegexValidator
 from django.db import models
 
 from esp.db.fields import AjaxForeignKey
@@ -171,7 +172,8 @@ class ClassRegModuleInfo(models.Model):
     #   An HTML color code for the program.  All classes will appear in some variant
     #   of this color in the catalog and registration pages.  If null, the default
     #   ESP colors will be used.
-    color_code           = models.CharField(max_length=6, blank=True, null=True)
+    color_code           = models.CharField(max_length=7, blank=True, null=True, help_text='The background color for class titles in the catalog and registration pages. If no color is chosen, the default light blue will be used.',
+                                            validators = [RegexValidator(r'^#([a-zA-Z0-9]{3}){1,2}$', message = 'Value must be a valid 3-character or 6-character hex color starting with "#".')])
 
     #   If this is true, teachers will be allowed to specify that students may
     #   come to their class late.
diff --git a/esp/esp/program/templatetags/class_render.py b/esp/esp/program/templatetags/class_render.py
index f8724ba543..80a0fa2e4c 100644
--- a/esp/esp/program/templatetags/class_render.py
+++ b/esp/esp/program/templatetags/class_render.py
@@ -17,7 +17,7 @@ def render_class_core(cls):
     scrmi = prog.studentclassregmoduleinfo
     colorstring = prog.getColor()
     if colorstring is not None:
-        colorstring = ' background-color:#' + colorstring + ';'
+        colorstring = ' background-color: ' + colorstring + ';'
 
     # Allow tag configuration of whether class descriptions get collapsed
     # when the class is full (default: yes)
diff --git a/esp/templates/program/modules/admincore/settings.html b/esp/templates/program/modules/admincore/settings.html
index df3fabf78a..4ba44cea5c 100644
--- a/esp/templates/program/modules/admincore/settings.html
+++ b/esp/templates/program/modules/admincore/settings.html
@@ -7,6 +7,22 @@
     <link rel="stylesheet" href="/media/styles/forms.css" type="text/css" />
     <link rel="stylesheet" href="/media/styles/expand_display.css" type="text/css" />
     <link rel="stylesheet" href="/media/styles/admin.css" type="text/css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">
+{% endblock %}
+
+{% block xtrajs %}
+<script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>
+<script>
+$j(document).ready(function(){
+    $j("[name=color_code]").spectrum({
+      type: "color",
+      togglePaletteOnly: true,
+      showInput: true,
+      showInitial: true,
+      showAlpha: false
+    });
+});
+</script>
 {% endblock %}
 
 {% block content %}