diff --git a/web/app/models/HTML.php b/web/app/models/HTML.php
index 7a25e2b..8db221c 100644
--- a/web/app/models/HTML.php
+++ b/web/app/models/HTML.php
@@ -510,9 +510,9 @@ class HTML {
 			'del' => [],
 			'br' => [],
 			'span' => [
-				'class' => new CustomClassDef(['uoj-username'], ['uoj-username-']),
+				'class' => 'Enum#uoj-username,' . implode(',', array_map(fn ($c) => "uoj-username-{$c}", UOJUser::AVAILABLE_COLORS)),
 				'data-realname' => 'Text',
-				'data-color' => 'Color',
+				'data-color' => 'Enum#' . implode(',', UOJUser::AVAILABLE_COLORS),
 			],
 		];
 
diff --git a/web/app/models/UOJUser.php b/web/app/models/UOJUser.php
index 6d1075d..96442c9 100644
--- a/web/app/models/UOJUser.php
+++ b/web/app/models/UOJUser.php
@@ -26,6 +26,16 @@ class UOJUser {
 		],
 	];
 
+	const AVAILABLE_COLORS = [
+		'blue',
+		'green',
+		'pink',
+		'red',
+		'orange',
+		'cyan',
+		'purple',
+	];
+
 	public static $visibility_codes = [
 		'all' => [
 			'html' => '',
@@ -336,7 +346,7 @@ class UOJUser {
 		$color = $cfg['color'] ? UOJUser::getUserColor($user) : '';
 
 		return HTML::tag('span', [
-			'class' => "uoj-username uoj-username-{$color}",
+			'class' => "uoj-username",
 			'data-realname' => trim(HTML::escape($realname)),
 			'data-color' => $color,
 		], $user['username']);