diff --git a/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSlider.test.tsx b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSlider.test.tsx
new file mode 100644
index 00000000000000..eb9e7bbbbc6f73
--- /dev/null
+++ b/packages/react-components/react-color-picker/library/src/components/AlphaSlider/useAlphaSlider.test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useAlphaSlider_unstable } from './useAlphaSlider';
+import { ColorPickerProvider } from '../../contexts/colorPicker';
+
+describe('useAlphaSlider', () => {
+  it('uses the default shape', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useAlphaSlider_unstable({}, ref));
+
+    expect(result.current.shape).toBe('rounded');
+  });
+
+  it('uses the shape from context', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useAlphaSlider_unstable({}, ref), {
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <ColorPickerProvider value={{ color: undefined, shape: 'square', requestChange: jest.fn() }}>
+          {children}
+        </ColorPickerProvider>
+      ),
+    });
+
+    expect(result.current.shape).toBe('square');
+  });
+
+  it('prefers the shape prop over context', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useAlphaSlider_unstable({ shape: 'rounded' }, ref), {
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <ColorPickerProvider value={{ color: undefined, shape: 'square', requestChange: jest.fn() }}>
+          {children}
+        </ColorPickerProvider>
+      ),
+    });
+
+    expect(result.current.shape).toBe('rounded');
+  });
+
+  it('uses the shape prop', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useAlphaSlider_unstable({ shape: 'square' }, ref));
+
+    expect(result.current.shape).toBe('square');
+  });
+});
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorArea/useColorArea.test.tsx b/packages/react-components/react-color-picker/library/src/components/ColorArea/useColorArea.test.tsx
new file mode 100644
index 00000000000000..2fa02126c956ac
--- /dev/null
+++ b/packages/react-components/react-color-picker/library/src/components/ColorArea/useColorArea.test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { ColorPickerProvider } from '../../contexts/colorPicker';
+import { useColorArea_unstable } from './useColorArea';
+
+describe('useColorArea', () => {
+  it('uses the default shape', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useColorArea_unstable({}, ref));
+
+    expect(result.current.shape).toBe('rounded');
+  });
+
+  it('uses the shape from context', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useColorArea_unstable({}, ref), {
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <ColorPickerProvider value={{ color: undefined, shape: 'square', requestChange: jest.fn() }}>
+          {children}
+        </ColorPickerProvider>
+      ),
+    });
+
+    expect(result.current.shape).toBe('square');
+  });
+
+  it('prefers the shape prop over context', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useColorArea_unstable({ shape: 'rounded' }, ref), {
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <ColorPickerProvider value={{ color: undefined, shape: 'square', requestChange: jest.fn() }}>
+          {children}
+        </ColorPickerProvider>
+      ),
+    });
+
+    expect(result.current.shape).toBe('rounded');
+  });
+
+  it('uses the shape prop', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useColorArea_unstable({ shape: 'square' }, ref));
+
+    expect(result.current.shape).toBe('square');
+  });
+});
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPicker.test.tsx b/packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPicker.test.tsx
new file mode 100644
index 00000000000000..bb0432940f4bd9
--- /dev/null
+++ b/packages/react-components/react-color-picker/library/src/components/ColorPicker/useColorPicker.test.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { act, renderHook } from '@testing-library/react-hooks';
+import { useColorPicker_unstable } from './useColorPicker';
+
+describe('useColorPicker', () => {
+  it('returns state based on props', () => {
+    const color = { h: 120, s: 0.5, v: 0.75 };
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useColorPicker_unstable({ color, shape: 'square' }, ref));
+
+    expect(result.current.color).toBe(color);
+    expect(result.current.shape).toBe('square');
+  });
+
+  it('forwards requested color changes', () => {
+    const onColorChange = jest.fn();
+    const color = { h: 240, s: 0.25, v: 0.5 };
+    const event = {} as React.ChangeEvent<HTMLInputElement>;
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useColorPicker_unstable({ onColorChange }, ref));
+
+    act(() => result.current.requestChange(event, { color }));
+
+    expect(onColorChange).toHaveBeenCalledTimes(1);
+    expect(onColorChange).toHaveBeenCalledWith(event, {
+      type: 'change',
+      event,
+      color,
+    });
+  });
+});
diff --git a/packages/react-components/react-color-picker/library/src/components/ColorSlider/useColorSlider.test.tsx b/packages/react-components/react-color-picker/library/src/components/ColorSlider/useColorSlider.test.tsx
new file mode 100644
index 00000000000000..95f52ffc83e1a0
--- /dev/null
+++ b/packages/react-components/react-color-picker/library/src/components/ColorSlider/useColorSlider.test.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { ColorPickerProvider } from '../../contexts/colorPicker';
+import { useColorSlider_unstable } from './useColorSlider';
+
+describe('useColorSlider', () => {
+  it('uses the default shape', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useColorSlider_unstable({}, ref));
+
+    expect(result.current.shape).toBe('rounded');
+  });
+
+  it('uses the shape from context', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useColorSlider_unstable({}, ref), {
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <ColorPickerProvider value={{ color: undefined, shape: 'square', requestChange: jest.fn() }}>
+          {children}
+        </ColorPickerProvider>
+      ),
+    });
+
+    expect(result.current.shape).toBe('square');
+  });
+
+  it('prefers the shape prop over context', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useColorSlider_unstable({ shape: 'rounded' }, ref), {
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <ColorPickerProvider value={{ color: undefined, shape: 'square', requestChange: jest.fn() }}>
+          {children}
+        </ColorPickerProvider>
+      ),
+    });
+
+    expect(result.current.shape).toBe('rounded');
+  });
+
+  it('uses the shape prop', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { result } = renderHook(() => useColorSlider_unstable({ shape: 'square' }, ref));
+
+    expect(result.current.shape).toBe('square');
+  });
+});