diff --git a/packages/components/src/color-picker/stories/index.js b/packages/components/src/color-picker/stories/index.js
index 98bd612e631218..b3dfb21fb1c489 100644
--- a/packages/components/src/color-picker/stories/index.js
+++ b/packages/components/src/color-picker/stories/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, select } from '@storybook/addon-knobs';
-
 /**
  * WordPress dependencies
  */
@@ -12,70 +7,35 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { Flex } from '../../flex';
-import { Spacer } from '../../spacer';
-import { space } from '../../ui/utils/space';
 
 export default {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
-	parameters: {
-		knobs: { disable: false },
+	argTypes: {
+		color: { control: { type: null } },
+		copyFormat: {
+			control: { type: 'select' },
+			options: [ 'rgb', 'hsl', 'hex', undefined ],
+		},
+		// We can't use a `on*` regex because this component will switch to
+		// legacy mode when an onChangeComplete prop is passed.
+		onChange: { action: 'onChange' },
 	},
 };
 
-const PROP_UNSET = 'unset';
-
-const Example = () => {
-	const [ color, setColor ] = useState( undefined );
-	const props = {
-		enableAlpha: boolean( 'enableAlpha', false ),
-		copyFormat: select(
-			'copyFormat',
-			[ PROP_UNSET, 'rgb', 'hsl', 'hex' ],
-			PROP_UNSET
-		),
-	};
-
-	if ( props.copyFormat === PROP_UNSET ) {
-		delete props.copyFormat;
-	}
-
-	return (
-		<Flex
-			as={ Spacer }
-			gap={ space( 2 ) }
-			justify="space-around"
-			align="flex-start"
-			marginTop={ space( 10 ) }
-		>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-			<div style={ { width: 200, textAlign: 'center' } }>{ color }</div>
-			<ColorPicker { ...props } color={ color } onChange={ setColor } />
-		</Flex>
-	);
-};
-
-export const _default = () => {
-	return <Example />;
-};
-
-const LegacyExample = () => {
-	const [ legacyColor, setLegacyColor ] = useState( '#fff' );
-	const legacyProps = {
-		color: legacyColor,
-		onChangeComplete: setLegacyColor,
-		disableAlpha: boolean( 'disableAlpha', true ),
-	};
+const Template = ( { onChange, ...props } ) => {
+	const [ color, setColor ] = useState();
 
 	return (
-		<Flex align="flex-start" justify="flex-start">
-			<ColorPicker { ...legacyProps } />
-			<pre style={ { width: '20em' } }>
-				{ JSON.stringify( legacyColor, undefined, 4 ) }
-			</pre>
-		</Flex>
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChange={ ( ...changeArgs ) => {
+				onChange( ...changeArgs );
+				setColor( ...changeArgs );
+			} }
+		/>
 	);
 };
 
-export const legacy = () => <LegacyExample />;
+export const Default = Template.bind( {} );