diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx
index db24a5e60f137a..12ccfae4257cca 100644
--- a/packages/components/src/input-control/styles/input-control-styles.tsx
+++ b/packages/components/src/input-control/styles/input-control-styles.tsx
@@ -286,6 +286,16 @@ export const Input = styled.input< InputProps >`
 
 		&::-webkit-input-placeholder {
 			line-height: normal;
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: ${ COLORS.ui.darkGrayPlaceholder };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ COLORS.ui.darkGrayPlaceholder };
 		}
 
 		&[type='email'],
diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss
index 5ae2a90b827736..8099d9fd554a50 100644
--- a/packages/components/src/text-control/style.scss
+++ b/packages/components/src/text-control/style.scss
@@ -27,4 +27,18 @@
 		padding-left: $grid-unit-15;
 		padding-right: $grid-unit-15;
 	}
+
+	// Use opacity to work in various editor styles.
+	&::-webkit-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
+
+	&::-moz-placeholder {
+		opacity: 1; // Necessary because Firefox reduces this from 1.
+		color: $dark-gray-placeholder;
+	}
+
+	&:-ms-input-placeholder {
+		color: $dark-gray-placeholder;
+	}
 }