diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx
index c17d8866fc02fa..26938f6bd2a0c6 100644
--- a/packages/components/src/color-picker/hex-input.tsx
+++ b/packages/components/src/color-picker/hex-input.tsx
@@ -49,6 +49,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			maxLength={ enableAlpha ? 8 : 6 }
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
+			size="__unstable-large"
 		/>
 	);
 };
diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx
index a38f600a8bf63b..036421b8e536cd 100644
--- a/packages/components/src/color-picker/input-with-slider.tsx
+++ b/packages/components/src/color-picker/input-with-slider.tsx
@@ -44,6 +44,7 @@ export const InputWithSlider = ( {
 					</Spacer>
 				}
 				hideHTMLArrows
+				size="__unstable-large"
 			/>
 			<RangeControl
 				label={ label }
diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts
index 4d80b8761d20b3..f701c83a6c8020 100644
--- a/packages/components/src/color-picker/styles.ts
+++ b/packages/components/src/color-picker/styles.ts
@@ -28,7 +28,7 @@ export const NumberControlWrapper = styled( NumberControl )`
 
 export const SelectControl = styled( InnerSelectControl )`
 	margin-left: ${ space( -2 ) };
-	width: 5em;
+	width: 6.5em;
 	${ BackdropUI } {
 		display: none;
 	}
@@ -42,14 +42,6 @@ export const RangeControl = styled( InnerRangeControl )`
 	}
 `;
 
-// All inputs should be the same height so this should be changed at the component level.
-// That involves changing heights of multiple input types probably buttons too etc.
-// So until that is done we are already using the new height on the color picker so it matches the mockups.
-const inputHeightStyle = `
-&&& ${ Input } {
-	height: 40px;
-}`;
-
 // Make the Hue circle picker not go out of the bar
 const interactiveHueStyles = `
 .react-colorful__interactive {
@@ -107,8 +99,6 @@ export const ColorfulWrapper = styled.div`
 	${ StyledField } {
 		margin-bottom: 0;
 	}
-
-	${ inputHeightStyle }
 `;
 
 export const DetailsControlButton = styled( Button )`
@@ -119,5 +109,5 @@ export const DetailsControlButton = styled( Button )`
 `;
 
 export const ColorHexInputControl = styled( InputControl )`
-	width: 8em;
+	width: 9em;
 `;