diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index d446951c84..b0fc879f73 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -9,6 +9,7 @@
     padding: 0.2em 8px;
 
     input {
+      color: var(--text);
       background: none;
       border: none;
       padding: 0;
@@ -19,21 +20,38 @@
         min-width: 3em;
         padding: 0;
       }
+    }
 
-      &.nativeColor {
-        flex: 0 0 2em;
-        min-width: 2em;
-        align-self: stretch;
-        min-height: 100%;
+    .nativeColor {
+      cursor: pointer;
+      flex: 0 0 auto;
+
+      input {
+        appearance: none;
+        max-width: 0;
+        min-width: 0;
+        max-height: 0;
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0 !important;
       }
     }
 
     .computedIndicator,
+    .validIndicator,
+    .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
+      margin: 0 0.5em;
       min-width: 2em;
       align-self: stretch;
-      min-height: 100%;
+      min-height: 1.5em;
+      border-radius: var(--roundness);
+    }
+
+    .invalidIndicator {
+      background: transparent;
+      box-sizing: border-box;
+      border: 2px solid var(--cRed);
     }
 
     .transparentIndicator {
@@ -54,11 +72,13 @@
       &::after {
         top: 0;
         left: 0;
+        border-top-left-radius: var(--roundness);
       }
 
       &::before {
         bottom: 0;
         right: 0;
+        border-bottom-right-radius: var(--roundness);
       }
     }
   }
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index dfc084f96a..d83a77cddb 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -25,30 +25,51 @@
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
       >
-      <input
-        v-if="validColor"
-        :id="name"
-        class="nativeColor unstyled"
-        type="color"
-        :value="modelValue || fallback"
-        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
-      >
       <div
-        v-if="transparentColor"
+        v-if="validColor"
+        class="validIndicator"
+        :style="{backgroundColor: modelValue || fallback}"
+      />
+      <div
+        v-else-if="transparentColor"
         class="transparentIndicator"
       />
       <div
-        v-if="computedColor"
+        v-else-if="computedColor"
         class="computedIndicator"
         :style="{backgroundColor: fallback}"
       />
+      <div
+        v-else
+        class="invalidIndicator"
+      />
+      <label class="nativeColor">
+        <FAIcon icon="eye-dropper"/>
+        <input
+          :id="name"
+          class="unstyled"
+          type="color"
+          :value="modelValue || fallback"
+          :disabled="!present || disabled"
+          @input="$emit('update:modelValue', $event.target.value)"
+        >
+      </label>
     </div>
   </div>
 </template>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEyeDropper
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEyeDropper
+)
+
 export default {
   components: {
     Checkbox
@@ -108,12 +129,3 @@ export default {
 }
 </script>
 <style lang="scss" src="./color_input.scss"></style>
-
-<style lang="scss">
-.color-control {
-  input.text-input {
-    max-width: 7em;
-    flex: 1;
-  }
-}
-</style>