diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue
index 12d685506..c79999f94 100644
--- a/client/web/admin/src/components/User/CUserEditorAvatar.vue
+++ b/client/web/admin/src/components/User/CUserEditorAvatar.vue
@@ -48,10 +48,13 @@
           :label="$t('initial.color')"
           class="col"
         >
-          <b-form-input
+          <c-input-color-picker
             v-model="user.meta.avatarColor"
             data-test-id="input-text-color"
-            type="color"
+            :translations="{
+              modalTitle: $t('colorPicker'),
+              saveBtnLabel: $t('general:label.saveAndClose')
+            }"
           />
         </b-form-group>
 
@@ -59,10 +62,13 @@
           :label="$t('initial.backgroundColor')"
           class="col"
         >
-          <b-form-input
+          <c-input-color-picker
             v-model="user.meta.avatarBgColor"
             data-test-id="input-background-color"
-            type="color"
+            :translations="{
+              modalTitle: $t('colorPicker'),
+              saveBtnLabel: $t('general:label.saveAndClose')
+            }"
           />
         </b-form-group>
       </div>
@@ -82,6 +88,8 @@
 <script>
 import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
   name: 'CUserEditorAvatar',
@@ -94,6 +102,7 @@ export default {
   components: {
     CSubmitButton,
     CUploaderWithPreview,
+    CInputColorPicker,
   },
 
   props: {
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/File.vue b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
index 9a70c1291..3fe65106a 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/File.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/File.vue
@@ -152,10 +152,12 @@
             :label="$t('kind.file.view.background')"
             label-class="text-primary"
           >
-            <b-form-input
+            <c-input-color-picker
               v-model="f.options.backgroundColor"
-              type="color"
-              debounce="300"
+              :translations="{
+                modalTitle: $t('kind.file.view.colorPicker'),
+                saveBtnLabel: $t('general:label.saveAndClose')
+              }"
             />
           </b-form-group>
         </b-col>
@@ -166,12 +168,18 @@
 
 <script>
 import base from './base'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
   i18nOptions: {
     namespaces: 'field',
   },
 
+  components: {
+    CInputColorPicker,
+  },
+
   extends: base,
 
   computed: {
diff --git a/client/web/compose/src/components/PageBlocks/CalendarBase.vue b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
index df0fc42ef..5c722ff68 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarBase.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarBase.vue
@@ -308,12 +308,14 @@ export default {
 
                 return compose.PageBlockCalendar.RecordFeed(this.$ComposeAPI, module, this.namespace, ff, this.loaded)
                   .then(events => {
+                    events = this.setEventColors(events, ff)
                     this.events.push(...events)
                   })
               })
           case compose.PageBlockCalendar.feedResources.reminder:
             return compose.PageBlockCalendar.ReminderFeed(this.$SystemAPI, this.$auth.user, feed, this.loaded)
               .then(events => {
+                events = this.setEventColors(events, feed)
                 this.events.push(...events)
               })
         }
@@ -368,6 +370,13 @@ export default {
         .then(() => this.key++)
         .catch(() => this.toastErrorHandler(this.$t('notification:page.block.calendar.eventFetchFailed')))
     },
+
+    setEventColors (events, feed) {
+      return events.map(event => {
+        event.backgroundColor = feed.options.color
+        return event
+      })
+    },
   },
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
index 079d64a42..0eefb901f 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
@@ -30,14 +30,13 @@
           breakpoint="md"
           :label="$t('calendar.recordFeed.colorLabel')"
         >
-          <b-input-group>
-            <b-form-input
-              v-model="feed.options.color"
-              style="max-width: 50px;"
-              type="color"
-              debounce="300"
-            />
-          </b-input-group>
+          <c-input-color-picker
+            v-model="feed.options.color"
+            :translations="{
+              modalTitle: $t('calendar.recordFeed.colorPicker'),
+              saveBtnLabel: $t('general:label.saveAndClose')
+            }"
+          />
         </b-form-group>
         <b-form-group
           horizontal
@@ -143,12 +142,18 @@
 
 <script>
 import base from './base'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
   i18nOptions: {
     namespaces: 'block',
   },
 
+  components: {
+    CInputColorPicker,
+  },
+
   extends: base,
 
   computed: {
diff --git a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
index 3dba4b3bb..19887b052 100644
--- a/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
+++ b/client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
@@ -6,26 +6,31 @@
       breakpoint="md"
       :label="$t('calendar.reminderFeed.colorLabel')"
     >
-      <b-input-group>
-        <b-form-input
-          v-model="feed.options.color"
-          style="max-width: 50px;"
-          type="color"
-          debounce="300"
-        />
-      </b-input-group>
+      <c-input-color-picker
+        v-model="feed.options.color"
+        :translations="{
+          modalTitle: $t('calendar.recordFeed.colorPicker'),
+          saveBtnLabel: $t('general:label.saveAndClose')
+        }"
+      />
     </b-form-group>
   </div>
 </template>
 
 <script>
 import base from './base'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
   i18nOptions: {
     namespaces: 'block',
   },
 
+  components: {
+    CInputColorPicker,
+  },
+
   extends: base,
 }
 </script>
diff --git a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
index ce3818ec2..d823aa682 100644
--- a/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/FileConfigurator.vue
@@ -168,10 +168,12 @@
             :label="$t('kind.file.view.background')"
             label-class="text-primary"
           >
-            <b-form-input
+            <c-input-color-picker
               v-model="options.backgroundColor"
-              type="color"
-              debounce="300"
+              :translations="{
+                modalTitle: $t('kind.file.view.colorPicker'),
+                saveBtnLabel: $t('general:label.saveAndClose')
+              }"
             />
           </b-form-group>
         </b-col>
@@ -183,6 +185,8 @@
 import base from './base'
 import Uploader from 'corteza-webapp-compose/src/components/Public/Page/Attachment/Uploader'
 import ListLoader from 'corteza-webapp-compose/src/components/Public/Page/Attachment/ListLoader'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
   i18nOptions: {
@@ -194,6 +198,7 @@ export default {
   components: {
     Uploader,
     ListLoader,
+    CInputColorPicker,
   },
 
   extends: base,
diff --git a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
index 651b658e7..180abeed9 100644
--- a/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
+++ b/client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
@@ -85,14 +85,13 @@
           breakpoint="md"
           :label="$t('geometry.recordFeed.colorLabel')"
         >
-          <b-input-group>
-            <b-form-input
-              v-model="feed.options.color"
-              style="max-width: 50px;"
-              type="color"
-              debounce="300"
-            />
-          </b-input-group>
+          <c-input-color-picker
+            v-model="feed.options.color"
+            :translations="{
+              modalTitle: $t('geometry.recordFeed.colorPicker'),
+              saveBtnLabel: $t('general:label.saveAndClose')
+            }"
+          />
         </b-form-group>
 
         <b-form-group
@@ -129,12 +128,18 @@
 
 <script>
 import base from './base'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
   i18nOptions: {
     namespaces: 'block',
   },
 
+  components: {
+    CInputColorPicker,
+  },
+
   extends: base,
 
   computed: {
diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
index 942a75f2f..0b7297990 100644
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
@@ -5,31 +5,32 @@
     <fieldset>
       <b-form-group
         :label="$t('metric.editStyle.color')"
-        label-cols="4"
       >
-        <b-form-input
+        <c-input-color-picker
           v-model="options.color"
-          type="color"
-          debounce="300"
+          :translations="{
+            modalTitle: $t('metric.editStyle.colorPicker'),
+            saveBtnLabel: $t('general:label.saveAndClose')
+          }"
           class="mb-1"
         />
       </b-form-group>
 
       <b-form-group
         :label="$t('metric.editStyle.backgroundColor')"
-        label-cols="4"
       >
-        <b-form-input
+        <c-input-color-picker
           v-model="options.backgroundColor"
-          type="color"
-          debounce="300"
+          :translations="{
+            modalTitle: $t('geometry.recordFeed.colorPicker'),
+            saveBtnLabel: $t('general:label.saveAndClose')
+          }"
           class="mb-1"
         />
       </b-form-group>
 
       <b-form-group
         :label="$t('metric.editStyle.fontSize')"
-        label-cols="4"
       >
         <b-form-input
           v-model="options.fontSize"
@@ -43,11 +44,18 @@
 </template>
 
 <script>
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
+
 export default {
   i18nOptions: {
     namespaces: 'block',
   },
 
+  components: {
+    CInputColorPicker,
+  },
+
   props: {
     options: {
       type: Object,
diff --git a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
index 792df5dd2..c69b62fbb 100644
--- a/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
+++ b/client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
@@ -431,7 +431,8 @@ export default {
       const m = {
         labelStyle: {},
         valueStyle: {
-          backgroundColor: '#FFFFFF',
+          backgroundColor: '#FFFFFF00',
+          color: '#000000',
         },
         drillDown: {
           enabled: false,
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index b31ea63e3..00d442cf9 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -130,18 +130,22 @@
                       />
                     </td>
                     <td class="align-middle">
-                      <b-form-input
+                      <c-input-color-picker
                         v-model="item.options.textColor"
-                        type="color"
-                        debounce="300"
+                        :translations="{
+                          modalTitle: $t('navigation.colorPicker'),
+                          saveBtnLabel: $t('general:label.saveAndClose')
+                        }"
                         class="w-100"
                       />
                     </td>
                     <td class="align-middle">
-                      <b-form-input
+                      <c-input-color-picker
                         v-model="item.options.backgroundColor"
-                        type="color"
-                        debounce="300"
+                        :translations="{
+                          modalTitle: $t('navigation.colorPicker'),
+                          saveBtnLabel: $t('general:label.saveAndClose')
+                        }"
                         class="w-100"
                       />
                     </td>
@@ -209,6 +213,8 @@ import Text from './NavTypes/Text.vue'
 import Url from './NavTypes/Url.vue'
 import Compose from './NavTypes/ComposePage.vue'
 import Dropdown from './NavTypes/Dropdown.vue'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
   i18nOptions: {
@@ -221,6 +227,7 @@ export default {
     Url,
     Compose,
     Dropdown,
+    CInputColorPicker,
   },
 
   extends: base,
@@ -268,7 +275,7 @@ export default {
         compose.PageBlockNavigation.makeNavigationItem({
           type: 'compose',
           options: {
-            backgroundColor: '',
+            backgroundColor: '#FFFFFF00',
             item: {
               align: 'bottom',
               target: 'sameTab',
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
index 8186001f3..908ac0dbb 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
@@ -2,7 +2,7 @@
   <div>
     <b-form-group
       v-if="options.valueColumn !== undefined"
-      :label="$t('display-element:metric.configurator.label-column')"
+      :label="$t('label-column')"
       label-class="text-primary"
     >
       <column-selector
@@ -15,7 +15,7 @@
     <b-row>
       <b-col>
         <b-form-group
-          :label="$t('display-element:metric.configurator.format')"
+          :label="$t('format')"
           label-class="text-primary"
         >
           <b-form-input
@@ -26,7 +26,7 @@
       </b-col>
       <b-col>
         <b-form-group
-          :label="$t('display-element:metric.configurator.prefix')"
+          :label="$t('prefix')"
           label-class="text-primary"
         >
           <b-form-input
@@ -37,7 +37,7 @@
       </b-col>
       <b-col>
         <b-form-group
-          :label="$t('display-element:metric.configurator.suffix')"
+          :label="$t('suffix')"
           label-class="text-primary"
         >
           <b-form-input
@@ -51,23 +51,27 @@
     <b-row>
       <b-col>
         <b-form-group
-          :label="$t('display-element:metric.configurator.color.text')"
+          :label="$t('color.text')"
         >
-          <b-form-input
+          <c-input-color-picker
             v-model="options.color"
-            type="color"
-            debounce="300"
+            :translations="{
+              modalTitle: $t('color.picker'),
+              saveBtnLabel: $t('general:label.saveAndClose')
+            }"
           />
         </b-form-group>
       </b-col>
       <b-col>
         <b-form-group
-          :label="$t('display-element:metric.configurator.color.background')"
+          :label="$t('color.background')"
         >
-          <b-form-input
+          <c-input-color-picker
             v-model="options.backgroundColor"
-            type="color"
-            debounce="300"
+            :translations="{
+              modalTitle: $t('color.picker'),
+              saveBtnLabel: $t('general:label.saveAndClose')
+            }"
           />
         </b-form-group>
       </b-col>
@@ -78,10 +82,18 @@
 <script>
 import base from './base'
 import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
+import { components } from '@cortezaproject/corteza-vue'
+const { CInputColorPicker } = components
 
 export default {
+  i18nOptions: {
+    namespaces: 'display-element',
+    keyPrefix: 'metric.configurator',
+  },
+
   components: {
     ColumnSelector,
+    CInputColorPicker,
   },
 
   extends: base,
diff --git a/lib/vue/package.json b/lib/vue/package.json
index fa24e1b83..b36cb0557 100644
--- a/lib/vue/package.json
+++ b/lib/vue/package.json
@@ -48,6 +48,7 @@
     "tiptap": "^1.26.0",
     "tiptap-extensions": "^1.28.4",
     "v-photoswipe": "^1.0.3-1",
+    "vue-color": "^2.8.1",
     "vue-echarts": "^6.2.3",
     "vue-select": "^3.4.0",
     "vue-swatches": "^1.0.4",
diff --git a/lib/vue/src/components/index.ts b/lib/vue/src/components/index.ts
index 4a00a0719..2a323f893 100644
--- a/lib/vue/src/components/index.ts
+++ b/lib/vue/src/components/index.ts
@@ -17,6 +17,7 @@ export {
   CInputSearch,
   CRichTextInput,
   CInputCheckbox,
+  CInputColorPicker,
 } from './input'
 
 export {
diff --git a/lib/vue/src/components/input/CInputColorPicker.vue b/lib/vue/src/components/input/CInputColorPicker.vue
new file mode 100644
index 000000000..7ec2d691a
--- /dev/null
+++ b/lib/vue/src/components/input/CInputColorPicker.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <b-button
+      :style="`color: ${pickedColor}; fill: ${pickedColor};`"
+      class="p-0 rounded-circle bg-white border-white shadow-none"
+      @click="toggleMenu"
+    >
+      <svg
+        viewBox="0 0 32 32"
+        style="width: 32px; height: 32px;"
+        class="border border-light rounded-circle"
+      >
+        <pattern
+          id="checkerboard"
+          width="12"
+          height="12"
+          patternUnits="userSpaceOnUse"
+          fill="FFF"
+        >
+          <rect
+            fill="#7080707f"
+            x="0"
+            width="6"
+            height="6"
+            y="0"
+          />
+          <rect
+            fill="#7080707f"
+            x="6"
+            width="6"
+            height="6"
+            y="6"
+          />
+        </pattern>
+
+        <circle
+          cx="16"
+          cy="16"
+          r="16"
+          fill="url(#checkerboard)"
+        />
+
+        <circle
+          cx="16"
+          cy="16"
+          r="16"
+        />
+      </svg>
+    </b-button>
+
+    <b-modal
+      :visible="showModal"
+      :title="translations.modalTitle"
+      :ok-title="translations.saveBtnLabel"
+      centered
+      size="sm"
+      body-class="p-0"
+      cancel-variant="link"
+      @ok="$emit('input', currentColor || value)"
+      @hide="closeMenu"
+    >
+      <chrome
+        :value="value"
+        class="w-100 shadow-none"
+        @input="updateColor"
+      />
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import { Chrome } from 'vue-color'
+import { debounce } from 'lodash'
+
+export default {
+  name: 'CInputColorPicker',
+
+  components: {
+    Chrome,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: 'rgba(0,0,0,0)',
+    },
+
+    translations: {
+      type: Object,
+    },
+  },
+
+  data () {
+    return {
+      showModal: false,
+      currentColor: '',
+    }
+  },
+
+  computed: {
+    pickedColor: {
+      get () {
+        return this.value
+      },
+
+      set (pickedColor) {
+        this.pickedColor = pickedColor
+      },
+    },
+  },
+
+  methods: {
+    updateColor: debounce(function ({ hex8 = '' }) {
+      this.currentColor = hex8
+    }, 300),
+
+    toggleMenu () {
+      if (this.showModal) {
+        this.closeMenu()
+      } else {
+        this.openMenu()
+      }
+    },
+
+    openMenu () {
+      this.showModal = true
+    },
+
+    closeMenu () {
+      this.showModal = false
+    },
+  },
+}
+</script>
+
+<style>
+.vc-chrome {
+  font-family: 'Poppins-Medium' !important;
+}
+</style>
diff --git a/lib/vue/src/components/input/index.ts b/lib/vue/src/components/input/index.ts
index e4cb31ee1..84d2c5361 100644
--- a/lib/vue/src/components/input/index.ts
+++ b/lib/vue/src/components/input/index.ts
@@ -6,3 +6,4 @@ export { default as CInputCron } from './CInputCron.vue'
 export { default as CInputSearch } from './CInputSearch.vue'
 export { default as CRichTextInput } from './CRichTextInput/index.vue'
 export { default as CInputCheckbox } from './CInputCheckbox.vue'
+export { default as CInputColorPicker } from './CInputColorPicker.vue'
diff --git a/lib/vue/yarn.lock b/lib/vue/yarn.lock
index c4b1a1453..b6cb2ff6e 100644
--- a/lib/vue/yarn.lock
+++ b/lib/vue/yarn.lock
@@ -2937,6 +2937,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+  integrity sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA==
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -6724,6 +6729,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.throttle@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -6844,6 +6854,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-colors@^1.0.0:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -10588,6 +10603,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.1.2:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 tiptap-commands@^1.17.1:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/tiptap-commands/-/tiptap-commands-1.17.1.tgz#a8974a26d87db57b2fd4fc56a552520c69e43a4a"
@@ -11223,6 +11243,16 @@ vue-class-component@^7.1.0:
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
   integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
 
+vue-color@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.8.1.tgz#a090f3dcf8ed6f07afdb865cac84b19a73302e70"
+  integrity sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==
+  dependencies:
+    clamp "^1.0.1"
+    lodash.throttle "^4.0.0"
+    material-colors "^1.0.0"
+    tinycolor2 "^1.1.2"
+
 vue-demi@^0.13.2:
   version "0.13.5"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.5.tgz#d5eddbc9eaefb89ce5995269d1fa6b0486312092"
diff --git a/locale/en/corteza-webapp-admin/general.yaml b/locale/en/corteza-webapp-admin/general.yaml
index 9ad591eb3..34483ae59 100644
--- a/locale/en/corteza-webapp-admin/general.yaml
+++ b/locale/en/corteza-webapp-admin/general.yaml
@@ -9,6 +9,7 @@ label:
   refresh: Refresh
   loadMore: Load more
   loading: Loading
+  saveAndClose: Save and close
   submit: Submit
   delete: Delete
   undelete: Undelete
diff --git a/locale/en/corteza-webapp-admin/system.users.yaml b/locale/en/corteza-webapp-admin/system.users.yaml
index 540f76825..ac9117178 100644
--- a/locale/en/corteza-webapp-admin/system.users.yaml
+++ b/locale/en/corteza-webapp-admin/system.users.yaml
@@ -21,16 +21,17 @@ editor:
     unsuspend: Unsuspend
     updatedAt: Updated at
   avatar:
-      title: Profile avatar
-      preview:
-        label: Avatar
-        title: Avatar
-      initial:
-        color: Text color
-        backgroundColor: Background color
-      uploader:
-        instructions: Upload avatar
-        uploading: Uploading user avatar
+    title: Profile avatar
+    preview:
+      label: Avatar
+      title: Avatar
+    initial:
+      color: Text color
+      backgroundColor: Background color
+    uploader:
+      instructions: Upload avatar
+      uploading: Uploading user avatar
+    colorPicker: Choose a color
   mfa:
     TOTP:
       disabled:
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 0522d55ca..d13bb6c75 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -46,6 +46,7 @@ calendar:
   hideToday: Hide today button
   label: Calendar
   recordFeed:
+    colorPicker: Choose a color
     colorLabel: Event color
     eventAllDay: Show as all-day-events
     eventEndFieldLabel: Event end
@@ -225,6 +226,7 @@ metric:
   editStyle:
     backgroundColor: Background color
     color: Text color
+    colorPicker: Choose a color
     fontSize: Font size in pixels
     labelLabel: Label style
     valueLabel: Value style
@@ -589,6 +591,7 @@ comment:
     footnote: 'Field value will be used as reference'
 navigation:
   chart: Charts
+  colorPicker: Choose a color
   noNavigationItems: No navigation item configured
   label: Navigation
   displayOptions: Display options
@@ -726,6 +729,7 @@ geometry:
   openInNewTab: Open in a new tab
   openInModal: Open in a modal
   recordFeed:
+    colorPicker: Choose a color
     moduleLabel: Module*
     modulePlaceholder: (No module)
     noMultiFields: Multi-value fields are currently not supported
diff --git a/locale/en/corteza-webapp-compose/field.yaml b/locale/en/corteza-webapp-compose/field.yaml
index 6c65e0e91..571a7dad1 100644
--- a/locale/en/corteza-webapp-compose/field.yaml
+++ b/locale/en/corteza-webapp-compose/field.yaml
@@ -45,6 +45,7 @@ kind:
       maxWidth: Max width
       borderRadius: Border radius
       background: Background color
+      colorPicker: Choose a color
       margin: Margin
       unitType: Unit type
       px: px
diff --git a/locale/en/corteza-webapp-reporter/display-element.yaml b/locale/en/corteza-webapp-reporter/display-element.yaml
index e1a838e41..f144db288 100644
--- a/locale/en/corteza-webapp-reporter/display-element.yaml
+++ b/locale/en/corteza-webapp-reporter/display-element.yaml
@@ -89,6 +89,7 @@ metric:
     color:
       background: Background color
       text: Text color
+      picker: Choose a color
     format: Format
     label-column: Label column
     none: None