diff --git a/com.woltlab.wcf/templates/shared_colorFormField.tpl b/com.woltlab.wcf/templates/shared_colorFormField.tpl
index 94b941f6429..18db9a18fcf 100644
--- a/com.woltlab.wcf/templates/shared_colorFormField.tpl
+++ b/com.woltlab.wcf/templates/shared_colorFormField.tpl
@@ -3,9 +3,15 @@
 		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
 	</span>
 {else}
-	<a href="#" class="colorPickerButton jsTooltip" id="{$field->getPrefixedId()}_colorPickerButton" title="{lang}wcf.style.colorPicker.button.changeColor{/lang}" data-store="{$field->getPrefixedId()}">
+	<button
+		type="button"
+		class="colorPickerButton jsTooltip"
+		id="{$field->getPrefixedId()}_colorPickerButton"
+		title="{lang}wcf.style.colorPicker.button.changeColor{/lang}"
+		data-store="{$field->getPrefixedId()}"
+	>
 		<span{if $field->getValue()} style="background-color: {$field->getValue()}"{/if}></span>
-	</a>
+	</button>
 	<input type="hidden" {*
 		*}id="{$field->getPrefixedId()}" {*
 		*}name="{$field->getPrefixedId()}" {*
diff --git a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
index b350a9e1604..cdda445a7a2 100644
--- a/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
+++ b/ts/WoltLabSuite/Core/Ui/Color/Picker.ts
@@ -401,7 +401,7 @@ class UiColorPicker implements DialogCallbackObject {
     this.oldColor!.style.backgroundColor = colorString;
     this.input.value = colorString;
 
-    if (!(this.element instanceof HTMLButtonElement)) {
+    if (!(this.element instanceof HTMLButtonElement) || this.element.classList.contains("colorPickerButton")) {
       const span = this.element.querySelector("span");
       if (span) {
         span.style.backgroundColor = colorString;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
index 058b40eb938..7e4c8315c4d 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Color/Picker.js
@@ -321,7 +321,7 @@ define(["require", "exports", "tslib", "../../Core", "../Dialog", "../../Dom/Uti
             const colorString = ColorUtil.rgbaToString(color);
             this.oldColor.style.backgroundColor = colorString;
             this.input.value = colorString;
-            if (!(this.element instanceof HTMLButtonElement)) {
+            if (!(this.element instanceof HTMLButtonElement) || this.element.classList.contains("colorPickerButton")) {
                 const span = this.element.querySelector("span");
                 if (span) {
                     span.style.backgroundColor = colorString;
diff --git a/wcfsetup/install/files/style/ui/colorPicker.scss b/wcfsetup/install/files/style/ui/colorPicker.scss
index c490517c136..dbd992e385a 100644
--- a/wcfsetup/install/files/style/ui/colorPicker.scss
+++ b/wcfsetup/install/files/style/ui/colorPicker.scss
@@ -27,11 +27,12 @@
 }
 
 .colorPickerButton {
-	height: 32px;
+	border-radius: var(--wcfBorderRadius);
+	height: 50px;
 	width: 50px;
 
 	> span {
-		height: 32px;
+		height: 50px;
 	}
 }