diff --git a/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue b/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue
index 43ee096d..759c8716 100644
--- a/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue
+++ b/zero.Web.UI/App/components/pickers/colorPicker/colorpicker.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="ui-colorpicker" :class="{'is-disabled': disabled }">
     <label class="ui-colorpicker-color" :for="id">
-      <span class="ui-colorpicker-color-preview" :style="{ 'background-color': value }"></span>
+      <span class="ui-colorpicker-color-preview" :style="{ 'background-color': value || 'var(--color-box)' }"></span>
       <input :id="id" type="color" :value="value" :disabled="disabled" @input="onChange" />
     </label>
-    <input type="text" maxlength="7" class="ui-colorpicker-input" :value="value" @input="onChange" :disabled="disabled" />
+    <input type="text" maxlength="7" class="ui-colorpicker-input" :value="value" @input="onChange" :disabled="disabled" v-localize:placeholder="'@colorpicker.placeholder'" />
   </div>
 </template>
 
@@ -75,10 +75,10 @@
     position: absolute;
     overflow: hidden;
     width: 32px;
-    height: 32px;
+    height: 100%;
     border-radius: 3px;
     left: 0;
-    top: 0;
+    top: -1px;
     padding: 0 !important;
     cursor: pointer;
   }
@@ -87,17 +87,12 @@
   {
     position: absolute;
     left: 12px;
-    top: 8px;
+    top: 50%;
+    margin-top: -8px;
     width: 16px;
     height: 16px;
     border-radius: 2px;
-  }
-
-  .ui-colorpicker-color-preview[style="background-color: #ffffff;"],
-  .ui-colorpicker-color-preview[style="background-color: #fff;"],
-  .ui-colorpicker-color-preview[style="background-color: rgb(255, 255, 255);"]
-  {
-    box-shadow: 0 0 2px 0 #d2d2d2;
+    box-shadow: var(--shadow-short);
   }
 
   .ui-colorpicker-color input
diff --git a/zero.Web.UI/App/editor/fields/colorpicker.vue b/zero.Web.UI/App/editor/fields/colorpicker.vue
new file mode 100644
index 00000000..8d4a4107
--- /dev/null
+++ b/zero.Web.UI/App/editor/fields/colorpicker.vue
@@ -0,0 +1,15 @@
+<template>
+  <ui-colorpicker :value="value" @input="$emit('input', $event)" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: String
+      },
+      config: Object
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 7a72b520..5d9c6d27 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -469,6 +469,10 @@
     "title": "Pick an icon"
   },
 
+  "colorpicker": {
+    "placeholder": "Select or enter a color (#aabbcc)"
+  },
+
   "mediapicker": {
     "select_text": "Add media",
     "select_description": "Upload or select",
@@ -489,7 +493,7 @@
       "imageid": "Image",
       "imageid_text": "Image of the app (with transparent background), used for all mails, PDFs, ...",
       "iconid": "Icon",
-      "iconid_text": "Icon of the app. Simplified image for minor application parts",
+      "iconid_text": "Simplified image for minor application parts",
       "email": "Email",
       "email_text": "Generic contact email",
       "domains": "Domains",