diff --git a/public/css/Fhc.css b/public/css/Fhc.css
index 30fa212d7..20bfd85d7 100644
--- a/public/css/Fhc.css
+++ b/public/css/Fhc.css
@@ -57,4 +57,12 @@
 .input-group > .input-group-item:not(:first-child) .form-select {
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
-}
\ No newline at end of file
+}
+
+.form-control-color.is-invalid,
+.was-validated .form-control-color:invalid,
+.form-control-color.is-valid,
+.was-validated .form-control-color:valid {
+	padding-right: .375rem;
+	background-image: none;
+}
diff --git a/public/js/components/Form/Input.js b/public/js/components/Form/Input.js
index ba63b8fdc..1fc318523 100644
--- a/public/js/components/Form/Input.js
+++ b/public/js/components/Form/Input.js
@@ -115,6 +115,9 @@ export default {
 					case 'datepicker':
 						classes.push('p-0');
 						classes.push('border-0');
+					case 'color':
+						if (!c.includes('form-control-color'))
+							classes.push('form-control-color');
 					case 'text':
 					case 'number':
 					case 'password':