diff --git a/src/components/ha-textfield.ts b/src/components/ha-textfield.ts
index bf5cbd954f..8ca3561ac8 100644
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -149,6 +149,10 @@ export class HaTextField extends TextFieldBase {
         text-align: var(--text-field-text-align, start);
       }
 
+      input[type="color"] {
+        height: 20px;
+      }
+
       /* Edge, hide reveal password icon */
       ::-ms-reveal {
         display: none;
@@ -161,6 +165,10 @@ export class HaTextField extends TextFieldBase {
         margin: 0;
       }
 
+      input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
       /* Firefox */
       :host([no-spinner]) input[type="number"] {
         -moz-appearance: textfield;