diff --git a/api/js/etemplate/Et2Colorpicker/Et2Colorpicker.ts b/api/js/etemplate/Et2Colorpicker/Et2Colorpicker.ts
new file mode 100644
index 0000000000..632e2567d1
--- /dev/null
+++ b/api/js/etemplate/Et2Colorpicker/Et2Colorpicker.ts
@@ -0,0 +1,40 @@
+/**
+ * EGroupware eTemplate2 - Colorpicker widget (WebComponent)
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link https://www.egroupware.org
+ * @author Hadi Nategh
+ */
+
+
+
+import {html} from "@lion/core";
+import {LionInput} from "@lion/input";
+import {Et2Widget} from "../Et2Widget/Et2Widget";
+import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
+
+export class Et2Colorpicker extends Et2InputWidget(Et2Widget(LionInput))
+{
+
+	constructor()
+	{
+		super();
+	}
+
+	connectedCallback()
+	{
+		super.connectedCallback();
+	}
+
+	render()
+	{
+		return html`
+			<div class="et2_colorpicker" id="${this.id}">
+            	<input class="et2_colorpicker" type="color" />
+			</div>
+		`;
+	}
+}
+customElements.define('et2-colorpicker', Et2Colorpicker);
\ No newline at end of file
diff --git a/api/js/etemplate/etemplate2.ts b/api/js/etemplate/etemplate2.ts
index 355b84f394..18f6db6c1a 100644
--- a/api/js/etemplate/etemplate2.ts
+++ b/api/js/etemplate/etemplate2.ts
@@ -28,6 +28,7 @@ import './Et2Button/Et2Button';
 import './Et2Date/Et2Date';
 import './Et2Textarea/Et2Textarea';
 import './Et2Textbox/Et2Textbox';
+import './Et2Colorpicker/Et2Colorpicker';
 /* Include all widget classes here, we only care about them registering, not importing anything*/
 import './et2_widget_vfs'; // Vfs must be first (before et2_widget_file) due to import cycle
 import './et2_widget_template';