diff --git a/framework/core/js/src/common/components/ColorPreviewInput.tsx b/framework/core/js/src/common/components/ColorPreviewInput.tsx
index a339442441..bd6f8598f2 100644
--- a/framework/core/js/src/common/components/ColorPreviewInput.tsx
+++ b/framework/core/js/src/common/components/ColorPreviewInput.tsx
@@ -10,6 +10,11 @@ export default class ColorPreviewInput extends Component {
 
     attrs.type ||= 'text';
 
+    // If the input is a 3 digit hex code, convert it to 6 digits.
+    if (attrs.value.length === 4) {
+      attrs.value = attrs.value.replace(/#([a-f0-9])([a-f0-9])([a-f0-9])/, '#$1$1$2$2$3$3');
+    }
+
     return (
       <div className="ColorInput">
         <input className={classList('FormControl', className)} id={id} {...attrs} />