diff --git a/packages/nc-gui-v2/components/general/ChromeWrapper.vue b/packages/nc-gui-v2/components/general/ChromeWrapper.vue
new file mode 100644
index 0000000000..43028707a5
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ChromeWrapper.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { Chrome } from '@ckpack/vue-color'
+import { computed } from '#imports'
+
+interface Props {
+  modelValue?: any
+  mode?: 'hex' | 'hex8' | 'hsl' | 'hsv' | 'rgba'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => '#00FFFFFF',
+  mode: () => 'hex8',
+})
+
+const emit = defineEmits(['update:modelValue', 'input'])
+
+const picked = computed({
+  get: () => props.modelValue || '#00FFFFFF',
+  set: (val) => {
+    emit('update:modelValue', val[props.mode] || null)
+    emit('input', val[props.mode] || null)
+  },
+})
+</script>
+
+<template>
+  <Chrome v-model="picked" />
+</template>
+
+<style scoped></style>