diff --git a/src/components/color-picker/color-picker.scss b/src/components/color-picker/color-picker.scss
index 6469fe359..1fa697ac8 100644
--- a/src/components/color-picker/color-picker.scss
+++ b/src/components/color-picker/color-picker.scss
@@ -137,8 +137,8 @@
 .sl-color-picker__preview {
   flex: 0 0 auto;
   position: relative;
-  width: 2rem;
-  height: 2rem;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
   margin-left: var(--sl-spacing-medium);
 
@@ -165,7 +165,7 @@
   border: solid 1px rgba(0, 0, 0, 0.125);
 }
 
-.sl-color-picker__input {
+.sl-color-picker__user-input {
   padding: 0 var(--sl-spacing-small) var(--sl-spacing-small) var(--sl-spacing-small);
 }
 
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index c4ca2aaf6..f9594953f 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -455,17 +455,15 @@ export class ColorPicker {
             />
           </div>
 
-          <div class="sl-color-picker__inputs">
-            <div class="sl-color-picker__input">
-              <sl-input
-                ref={el => (this.input = el)}
-                size="small"
-                type="text"
-                pattern="[a-fA-F\d]+"
-                value={this.value}
-                onSlChange={this.handleUserChange}
-              />
-            </div>
+          <div class="sl-color-picker__user-input">
+            <sl-input
+              ref={el => (this.input = el)}
+              size="small"
+              type="text"
+              pattern="[a-fA-F\d]+"
+              value={this.value}
+              onSlChange={this.handleUserChange}
+            />
           </div>
 
           {this.swatches && (