diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
index 0cc43376442..63dfa16ba9b 100644
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@@ -25,7 +25,7 @@
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: rgb(var(--color-text-400));
+  color: var(--color-placeholder);
   pointer-events: none;
   height: 0;
 }
@@ -34,7 +34,7 @@
 .ProseMirror p.is-empty::before {
   content: attr(data-placeholder);
   float: left;
-  color: rgb(var(--color-text-400));
+  color: var(--color-placeholder);
   pointer-events: none;
   height: 0;
 }
@@ -192,7 +192,7 @@ ul[data-type="taskList"] li > div {
 
 ul[data-type="taskList"] li[data-checked="true"] {
   & > div > p.editor-paragraph-block {
-    color: rgb(var(--color-text-400));
+    color: var(--color-placeholder);
   }
 
   [data-text-color] {
diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css
index eace3cfc2fc..66880f1560f 100644
--- a/packages/editor/src/styles/variables.css
+++ b/packages/editor/src/styles/variables.css
@@ -1,4 +1,6 @@
 .editor-container {
+  --color-placeholder: rgba(var(--color-text-100), 0.5);
+
   /* font sizes and line heights */
   &.large-font {
     --font-size-h1: 1.75rem;