diff --git a/docs/src/demos/Extensions/Color/index.vue b/docs/src/demos/Extensions/Color/index.vue
index 3747d023..d02c97e9 100644
--- a/docs/src/demos/Extensions/Color/index.vue
+++ b/docs/src/demos/Extensions/Color/index.vue
@@ -1,5 +1,10 @@
 <template>
   <div v-if="editor">
+    <input
+      type="color"
+      @input="editor.chain().focus().setColor($event.target.value).run()"
+      :value="editor.getAttributes('textStyle').color"
+    >
     <button @click="editor.chain().focus().setColor('#958DF1').run()" :class="{ 'is-active': editor.isActive('textStyle', { color: '#958DF1' })}">
       purple
     </button>