diff --git a/frontend/src/components/form/api/ApiColorField.vue b/frontend/src/components/form/api/ApiColorField.vue
new file mode 100644
index 0000000000..99adae9d08
--- /dev/null
+++ b/frontend/src/components/form/api/ApiColorField.vue
@@ -0,0 +1,44 @@
+<!--
+Displays a field as a e-color-field + write access via API wrapper
+-->
+
+<template>
+  <api-wrapper v-slot="wrapper" v-bind="$props" separate-buttons v-on="$listeners">
+    <e-color-field
+      :value="wrapper.localValue"
+      v-bind="$attrs"
+      :path="path"
+      :readonly="wrapper.readonly"
+      :disabled="disabled"
+      :error-messages="wrapper.errorMessages"
+      :loading="wrapper.isSaving || wrapper.isLoading ? 'secondary' : false"
+      :outlined="outlined"
+      :filled="filled"
+      :dense="dense"
+      @input="wrapper.on.input"
+      @blur="wrapper.on.blur"
+    >
+      <template #append>
+        <api-wrapper-append :wrapper="wrapper" />
+      </template>
+    </e-color-field>
+  </api-wrapper>
+</template>
+
+<script>
+import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
+import ApiWrapper from './ApiWrapper.vue'
+import ApiWrapperAppend from './ApiWrapperAppend.vue'
+
+export default {
+  name: 'ApiColorField',
+  components: { ApiWrapper, ApiWrapperAppend },
+  mixins: [apiPropsMixin],
+
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/form/api/__tests__/ApiColorField.spec.js b/frontend/src/components/form/api/__tests__/ApiColorField.spec.js
new file mode 100644
index 0000000000..e95f15325b
--- /dev/null
+++ b/frontend/src/components/form/api/__tests__/ApiColorField.spec.js
@@ -0,0 +1,92 @@
+import ApiColorField from '../ApiColorField.vue'
+import { fireEvent, screen, waitFor } from '@testing-library/vue'
+import { render } from '@/test/renderWithVuetify.js'
+import user from '@testing-library/user-event'
+import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
+import { extend } from 'vee-validate'
+import { regex } from 'vee-validate/dist/rules'
+import { ColorSpace, sRGB } from 'colorjs.io/fn'
+
+extend('regex', regex)
+
+ColorSpace.register(sRGB)
+describe('An ApiColorField', () => {
+  let apiMock
+
+  const FIELD_PATH = 'test-field/123'
+  const FIELD_LABEL = 'Test field'
+  const COLOR_1 = '#FF0000'
+  const COLOR_2 = '#FAFFAF'
+
+  beforeEach(() => {
+    apiMock = ApiMock.create()
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  test('triggers api.patch and status update if input changes', async () => {
+    // given
+    apiMock.get().thenReturn(ApiMock.success(COLOR_1).forPath(FIELD_PATH))
+    apiMock.patch().thenReturn(ApiMock.success(COLOR_2))
+    render(ApiColorField, {
+      props: {
+        autoSave: false,
+        path: FIELD_PATH,
+        uri: 'test-field/123',
+        label: FIELD_LABEL,
+        required: true,
+      },
+      mocks: {
+        api: apiMock.getMocks(),
+      },
+    })
+
+    // when
+    const inputField = await screen.findByLabelText(FIELD_LABEL)
+    inputField.value = COLOR_2
+    await fireEvent.input(inputField)
+    // click the button to open the picker
+    // click the save button
+    await waitFor(async () => {
+      await user.click(screen.getByLabelText('Speichern'))
+    })
+
+    // then
+    await waitFor(async () => {
+      const inputField = await screen.findByLabelText(FIELD_LABEL)
+      expect(inputField.value).toBe(COLOR_2)
+      expect(apiMock.getMocks().patch).toBeCalledTimes(1)
+    })
+  })
+
+  test('updates state if value in store is refreshed and has new value', async () => {
+    // given
+    apiMock.get().thenReturn(ApiMock.networkError().forPath(FIELD_PATH))
+    render(ApiColorField, {
+      props: {
+        autoSave: false,
+        path: FIELD_PATH,
+        uri: 'test-field/123',
+        label: FIELD_LABEL,
+        required: true,
+      },
+      mocks: {
+        api: apiMock.getMocks(),
+      },
+    })
+    await screen.findByText('A network error occurred.')
+    expect((await screen.findByLabelText(FIELD_LABEL)).value).not.toBe(COLOR_1)
+    const retryButton = await screen.findByText('Erneut versuchen')
+    apiMock.get().thenReturn(ApiMock.success(COLOR_1).forPath(FIELD_PATH))
+
+    // when
+    await user.click(retryButton)
+
+    // then
+    await waitFor(async () => {
+      expect((await screen.findByLabelText(FIELD_LABEL)).value).toBe(COLOR_1)
+    })
+  })
+})
diff --git a/frontend/src/components/form/api/__tests__/ApiColorPicker.spec.js b/frontend/src/components/form/api/__tests__/ApiColorPicker.spec.js
index 77e958f948..52d430a272 100644
--- a/frontend/src/components/form/api/__tests__/ApiColorPicker.spec.js
+++ b/frontend/src/components/form/api/__tests__/ApiColorPicker.spec.js
@@ -5,9 +5,11 @@ import user from '@testing-library/user-event'
 import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
 import { extend } from 'vee-validate'
 import { regex } from 'vee-validate/dist/rules'
+import { ColorSpace, sRGB } from 'colorjs.io/fn'
 
 extend('regex', regex)
 
+ColorSpace.register(sRGB)
 describe('An ApiColorPicker', () => {
   let apiMock
 
@@ -49,12 +51,16 @@ describe('An ApiColorPicker', () => {
     const canvas = container.querySelector('canvas')
     await user.click(canvas, { clientX: 10, clientY: 10 })
     // click the save button
-    await user.click(screen.getByLabelText('Speichern'))
+    await waitFor(async () => {
+      await user.click(screen.getByLabelText('Speichern'))
+    })
 
     // then
-    const inputField = await screen.findByLabelText(FIELD_LABEL)
-    expect(inputField.value).toBe(COLOR_2)
-    expect(apiMock.getMocks().patch).toBeCalledTimes(1)
+    await waitFor(async () => {
+      const inputField = await screen.findByLabelText(FIELD_LABEL)
+      expect(inputField.value).toBe(COLOR_2)
+      expect(apiMock.getMocks().patch).toBeCalledTimes(1)
+    })
   })
 
   test('updates state if value in store is refreshed and has new value', async () => {
diff --git a/frontend/src/components/form/base/ColorPicker/ColorSwatch.vue b/frontend/src/components/form/base/ColorPicker/ColorSwatch.vue
index 7e53e4adb8..6959e6245d 100644
--- a/frontend/src/components/form/base/ColorPicker/ColorSwatch.vue
+++ b/frontend/src/components/form/base/ColorPicker/ColorSwatch.vue
@@ -1,12 +1,14 @@
 <template>
   <v-btn
     class="e-colorswatch"
+    :class="{ 'e-colorswatch--null': color == null }"
     fab
     elevation="0"
     width="30"
     height="30"
     :color="color"
     :ripple="false"
+    v-bind="$attrs"
     @click="$emit('select-color', color)"
     v-on="$listeners"
   ></v-btn>
@@ -17,7 +19,7 @@ import { contrastColor } from '@/common/helpers/colors.js'
 export default {
   name: 'ColorSwatch',
   props: {
-    color: { type: String, required: true },
+    color: { type: String, default: null },
   },
   computed: {
     contrast() {
@@ -28,6 +30,19 @@ export default {
 }
 </script>
 <style scoped>
+.e-colorswatch::before {
+  background: transparent;
+}
+.e-colorswatch:focus {
+  transform: scale(1.1);
+}
+.e-colorswatch:focus::before {
+  opacity: 1;
+  outline: 1px solid v-bind(contrast);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.3),
+    0 4px 6px -4px rgba(0, 0, 0, 0.4);
+}
 .e-colorswatch::after {
   content: '•';
   color: v-bind(contrast);
@@ -38,4 +53,10 @@ export default {
   font-size: 28px;
   text-align: center;
 }
+.e-colorswatch--null {
+  background: #f0f0f0;
+  box-shadow:
+    inset 0 1px 3px rgba(0, 0, 0, 0.1),
+    inset 0 0 10px rgba(0, 0, 0, 0.02) !important;
+}
 </style>
diff --git a/frontend/src/components/form/base/EColorField.vue b/frontend/src/components/form/base/EColorField.vue
new file mode 100644
index 0000000000..143776a19e
--- /dev/null
+++ b/frontend/src/components/form/base/EColorField.vue
@@ -0,0 +1,107 @@
+<template>
+  <EParseField
+    ref="input"
+    :value="value"
+    :format="format"
+    :parse="parse"
+    :serialize="serialize"
+    :deserialize="deserialize"
+    :required="required"
+    :vee-id="veeId"
+    :vee-rules="veeRules"
+    reset-on-blur
+    v-bind="$attrs"
+    v-on="$listeners"
+    @input="$emit('input', $event)"
+  >
+    <!-- passing through all slots -->
+    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+      <slot v-if="name !== 'prepend'" :name="name" v-bind="slotData" />
+    </template>
+    <template #prepend="props">
+      <slot name="prepend" v-bind="props">
+        <ColorSwatch
+          class="mt-n1"
+          :color="props.serializedValue"
+          tag="div"
+          :aria-label="props.serializedValue"
+        />
+      </slot>
+    </template>
+  </EParseField>
+</template>
+
+<script>
+import { reactive } from 'vue'
+import { formComponentMixin } from '@/mixins/formComponentMixin.js'
+import { parse, serialize } from 'colorjs.io/fn'
+import ColorSwatch from '@/components/form/base/ColorPicker/ColorSwatch.vue'
+
+export default {
+  name: 'EColorField',
+  components: { ColorSwatch },
+  mixins: [formComponentMixin],
+  props: {
+    value: { type: String, required: false, default: null },
+  },
+  emits: ['input'],
+  methods: {
+    format(value) {
+      if (typeof value === 'string') {
+        return value
+      }
+      return !value
+        ? ''
+        : serialize(value, {
+            space: 'srgb',
+            format: 'hex',
+            collapse: false,
+          }).toUpperCase()
+    },
+    /**
+     * @param {string} value
+     */
+    parse(value) {
+      if (value === '') {
+        return null
+      }
+      try {
+        const color = parse(value)
+        color.alpha = 1
+        return reactive(color)
+      } catch (e) {
+        if (e instanceof TypeError) {
+          throw new Error(this.$tc('components.form.base.eColorField.parseError'))
+        } else {
+          throw e
+        }
+      }
+    },
+    /**
+     * @param {string|null} value
+     */
+    serialize(value) {
+      try {
+        return serialize(value, { format: 'hex', collapse: false }).toUpperCase()
+      } catch (e) {
+        return null
+      }
+    },
+    /**
+     * @param value {null|string}
+     * @return {null|Color}
+     */
+    deserialize(value) {
+      try {
+        return !value ? null : reactive(parse(value, { space: 'srgb', format: 'hex' }))
+      } catch (e) {
+        return null
+      }
+    },
+    focus() {
+      this.$refs.input.focus()
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/form/base/EColorPicker.vue b/frontend/src/components/form/base/EColorPicker.vue
index 861ffd0c69..bdb649070d 100644
--- a/frontend/src/components/form/base/EColorPicker.vue
+++ b/frontend/src/components/form/base/EColorPicker.vue
@@ -2,69 +2,131 @@
 Displays a field as a color picker (can be used with v-model)
 -->
 <template>
-  <base-picker
-    icon="mdi-palette"
-    :icon-color="value"
-    :value="value"
-    v-bind="$attrs"
-    :vee-id="veeId"
-    :parse-picker="parsePicker"
-    :vee-rules="veeRules || { regex: /#([a-f0-9]{3}){1,2}\b/i }"
-    :required="required"
-    button-aria-label-i18n-key="components.form.base.eColorPicker.openPicker"
-    open-on-text-field-click
-    @input="$emit('input', $event)"
+  <div
+    v-click-outside="{ handler: closePicker, closeConditional: closePickerConditional }"
+    class="e-form-container"
   >
-    <template #prepend="{ color, attrs, on }">
-      <ColorSwatch :color="color" class="mt-n1" v-bind="attrs" v-on="on" />
-    </template>
-    <template #default="picker">
-      <v-card :style="{ '--picker-contrast-color': contrast }" data-testid="colorpicker">
+    <v-menu
+      v-model="pickerOpen"
+      transition="scale-transition"
+      offset-y
+      offset-overflow
+      :open-on-click="false"
+      :close-on-click="false"
+      :close-on-content-click="false"
+      min-width="290px"
+      max-width="290px"
+      @input="onPickerClose"
+    >
+      <template #activator="{ on }">
+        <div v-on="on">
+          <EColorField
+            :id="id"
+            ref="input"
+            :value="pickerValue"
+            :vee-id="veeId"
+            :vee-rules="veeRules"
+            :filled="filled"
+            :hide-details="hideDetails"
+            :input-class="inputClass"
+            :required="required"
+            :path="path"
+            :label="label"
+            :validation-label-override="validationLabelOverride"
+            :error-messages="errorMessages"
+            v-bind="$attrs"
+            @blur="onBlur"
+            @input="onInput($event)"
+            @click.prevent="onInputClick"
+          >
+            <template #prepend="{ serializedValue }">
+              <ColorSwatch
+                ref="inputSwatch"
+                :color="serializedValue"
+                class="mt-n1"
+                :aria-label="
+                  pickerOpen
+                    ? $tc('components.form.base.eColorPicker.closePicker')
+                    : $tc('components.form.base.eColorPicker.openPicker', 0, {
+                        label: labelOrEntityFieldLabel,
+                      })
+                "
+                aria-haspopup="true"
+                :aria-expanded="pickerOpen ? 'true' : 'false'"
+                @click="onInputSwatchClick"
+              />
+            </template>
+            <template #append>
+              <slot name="append" />
+            </template>
+          </EColorField>
+        </div>
+      </template>
+      <v-card ref="picker" :ripple="false" tabindex="-1" data-testid="colorpicker">
+        <v-color-picker
+          v-if="pickerNull"
+          key="model"
+          value="#FF0000"
+          :style="{ '--picker-contrast-color': contrast }"
+          flat
+          @update:color="onPickerInput($event.hex)"
+        />
         <v-color-picker
-          :value="removeAlpha(picker.value || '')"
+          v-else
+          key="null"
+          :value="pickerValue"
+          :style="{ '--picker-contrast-color': contrast }"
           flat
-          @input="picker.onInput"
+          @update:color="debouncedPickerValue($event.hex)"
         />
         <v-divider />
         <div class="d-flex gap-2 pa-4 flex-wrap">
           <ColorSwatch
-            v-for="swatch in swatches"
+            v-for="swatch in swatchesWithReset"
             :key="swatch"
             :color="swatch"
-            @select-color="picker.onInput"
+            @select-color="onSwatchSelect($event)"
+          />
+          <ColorSwatch
+            v-if="!required"
+            color="#000000"
+            class="reset"
+            @select-color="onSwatchSelect(null)"
           />
         </div>
       </v-card>
-    </template>
-
-    <!-- passing the append slot through -->
-    <template #append>
-      <slot name="append" />
-    </template>
-  </base-picker>
+    </v-menu>
+  </div>
 </template>
 
 <script>
-import BasePicker from './BasePicker.vue'
 import { formComponentMixin } from '@/mixins/formComponentMixin.js'
 import { contrastColor } from '@/common/helpers/colors.js'
 import ColorSwatch from '@/components/form/base/ColorPicker/ColorSwatch.vue'
+import { debounce } from 'lodash'
+import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
 
 export default {
   name: 'EColorPicker',
-  components: { ColorSwatch, BasePicker },
-  mixins: [formComponentMixin],
+  components: { ColorSwatch },
+  mixins: [formComponentMixin, formComponentPropsMixin],
+  inheritAttrs: false,
   props: {
-    value: { type: String, required: true },
+    value: { type: String, required: false, default: null },
   },
+  emits: ['input'],
   data: () => ({
+    pickerOpen: false,
+    pickerValue: null,
+    pickerNull: false,
+    debouncedPickerValue: null,
     swatches: [
       '#90B7E4',
       '#6EDBE9',
-      '#4dbb52',
+      '#4DBB52',
       '#FF9800',
       '#FD7A7A',
-      '#d584e9',
+      '#D584E9',
       '#BBBBBB',
 
       '#1964B1',
@@ -78,30 +140,103 @@ export default {
   }),
   computed: {
     contrast() {
-      // Vuetify returns invalid value #NANNAN in the initialization phase
-      return this.value && this.value !== '#NANNAN' ? contrastColor(this.value) : 'black'
+      try {
+        // Vuetify returns invalid value #NANNAN in the initialization phase
+        return this.value && this.value !== '#NANNAN'
+          ? contrastColor(this.value)
+          : 'black'
+      } catch (error) {
+        return 'black'
+      }
+    },
+    swatchesWithReset() {
+      return this.required
+        ? this.swatches
+        : this.swatches.slice(0, this.swatches.length - 1)
+    },
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.pickerValue = newValue
+        this.pickerNull = [null, ''].includes(newValue)
+      },
+      immediate: true,
+    },
+    pickerOpen: {
+      handler(open) {
+        if (!open) {
+          this.onPickerClose()
+        }
+      },
     },
   },
+  created() {
+    this.debouncedPickerValue = debounce(this.onPickerInput, 300)
+  },
+  mounted() {
+    document.addEventListener('keydown', this.escapeHandler)
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this.escapeHandler)
+  },
   methods: {
-    /**
-     * Format internal value for display in the UI
-     */
-    format(val) {
-      return val || ''
+    onInputClick() {
+      this.activator = 'input'
+      this.pickerOpen = true
     },
-    parsePicker(val) {
-      const result = this.removeAlpha(val)
-      if (result.toLowerCase() === this.value.toLowerCase()) {
-        // Avoid changing the case if that is all that has changed
-        return Promise.resolve(this.value)
+    onInputSwatchClick() {
+      this.activator = 'swatch'
+      this.pickerOpen = !this.pickerOpen
+      if (this.pickerOpen) {
+        setTimeout(() => {
+          this.$refs.picker?.$el.focus()
+        }, 100)
       }
-      return Promise.resolve(result)
     },
-    removeAlpha(hex) {
-      return hex.length === 9 ? hex.substring(0, 7) : hex
+    onInput(value) {
+      this.pickerValue = value
+      this.$emit('input', this.pickerValue)
+    },
+    onBlur(event) {
+      if (!this.pickerOpen) {
+        this.$emit('blur', event)
+      }
+    },
+    onPickerInput(value) {
+      this.pickerValue = value.toUpperCase()
+      this.pickerNull = false
+      this.$emit('input', this.pickerValue)
+    },
+    onSwatchSelect(color) {
+      this.pickerValue = color
+      this.$emit('input', this.pickerValue)
+      this.pickerOpen = false
+      this.$refs.inputSwatch.$el.focus()
+    },
+    closePicker() {
+      this.pickerOpen = false
     },
-    update(picker, value) {
-      picker.on.input(value)
+    closePickerConditional(event) {
+      return this.pickerOpen && !this.$refs.picker?.$el.contains(event.target)
+    },
+    onPickerClose() {
+      switch (this.activator) {
+        case 'input':
+          this.$refs.input.focus()
+          break
+        case 'swatch':
+          this.$refs.inputSwatch.$el.focus()
+          break
+      }
+      this.$emit('blur')
+    },
+    escapeHandler(event) {
+      switch (event.code) {
+        case 'Escape':
+          this.closePicker()
+          break
+      }
     },
   },
 }
@@ -117,4 +252,8 @@ export default {
   font-size: 28px;
   text-align: center;
 }
+
+:deep(.e-colorswatch.reset::after) {
+  content: '×';
+}
 </style>
diff --git a/frontend/src/components/form/base/ENumberField.vue b/frontend/src/components/form/base/ENumberField.vue
index b56b4c8887..076a98507a 100644
--- a/frontend/src/components/form/base/ENumberField.vue
+++ b/frontend/src/components/form/base/ENumberField.vue
@@ -14,11 +14,6 @@
   >
     <!-- passing through all slots -->
     <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-    <template #scoped="{ scopedSlots }">
-      <template v-for="(_, name) in scopedSlots" :slot="name" slot-scope="slotData">
-        <slot :name="name" v-bind="slotData" />
-      </template>
-    </template>
   </EParseField>
 </template>
 
diff --git a/frontend/src/components/form/base/EParseField.vue b/frontend/src/components/form/base/EParseField.vue
index 9c3c6be6f8..89e4ea1921 100644
--- a/frontend/src/components/form/base/EParseField.vue
+++ b/frontend/src/components/form/base/EParseField.vue
@@ -26,13 +26,22 @@ Displays a field as a textfield (can be used with v-model)
       type="text"
       v-on="inputListeners"
     >
-      <!-- passing through all slots -->
-      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
-      <slot name="scoped" :scoped-slots="$scopedSlots">
-        <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
-          <slot :name="name" v-bind="slotData" />
-        </template>
-      </slot>
+      <template #prepend>
+        <slot
+          name="prepend"
+          :string-value="stringValue"
+          :internal-value="internalValue"
+          :serialized-value="serializedValue"
+        />
+      </template>
+      <template #append>
+        <slot
+          name="append"
+          :string-value="stringValue"
+          :internal-value="internalValue"
+          :serialized-value="serializedValue"
+        />
+      </template>
     </v-text-field>
   </ValidationProvider>
 </template>
@@ -61,15 +70,30 @@ export default {
     resetOnBlur: { type: Boolean, default: false },
 
     /**
-     * Format internal value for display in the UI
+     * Format internal value to string
      */
     format: { type: Function, required: false, default: null },
 
     /**
-     * Parse a user-supplied value into the internal format
+     * Parse a user-supplied value into the internal value type
      */
     parse: { type: Function, required: false, default: null },
 
+    /**
+     * Serialize the internal value for output
+     */
+    serialize: { type: Function, required: false, default: null },
+
+    /**
+     * Deserialize the serialized value into the internal value type
+     */
+    deserialize: { type: Function, required: false, default: null },
+
+    /**
+     * Override the default serialized values comparison function
+     */
+    compare: { type: Function, required: false, default: (a, b) => a === b },
+
     /**
      * Remove unwanted characters from the input value
      */
@@ -83,10 +107,16 @@ export default {
       stringValue: null,
 
       /**
-       * valid value (parsed type or null)
+       * parsed value (parsed type or null)
+       */
+      internalValue: null,
+
+      /**
+       * serialized value (for output)
        */
-      localValue: null,
+      serializedValue: null,
 
+      intermediateParseError: null,
       parseError: null,
 
       /**
@@ -123,10 +153,12 @@ export default {
       handler(val) {
         // if the value is the same, we don't need to parse it again
         this.parseError = null
-        if (val === this.localValue) {
+        this.intermediateParseError = null
+        if (this.compare(val, this.serializedValue)) {
           return
         }
-        this.localValue = val
+        this.serializedValue = val
+        this.internalValue = this.deserialize?.(val) ?? val
         this.stringValue = this.format?.(val) ?? val
       },
       immediate: true,
@@ -138,6 +170,8 @@ export default {
         value = this.inputFilter(value)
         this.stringValue = value
         this.$refs.textField.lazyValue = value
+      } else {
+        this.stringValue = value
       }
       if (this.debouncedParse) {
         this.debounceParseValue(value)
@@ -146,18 +180,20 @@ export default {
       }
     },
     onBlur(event) {
-      if (this.resetOnBlur) {
-        this.stringValue = this.format?.(this.localValue) ?? this.localValue
+      if (this.resetOnBlur && !this.intermediateParseError) {
+        this.stringValue = this.format?.(this.internalValue) ?? this.internalValue
+        this.$refs.textField.lazyValue = this.stringValue
       }
+      this.parseError = this.intermediateParseError
+      this.$refs.validationProvider.validate(this.serializedValue)
       this.$emit('blur', event)
     },
     setValue(val) {
-      if (
-        (this.parse?.(this.localValue) ?? this.localValue) !== (this.parse?.(val) ?? val)
-      ) {
-        this.localValue = val
+      if (!this.compare(this.serializedValue, this.serialize?.(val) ?? val)) {
+        this.internalValue = val
 
-        this.$emit('input', val)
+        this.serializedValue = this.serialize?.(val) ?? val
+        this.$emit('input', this.serialize?.(val) ?? val)
       }
     },
     async parseValue(val) {
@@ -166,10 +202,10 @@ export default {
           val = await this.parse(val)
         }
         this.setValue(val)
-        // after saving value, trigger validations
-        this.$refs.validationProvider.validate(this.localValue)
+        this.parseError = null
+        this.intermediateParseError = null
       } catch (error) {
-        this.parseError = error
+        this.intermediateParseError = error
       }
     },
     focus() {
diff --git a/frontend/src/components/form/base/__tests__/EColorField.spec.js b/frontend/src/components/form/base/__tests__/EColorField.spec.js
new file mode 100644
index 0000000000..f3708f7545
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/EColorField.spec.js
@@ -0,0 +1,89 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+import formBaseComponents from '@/plugins/formBaseComponents'
+
+import EColorField from '@/components/form/base/EColorField.vue'
+import { mount as mountComponent } from '@vue/test-utils'
+import { ColorSpace, sRGB } from 'colorjs.io/fn'
+
+Vue.use(Vuetify)
+Vue.use(formBaseComponents)
+
+ColorSpace.register(sRGB)
+
+describe('An EColorField', () => {
+  let vuetify
+
+  const mount = (options) => {
+    const app = Vue.component('App', {
+      components: { EColorField },
+      data: function () {
+        return {
+          data: null,
+        }
+      },
+      methods: {
+        parse: (value) => {
+          return value === 'true' ? true : value === 'false' ? false : null
+        },
+        format: (value) => {
+          return value === null ? '' : `${value}`
+        },
+      },
+      template: `<div data-app><e-color-field label="test" v-model="data"/></div>`,
+    })
+    return mountComponent(app, { vuetify, attachTo: document.body, ...options })
+  }
+
+  beforeEach(() => {
+    vuetify = new Vuetify()
+  })
+
+  test('looks like a textfield', async () => {
+    const wrapper = mount()
+    expect(wrapper).toMatchSnapshot('empty')
+
+    await wrapper.setData({ data: '#FF0000' })
+    expect(wrapper).toMatchSnapshot('with text')
+  })
+
+  test('updates text when vModel changes', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input').element
+    expect(input.value).toBeDefined()
+
+    const firstValue = '#A1E1E1'
+    await wrapper.setData({ data: firstValue })
+    expect(input.value).toBe(`${firstValue}`)
+
+    const secondValue = '#FF00FF'
+    await wrapper.setData({ data: secondValue })
+    expect(input.value).toBe(`${secondValue}`)
+  })
+
+  test('updates vModel when value of input field changes', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+    const value = '#123456'
+
+    input.element.value = `${value}`
+    await input.trigger('input')
+
+    expect(wrapper.vm.data).toBe(value)
+  })
+
+  test.each([
+    ['#00FF00', '#00FF00'],
+    ['red', '#FF0000'],
+    ['', null],
+  ])('parses "%s" as "%s"', async (string, expected) => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+
+    input.element.value = `${string}`
+    await input.trigger('input')
+
+    expect(wrapper.vm.data).toBe(expected)
+  })
+})
diff --git a/frontend/src/components/form/base/__tests__/EColorPicker.spec.js b/frontend/src/components/form/base/__tests__/EColorPicker.spec.js
index b7e398476b..9cafe4d42c 100644
--- a/frontend/src/components/form/base/__tests__/EColorPicker.spec.js
+++ b/frontend/src/components/form/base/__tests__/EColorPicker.spec.js
@@ -1,19 +1,22 @@
-import { screen, waitFor } from '@testing-library/vue'
+import { fireEvent, screen, waitFor } from '@testing-library/vue'
 import { render, setTestLocale, snapshotOf } from '@/test/renderWithVuetify.js'
 import user from '@testing-library/user-event'
 import EColorPicker from '../EColorPicker.vue'
 
 import { regex } from 'vee-validate/dist/rules'
 import { extend } from 'vee-validate'
+import { ColorSpace, sRGB } from 'colorjs.io/fn'
+
 extend('regex', regex)
 
+ColorSpace.register(sRGB)
 describe('An EColorPicker', () => {
-  const COLOR1 = '#ff0000'
-  const COLOR2 = '#ff00ff'
+  const COLOR1 = '#FF0000'
+  const COLOR2 = '#FF00FF'
   const COLOR3 = '#FAFFAF'
   const INVALID_COLOR = 'some new color'
   const PICKER_BUTTON_LABEL_TEXT = 'Dialog öffnen, um eine Farbe für test zu wählen'
-  const VALIDATION_MESSAGE = 'test is not valid'
+  const VALIDATION_MESSAGE = 'Bitte gültige Farbe eingeben.'
 
   beforeEach(() => {
     setTestLocale('de')
@@ -225,6 +228,7 @@ describe('An EColorPicker', () => {
     // when
     await user.clear(inputField)
     await user.keyboard(INVALID_COLOR)
+    await fireEvent.blur(inputField)
 
     // then
     await screen.findByText(VALIDATION_MESSAGE)
@@ -242,10 +246,26 @@ describe('An EColorPicker', () => {
     // when
     await user.clear(inputField)
     await user.keyboard('#abc')
+    await fireEvent.blur(inputField)
 
     // then
     await waitFor(() => {
       screen.getByDisplayValue('#AABBCC')
     })
   })
+
+  it('accepts null', async () => {
+    render(EColorPicker, {
+      props: { value: COLOR2, label: 'test' },
+    })
+    const inputField = await screen.findByDisplayValue(COLOR2)
+    expect(inputField).toHaveValue(COLOR2)
+    const button = await screen.getByLabelText(PICKER_BUTTON_LABEL_TEXT)
+    // click the button to open the picker
+    await user.click(button)
+
+    // when
+    await user.click(screen.getByTestId('colorpicker').querySelector('.reset'))
+    expect(inputField).toHaveValue('')
+  })
 })
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/EColorField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/EColorField.spec.js.snap
new file mode 100644
index 0000000000..f381ba4bbd
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EColorField.spec.js.snap
@@ -0,0 +1,58 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`An EColorField > looks like a textfield > empty 1`] = `
+<div data-app>
+     <div class="e-form-container"
+          label="test">
+          <div class="v-input v-input--hide-details theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+               <div class="v-input__prepend-outer">
+                    <div class="e-colorswatch mt-n1 v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default e-colorswatch--null"
+                         style="height: 30px; width: 30px; --ee5e0d96-contrast: black;"
+                         tag="div">
+                         <span class="v-btn__content"></span>
+                    </div>
+               </div>
+               <div class="v-input__control">
+                    <div class="v-input__slot">
+                         <div class="v-text-field__slot">
+                              <label class="v-label theme--light"
+                                     for
+                                     style="left: 0px; position: absolute;">test</label>
+                              <input id
+                                     type="text">
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
+</div>
+`;
+
+exports[`An EColorField > looks like a textfield > with text 1`] = `
+<div data-app>
+     <div class="e-form-container"
+          label="test">
+          <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+               <div class="v-input__prepend-outer">
+                    <div aria-label="#FF0000"
+                         class="e-colorswatch mt-n1 v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                         style="height: 30px; width: 30px; --ee5e0d96-contrast: #fff; background-color: rgb(255, 0, 0); border-color: #ff0000;"
+                         tag="div">
+                         <span class="v-btn__content"></span>
+                    </div>
+               </div>
+               <div class="v-input__control">
+                    <div class="v-input__slot">
+                         <div class="v-text-field__slot">
+                              <label class="v-label v-label--active theme--light"
+                                     for
+                                     style="left: 0px; position: absolute;">test</label>
+                              <input id
+                                     type="text">
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
+</div>
+`;
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
index f242b402a0..bf6e553ea6 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
@@ -2,14 +2,61 @@
 
 exports[`An EColorPicker > looks like a color picker > pickerclosed 1`] = `
 <div data-app="true">
-     <div class="e-form-container e-picker-base"
-          label="test"
-          vee-rules="[object Object]">
+     <div class="e-form-container">
           <div class="v-menu">
-               <div class="e-form-container">
-                    <div class="v-input v-input--hide-details theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+               <div>
+                    <div class="e-form-container"
+                         error-messages
+                         filled="true"
+                         hide-details="auto"
+                         input-class
+                         label="test">
+                         <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+                              <div class="v-input__prepend-outer">
+                                   <button aria-expanded="false"
+                                           aria-haspopup="true"
+                                           aria-label="Dialog öffnen, um eine Farbe für test zu wählen"
+                                           class="e-colorswatch mt-n1 v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                                           style="height: 30px; width: 30px; background-color: rgb(255, 0, 0); border-color: #ff0000; --ee5e0d96-contrast: #fff;"
+                                           type="button">
+                                        <span class="v-btn__content"></span>
+                                   </button>
+                              </div>
+                              <div class="v-input__control">
+                                   <div class="v-input__slot">
+                                        <div class="v-text-field__slot">
+                                             <label class="v-label v-label--active theme--light"
+                                                    for
+                                                    style="left: 0px; position: absolute;">test</label>
+                                             <input id
+                                                    type="text">
+                                        </div>
+                                   </div>
+                              </div>
+                         </div>
+                    </div>
+               </div>
+               <!---->
+          </div>
+     </div>
+</div>
+`;
+
+exports[`An EColorPicker > looks like a color picker > pickeropen 1`] = `
+<div data-app="true">
+     <div class="e-form-container">
+          <div>
+               <div class="e-form-container"
+                    error-messages
+                    filled="true"
+                    hide-details="auto"
+                    input-class
+                    label="test">
+                    <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--is-booted v-text-field--enclosed">
                          <div class="v-input__prepend-outer">
-                              <button aria-label="Dialog öffnen, um eine Farbe für test zu wählen"
+                              <button aria-expanded="true"
+                                      aria-haspopup="true"
+                                      aria-label="Dialog schliessen"
                                       class="e-colorswatch mt-n1 v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
                                       style="height: 30px; width: 30px; background-color: rgb(255, 0, 0); border-color: #ff0000; --ee5e0d96-contrast: #fff;"
                                       type="button">
@@ -19,7 +66,7 @@ exports[`An EColorPicker > looks like a color picker > pickerclosed 1`] = `
                          <div class="v-input__control">
                               <div class="v-input__slot">
                                    <div class="v-text-field__slot">
-                                        <label class="v-label theme--light"
+                                        <label class="v-label v-label--active theme--light"
                                                for
                                                style="left: 0px; position: absolute;">test</label>
                                         <input id
@@ -29,40 +76,6 @@ exports[`An EColorPicker > looks like a color picker > pickerclosed 1`] = `
                          </div>
                     </div>
                </div>
-               <!---->
-          </div>
-     </div>
-</div>
-`;
-
-exports[`An EColorPicker > looks like a color picker > pickeropen 1`] = `
-<div data-app="true">
-     <div class="e-form-container e-picker-base"
-          label="test"
-          vee-rules="[object Object]">
-          <div class="e-form-container"
-               value="#ff0000">
-               <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--is-booted v-text-field--enclosed">
-                    <div class="v-input__prepend-outer">
-                         <button aria-label="Dialog öffnen, um eine Farbe für test zu wählen"
-                                 class="e-colorswatch mt-n1 v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(255, 0, 0); border-color: #ff0000; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                    </div>
-                    <div class="v-input__control">
-                         <div class="v-input__slot">
-                              <div class="v-text-field__slot">
-                                   <label class="v-label v-label--active theme--light"
-                                          for
-                                          style="left: 0px; position: absolute;">test</label>
-                                   <input id
-                                          type="text">
-                              </div>
-                         </div>
-                    </div>
-               </div>
           </div>
           <div class="v-menu">
                <transition-stub name="scale-transition"></transition-stub>
@@ -71,163 +84,161 @@ exports[`An EColorPicker > looks like a color picker > pickeropen 1`] = `
      <div class="v-menu__content theme--light menuable__content__active "
           role="menu"
           style="max-height: auto; min-width: 290px; max-width: 290px; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;">
-          <div id>
-               <div class="v-card v-sheet theme--light"
-                    style="--picker-contrast-color: #fff;">
-                    <div class="v-color-picker v-sheet theme--light v-color-picker--flat theme--light"
-                         style="max-width: 300px;">
-                         <div class="v-color-picker__canvas"
-                              style="width: 300px; height: 150px;">
-                              <canvas height="150"
-                                      width="300"></canvas>
-                              <div class="v-color-picker__canvas-dot"
-                                   style="width: 10px; height: 10px; transform: translate(295px, -5px);"></div>
-                         </div>
-                         <div class="v-color-picker__controls">
-                              <div class="v-color-picker__preview v-color-picker__preview--hide-alpha">
-                                   <div class="v-color-picker__dot">
-                                        <div style="background: rgb(255, 0, 0);"></div>
-                                   </div>
-                                   <div class="v-color-picker__sliders">
-                                        <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
-                                             <div class="v-input__control">
-                                                  <div class="v-input__slot">
-                                                       <div class="v-slider v-slider--horizontal theme--light">
-                                                            <input disabled="disabled"
-                                                                   id
-                                                                   readonly="readonly"
-                                                                   tabindex="-1"
-                                                                   value="0">
-                                                            <div class="v-slider__track-container">
-                                                                 <div class="v-slider__track-background primary lighten-3"
-                                                                      style="right: 0px; width: calc(100%);"></div>
-                                                                 <div class="v-slider__track-fill primary"
-                                                                      style="left: 0px; width: 0%;"></div>
-                                                            </div>
-                                                            <div aria-orientation="horizontal"
-                                                                 aria-readonly="false"
-                                                                 aria-valuemax="360"
-                                                                 aria-valuemin="0"
-                                                                 aria-valuenow="0"
-                                                                 class="v-slider__thumb-container grey--text text--lighten-2"
-                                                                 role="slider"
-                                                                 style="left: 0%;"
-                                                                 tabindex="0">
-                                                                 <div class="v-slider__thumb grey lighten-2"></div>
-                                                            </div>
+          <div class="v-card v-card--link v-sheet theme--light"
+               tabindex="-1">
+               <div class="v-color-picker v-sheet theme--light v-color-picker--flat theme--light"
+                    style="max-width: 300px; --picker-contrast-color: #fff;">
+                    <div class="v-color-picker__canvas"
+                         style="width: 300px; height: 150px;">
+                         <canvas height="150"
+                                 width="300"></canvas>
+                         <div class="v-color-picker__canvas-dot"
+                              style="width: 10px; height: 10px; transform: translate(295px, -5px);"></div>
+                    </div>
+                    <div class="v-color-picker__controls">
+                         <div class="v-color-picker__preview v-color-picker__preview--hide-alpha">
+                              <div class="v-color-picker__dot">
+                                   <div style="background: rgb(255, 0, 0);"></div>
+                              </div>
+                              <div class="v-color-picker__sliders">
+                                   <div class="v-input v-color-picker__hue v-input--hide-details theme--light v-input__slider v-color-picker__track">
+                                        <div class="v-input__control">
+                                             <div class="v-input__slot">
+                                                  <div class="v-slider v-slider--horizontal theme--light">
+                                                       <input disabled="disabled"
+                                                              id
+                                                              readonly="readonly"
+                                                              tabindex="-1"
+                                                              value="0">
+                                                       <div class="v-slider__track-container">
+                                                            <div class="v-slider__track-background primary lighten-3"
+                                                                 style="right: 0px; width: calc(100%);"></div>
+                                                            <div class="v-slider__track-fill primary"
+                                                                 style="left: 0px; width: 0%;"></div>
+                                                       </div>
+                                                       <div aria-orientation="horizontal"
+                                                            aria-readonly="false"
+                                                            aria-valuemax="360"
+                                                            aria-valuemin="0"
+                                                            aria-valuenow="0"
+                                                            class="v-slider__thumb-container grey--text text--lighten-2"
+                                                            role="slider"
+                                                            style="left: 0%;"
+                                                            tabindex="0">
+                                                            <div class="v-slider__thumb grey lighten-2"></div>
                                                        </div>
                                                   </div>
                                              </div>
                                         </div>
                                    </div>
                               </div>
-                              <div class="v-color-picker__edit">
-                                   <div class="v-color-picker__input">
-                                        <input max="255"
-                                               min="0"
-                                               step="1"
-                                               type="number">
-                                        <span>R</span>
-                                   </div>
-                                   <div class="v-color-picker__input">
-                                        <input max="255"
-                                               min="0"
-                                               step="1"
-                                               type="number">
-                                        <span>G</span>
-                                   </div>
-                                   <div class="v-color-picker__input">
-                                        <input max="255"
-                                               min="0"
-                                               step="1"
-                                               type="number">
-                                        <span>B</span>
-                                   </div>
-                                   <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
-                                           type="button">
-                                        <span class="v-btn__content">
-                                             <i aria-hidden="true"
-                                                class="v-icon notranslate mdi mdi-unfold-more-horizontal theme--light"></i>
-                                        </span>
-                                   </button>
+                         </div>
+                         <div class="v-color-picker__edit">
+                              <div class="v-color-picker__input">
+                                   <input max="255"
+                                          min="0"
+                                          step="1"
+                                          type="number">
+                                   <span>R</span>
+                              </div>
+                              <div class="v-color-picker__input">
+                                   <input max="255"
+                                          min="0"
+                                          step="1"
+                                          type="number">
+                                   <span>G</span>
                               </div>
+                              <div class="v-color-picker__input">
+                                   <input max="255"
+                                          min="0"
+                                          step="1"
+                                          type="number">
+                                   <span>B</span>
+                              </div>
+                              <button class="v-btn v-btn--icon v-btn--round theme--light v-size--small"
+                                      type="button">
+                                   <span class="v-btn__content">
+                                        <i aria-hidden="true"
+                                           class="v-icon notranslate mdi mdi-unfold-more-horizontal theme--light"></i>
+                                   </span>
+                              </button>
                          </div>
                     </div>
-                    <hr aria-orientation="horizontal"
-                        class="v-divider theme--light"
-                        role="separator">
-                    <div class="d-flex gap-2 pa-4 flex-wrap">
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(144, 183, 228); border-color: #90b7e4; --ee5e0d96-contrast: #000;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(110, 219, 233); border-color: #6edbe9; --ee5e0d96-contrast: #000;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(77, 187, 82); border-color: #4dbb52; --ee5e0d96-contrast: #000;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(255, 152, 0); border-color: #ff9800; --ee5e0d96-contrast: #000;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(253, 122, 122); border-color: #fd7a7a; --ee5e0d96-contrast: #000;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(213, 132, 233); border-color: #d584e9; --ee5e0d96-contrast: #000;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(187, 187, 187); border-color: #bbbbbb; --ee5e0d96-contrast: #000;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(25, 100, 177); border-color: #1964b1; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(30, 134, 202); border-color: #1e86ca; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(61, 184, 66); border-color: #3db842; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(241, 129, 13); border-color: #f1810d; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(199, 26, 26); border-color: #c71a1a; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(207, 59, 214); border-color: #cf3bd6; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                         <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
-                                 style="height: 30px; width: 30px; background-color: rgb(87, 87, 87); border-color: #575757; --ee5e0d96-contrast: #fff;"
-                                 type="button">
-                              <span class="v-btn__content"></span>
-                         </button>
-                    </div>
+               </div>
+               <hr aria-orientation="horizontal"
+                   class="v-divider theme--light"
+                   role="separator">
+               <div class="d-flex gap-2 pa-4 flex-wrap">
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(144, 183, 228); border-color: #90b7e4; --ee5e0d96-contrast: #000;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(110, 219, 233); border-color: #6edbe9; --ee5e0d96-contrast: #000;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(77, 187, 82); border-color: #4dbb52; --ee5e0d96-contrast: #000;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(255, 152, 0); border-color: #ff9800; --ee5e0d96-contrast: #000;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(253, 122, 122); border-color: #fd7a7a; --ee5e0d96-contrast: #000;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(213, 132, 233); border-color: #d584e9; --ee5e0d96-contrast: #000;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(187, 187, 187); border-color: #bbbbbb; --ee5e0d96-contrast: #000;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(25, 100, 177); border-color: #1964b1; --ee5e0d96-contrast: #fff;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(30, 134, 202); border-color: #1e86ca; --ee5e0d96-contrast: #fff;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(61, 184, 66); border-color: #3db842; --ee5e0d96-contrast: #fff;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(241, 129, 13); border-color: #f1810d; --ee5e0d96-contrast: #fff;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(199, 26, 26); border-color: #c71a1a; --ee5e0d96-contrast: #fff;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(207, 59, 214); border-color: #cf3bd6; --ee5e0d96-contrast: #fff;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
+                    <button class="e-colorswatch reset v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
+                            style="height: 30px; width: 30px; background-color: rgb(0, 0, 0); border-color: #000000; --ee5e0d96-contrast: #fff;"
+                            type="button">
+                         <span class="v-btn__content"></span>
+                    </button>
                </div>
           </div>
      </div>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 02710d27f3..bcb528384d 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -228,7 +228,11 @@
     },
     "form": {
       "base": {
+        "eColorField": {
+          "parseError": "Bitte gültige Farbe eingeben."
+        },
         "eColorPicker": {
+          "closePicker": "Dialog schliessen",
           "openPicker": "Dialog öffnen, um eine Farbe für {label} zu wählen"
         },
         "eDatePicker": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 78a71ee26f..8ed99e5474 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -228,7 +228,11 @@
     },
     "form": {
       "base": {
+        "eColorField": {
+          "parseError": "Please enter a valid color."
+        },
         "eColorPicker": {
+          "closePicker": "Close dialog",
           "openPicker": "Open dialog to select a color for {label}"
         },
         "eDatePicker": {
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index a808a21f66..e26ea681e1 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -214,6 +214,7 @@
     "form": {
       "base": {
         "eColorPicker": {
+          "closePicker": "Fermer le dialogue",
           "openPicker": "Ouvre un dialogue pour sélectionner une couleur pour {label}"
         },
         "eDatePicker": {
diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
index 2f5b8335c2..f839d75a5d 100644
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -206,6 +206,7 @@
     "form": {
       "base": {
         "eColorPicker": {
+          "closePicker": "Chiudere il dialogo",
           "openPicker": "Apri una finestra di dialogo per selezionare un colore per {label}"
         },
         "eDatePicker": {
diff --git a/frontend/src/locales/rm.json b/frontend/src/locales/rm.json
index c3df1ab06b..deaf31f7ee 100644
--- a/frontend/src/locales/rm.json
+++ b/frontend/src/locales/rm.json
@@ -171,6 +171,7 @@
     "form": {
       "base": {
         "eColorPicker": {
+          "closePicker": "Terminar il dialog",
           "openPicker": "Avrir il dialog per tscherner ina colur per {label}"
         },
         "eDatePicker": {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index dceb9f5c29..2e391d5f5a 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -10,6 +10,7 @@ import {
   ignoreNativeBindingWarnMessages,
   i18n,
   dayjs,
+  color,
   veeValidate,
 } from './plugins'
 import { store } from './plugins/store'
@@ -19,7 +20,7 @@ import * as Sentry from '@sentry/vue'
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
 
-import { Resize } from 'vuetify/lib/directives'
+import { ClickOutside, Resize } from 'vuetify/lib/directives'
 import ResizeObserver from 'v-resize-observer'
 
 const env = getEnv()
@@ -42,12 +43,14 @@ Vue.use(ignoreNativeBindingWarnMessages)
 Vue.use(storeLoader)
 Vue.use(vuetifyLoader)
 Vue.use(dayjs)
+Vue.use(color)
 Vue.use(veeValidate)
 Vue.use(Toast, {
   maxToasts: 2,
 })
 
 // manually importing necessary vuetify directives (there's no auomatic vuetify-loader for vitejs)
+Vue.directive('click-outside', ClickOutside)
 Vue.directive('resize', Resize)
 Vue.directive('resizeobserver', ResizeObserver.directive)
 
diff --git a/frontend/src/plugins/color.js b/frontend/src/plugins/color.js
new file mode 100644
index 0000000000..6633e6ba8d
--- /dev/null
+++ b/frontend/src/plugins/color.js
@@ -0,0 +1,7 @@
+import { ColorSpace, sRGB } from 'colorjs.io/fn'
+
+export default {
+  install: () => {
+    ColorSpace.register(sRGB)
+  },
+}
diff --git a/frontend/src/plugins/formBaseComponents.js b/frontend/src/plugins/formBaseComponents.js
index ea12546919..b2514f6f55 100644
--- a/frontend/src/plugins/formBaseComponents.js
+++ b/frontend/src/plugins/formBaseComponents.js
@@ -2,6 +2,7 @@
 
 import ECheckbox from '@/components/form/base/ECheckbox.vue'
 import EColorPicker from '@/components/form/base/EColorPicker.vue'
+import EColorField from '@/components/form/base/EColorField.vue'
 import EDatePicker from '@/components/form/base/EDatePicker.vue'
 import EForm from '@/components/form/base/EForm.vue'
 import ENumberField from '@/components/form/base/ENumberField.vue'
@@ -16,6 +17,7 @@ import ETimePicker from '@/components/form/base/ETimePicker.vue'
 class FormBaseComponentsPlugin {
   install(Vue) {
     Vue.component('ECheckbox', ECheckbox)
+    Vue.component('EColorField', EColorField)
     Vue.component('EColorPicker', EColorPicker)
     Vue.component('EDatePicker', EDatePicker)
     Vue.component('EForm', EForm)
diff --git a/frontend/src/plugins/index.js b/frontend/src/plugins/index.js
index ba397a2f27..141103f6e7 100644
--- a/frontend/src/plugins/index.js
+++ b/frontend/src/plugins/index.js
@@ -7,3 +7,4 @@ export { default as ignoreNativeBindingWarnMessages } from './ignoreNativeBindin
 export { default as i18n } from './i18n'
 export { default as veeValidate } from './veeValidate'
 export { default as dayjs } from './dayjs'
+export { default as color } from './color'
diff --git a/frontend/src/views/dev/Controls.vue b/frontend/src/views/dev/Controls.vue
index 39a08404f0..4707811688 100644
--- a/frontend/src/views/dev/Controls.vue
+++ b/frontend/src/views/dev/Controls.vue
@@ -77,6 +77,7 @@ import ESelect from '@/components/form/base/ESelect.vue'
 import EDatePicker from '@/components/form/base/EDatePicker.vue'
 import ETimePicker from '@/components/form/base/ETimePicker.vue'
 import EColorPicker from '@/components/form/base/EColorPicker.vue'
+import EColorField from '@/components/form/base/EColorField.vue'
 import ApiTextField from '@/components/form/api/ApiTextField.vue'
 import ApiNumberField from '@/components/form/api/ApiNumberField.vue'
 import ApiTextarea from '@/components/form/api/ApiTextarea.vue'
@@ -84,6 +85,7 @@ import ApiRichtext from '@/components/form/api/ApiRichtext.vue'
 import ApiCheckbox from '@/components/form/api/ApiCheckbox.vue'
 import ApiSwitch from '@/components/form/api/ApiSwitch.vue'
 import ApiSelect from '@/components/form/api/ApiSelect.vue'
+import ApiColorField from '@/components/form/api/ApiColorField.vue'
 import ApiDatePicker from '@/components/form/api/ApiDatePicker.vue'
 import ApiTimePicker from '@/components/form/api/ApiTimePicker.vue'
 import ApiColorPicker from '@/components/form/api/ApiColorPicker.vue'
@@ -119,7 +121,9 @@ export default {
     ETimePicker,
     ApiTimePicker,
     EColorPicker,
+    EColorField,
     ApiColorPicker,
+    ApiColorField,
   },
   data: () => ({
     placeholder: 'Dummy placeholder',
@@ -197,7 +201,7 @@ export default {
           component: (type) => `${type}-select`,
           value: this.selectValue,
           props: {
-            fieldname: 'language',
+            path: 'language',
             placeholder: this.placeholder,
             items: this.availableLocales,
             uri: this.profileUri,
@@ -250,6 +254,18 @@ export default {
             placeholder: this.placeholder,
             path: 'color',
             uri: this.categoryUri,
+            veeRules: 'required',
+          },
+        },
+        {
+          id: 'color-field',
+          component: (type) => (type !== 'v' ? `${type}-color-field` : ''),
+          value: this.colorValue,
+          props: {
+            placeholder: this.placeholder,
+            path: 'color',
+            uri: this.categoryUri,
+            veeRules: 'required',
           },
         },
       ]
@@ -285,7 +301,7 @@ export default {
       return {
         hint: this.hint,
         'persistent-hint': this.persistentHint,
-        label: this.label ? this.labelText : null,
+        label: this.label ? this.labelText : undefined,
       }
     },
   },