diff --git a/ts/editor/editor-toolbar/ColorPicker.svelte b/ts/editor/editor-toolbar/ColorPicker.svelte
index 0a70390b6..652219197 100644
--- a/ts/editor/editor-toolbar/ColorPicker.svelte
+++ b/ts/editor/editor-toolbar/ColorPicker.svelte
@@ -6,11 +6,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Shortcut from "../../components/Shortcut.svelte";
 
     export let keyCombination: string | null = null;
+    export let value: string;
 
     let inputRef: HTMLInputElement;
 </script>
 
-<input bind:this={inputRef} tabindex="-1" type="color" on:input on:change />
+<input bind:this={inputRef} tabindex="-1" type="color" bind:value on:input on:change />
 
 {#if keyCombination}
     <Shortcut {keyCombination} on:action={() => inputRef.click()} />
diff --git a/ts/editor/editor-toolbar/HighlightColorButton.svelte b/ts/editor/editor-toolbar/HighlightColorButton.svelte
index 62dec37df..1903085c5 100644
--- a/ts/editor/editor-toolbar/HighlightColorButton.svelte
+++ b/ts/editor/editor-toolbar/HighlightColorButton.svelte
@@ -127,6 +127,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     >
         {@html chevronDown}
         <ColorPicker
+            value={color}
             on:input={(event) => {
                 color = setColor(event);
                 bridgeCommand(`lastHighlightColor:${color}`);
diff --git a/ts/editor/editor-toolbar/TextColorButton.svelte b/ts/editor/editor-toolbar/TextColorButton.svelte
index 0d8b7aeeb..5230d0c55 100644
--- a/ts/editor/editor-toolbar/TextColorButton.svelte
+++ b/ts/editor/editor-toolbar/TextColorButton.svelte
@@ -146,6 +146,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         {@html chevronDown}
         <ColorPicker
             keyCombination={pickCombination}
+            value={color}
             on:input={(event) => {
                 color = setColor(event);
                 bridgeCommand(`lastTextColor:${color}`);