diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
index 0a757fd34f..c0886046c0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.html
@@ -172,6 +172,17 @@
               </mat-error>
             </mat-form-field>
           </div>
+          <div class="input-field" *ngIf="key.settings.dataKeyValueType === 'colorPicker'">
+            <tb-color-input fxFlex
+                            label="{{key.label}}"
+                            icon="{{key.settings.icon}}"
+                            [required]="key.settings.required"
+                            [colorClearButton]="true"
+                            [requiredText]="getErrorMessageText(key.settings, 'required')"
+                            openOnInput
+                            formControlName="{{key.formId}}">
+            </tb-color-input>
+          </div>
         </div>
       </div>
     </fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
index 534be7c676..05a972e296 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/multiple-input-widget.component.ts
@@ -54,7 +54,7 @@ type FieldAlignment = 'row' | 'column';
 type MultipleInputWidgetDataKeyType = 'server' | 'shared' | 'timeseries';
 export type MultipleInputWidgetDataKeyValueType = 'string' | 'double' | 'integer' |
                                                   'JSON' | 'booleanCheckbox' | 'booleanSwitch' |
-                                                  'dateTime' | 'date' | 'time' | 'select';
+                                                  'dateTime' | 'date' | 'time' | 'select' | 'colorPicker';
 type MultipleInputWidgetDataKeyEditableType = 'editable' | 'disabled' | 'readonly';
 
 type ConvertGetValueFunction = (value: any, ctx: WidgetContext) => any;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 3c62810000..22eb191ec3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -69,6 +69,9 @@
           <mat-option [value]="'JSON'">
             {{ 'widgets.input-widgets.datakey-value-type-json' | translate }}
           </mat-option>
+          <mat-option [value]="'colorPicker'">
+            {{ 'widgets.input-widgets.datakey-value-type-color-picker' | translate }}
+          </mat-option>
         </mat-select>
       </mat-form-field>
     </section>
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index c5ec1fca40..fbfb96cac0 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4792,6 +4792,7 @@
             "datakey-value-type-date": "Date",
             "datakey-value-type-time": "Time",
             "datakey-value-type-select": "Select",
+            "datakey-value-type-color-picker": "Color Picker",
             "value-is-required": "Value is required",
             "ability-to-edit-attribute": "Ability to edit attribute",
             "ability-to-edit-attribute-editable": "Editable (default)",