diff --git a/package-lock.json b/package-lock.json
index 7e18960f58..2c5fa57a87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42143,7 +42143,7 @@
     },
     "packages/icons": {
       "name": "@sumup/icons",
-      "version": "4.1.0",
+      "version": "4.1.2",
       "license": "Apache-2.0",
       "devDependencies": {
         "@babel/core": "^7.25.2",
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.module.css b/packages/circuit-ui/components/ColorInput/ColorInput.module.css
index 4803a1b778..da96e7a513 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.module.css
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.module.css
@@ -26,6 +26,12 @@
   box-shadow: 0 0 0 2px var(--cui-border-focus);
 }
 
+.picker[data-disabled="true"] {
+  color: var(--cui-fg-normal-disabled);
+  background-color: var(--cui-bg-normal-disabled);
+  box-shadow: 0 0 0 1px var(--cui-border-normal-disabled);
+}
+
 .color-input {
   width: var(--cui-spacings-giga);
   height: var(--cui-spacings-giga);
@@ -80,4 +86,4 @@
 
 .input::placeholder {
   font-family: var(--cui-font-stack-mono);
-}
+}
\ No newline at end of file
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
index 7674d4850f..4466650400 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
@@ -165,7 +165,7 @@ describe('ColorInput', () => {
       ) as HTMLInputElement;
 
       await userEvent.click(colorInput);
-      await userEvent.paste('oviously invalid');
+      await userEvent.paste('obviously invalid');
 
       const colorPicker = container.querySelector(
         "input[type='color']",
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
index 8d0b2f576c..48ecb122c2 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
@@ -106,12 +106,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
     const hasSuffix = Boolean(suffix);
 
     const handlePaste: ClipboardEventHandler<InputElement> = (e) => {
-      if (
-        !colorPickerRef.current ||
-        !colorInputRef.current ||
-        disabled ||
-        readOnly
-      ) {
+      if (!colorPickerRef.current || !colorInputRef.current || readOnly) {
         return;
       }
 
@@ -165,7 +160,11 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
           />
         </FieldLegend>
         <div className={classes.wrapper}>
-          <label htmlFor={pickerId} className={classes.picker}>
+          <label
+            htmlFor={pickerId}
+            className={classes.picker}
+            data-disabled={disabled}
+          >
             <input
               id={pickerId}
               ref={applyMultipleRefs(colorPickerRef, ref)}