diff --git a/packages/uui-color-area/lib/uui-color-area.element.ts b/packages/uui-color-area/lib/uui-color-area.element.ts
index ea96a80a0..e68273c03 100644
--- a/packages/uui-color-area/lib/uui-color-area.element.ts
+++ b/packages/uui-color-area/lib/uui-color-area.element.ts
@@ -19,6 +19,24 @@ import { UUIColorAreaEvent } from './UUIColorAreaEvent';
 export class UUIColorAreaElement extends LitElement {
   @state() private isDraggingGridHandle = false;
 
+  /**
+   * Sets the color area to disabled.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * Sets the color area to readonly mode.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
   /**
    * The current hue.
    * @attr
@@ -114,11 +132,9 @@ export class UUIColorAreaElement extends LitElement {
     }
   }
 
-  /** Disables the color area. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
   handleGridDrag(event: PointerEvent) {
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
+
     const grid = this.shadowRoot!.querySelector<HTMLElement>('.color-area')!;
     const handle = grid.querySelector<HTMLElement>('.color-area__handle')!;
     const { width, height } = grid.getBoundingClientRect();
@@ -272,6 +288,11 @@ export class UUIColorAreaElement extends LitElement {
         opacity: 0.55;
       }
 
+      :host([readonly]) {
+        pointer-events: none;
+        cursor: default;
+      }
+
       .color-area {
         position: relative;
         height: 100%;
diff --git a/packages/uui-color-area/lib/uui-color-area.story.ts b/packages/uui-color-area/lib/uui-color-area.story.ts
index 05b2fca26..72d4315e2 100644
--- a/packages/uui-color-area/lib/uui-color-area.story.ts
+++ b/packages/uui-color-area/lib/uui-color-area.story.ts
@@ -1,12 +1,23 @@
+import type { StoryFn, Meta, StoryObj } from '@storybook/web-components';
+import type { UUIColorAreaElement } from './uui-color-area.element';
 import '.';
 import readme from '../README.md?raw';
 import { html } from 'lit';
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { spread } from '../../../storyhelpers';
 
 const meta: Meta = {
   id: 'uui-color-area',
   component: 'uui-color-area',
+  args: {
+    hue: 0,
+    saturation: 0,
+    lightness: 0,
+    brightness: 0,
+    alpha: 100,
+    disabled: false,
+    readonly: false,
+    value: '',
+  },
   title: 'Inputs/Color/Color Area',
   argTypes: {
     value: { control: 'color' },
@@ -22,4 +33,49 @@ const meta: Meta = {
 export default meta;
 type Story = StoryObj;
 
+const Template: StoryFn<UUIColorAreaElement> = props => {
+  return html`<uui-color-area
+    .hue=${props.hue}
+    .saturation=${props.saturation}
+    .lightness=${props.lightness}
+    .brightness=${props.brightness}
+    .alpha=${props.alpha}
+    .value=${props.value}
+    .disabled=${props.disabled}
+    .readonly=${props.readonly}>
+  </uui-color-area>`;
+};
+
+export const AAAOverview = Template.bind({});
+AAAOverview.storyName = 'Overview';
+
+export const Disabled = Template.bind({});
+
+Disabled.args = {
+  disabled: true,
+};
+
+Disabled.parameters = {
+  controls: { include: ['disabled'] },
+  docs: {
+    source: {
+      code: `<uui-color-area disabled></uui-color-area>`,
+    },
+  },
+};
+
+export const Readonly = Template.bind({});
+
+Readonly.args = {
+  readonly: true,
+};
+
+Readonly.parameters = {
+  controls: { include: ['readonly'] },
+  docs: {
+    source: {
+      code: `<uui-color-area readonly></uui-color-area>`,
+    },
+  },
+};
 export const Default: Story = {};