diff --git a/packages/components/src/color-palette/stories/index.js b/packages/components/src/color-palette/stories/index.js
new file mode 100644
index 00000000000000..3cc1f4f8ff66df
--- /dev/null
+++ b/packages/components/src/color-palette/stories/index.js
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { object } from '@storybook/addon-knobs';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '../';
+
+export default { title: 'ColorPalette', component: ColorPalette };
+
+const ColorPaletteWithState = ( props ) => {
+	const [ color, setColor ] = useState( '#F00' );
+	return (
+		<ColorPalette
+			{ ...props }
+			value={ color }
+			onChange={ setColor }
+		/>
+	);
+};
+
+export const _default = () => {
+	const colors = [
+		{ name: 'red', color: '#f00' },
+		{ name: 'white', color: '#fff' },
+		{ name: 'blue', color: '#00f' },
+	];
+
+	return (
+		<ColorPaletteWithState
+			colors={ colors }
+		/>
+	);
+};
+
+export const withKnobs = () => {
+	const colors = [
+		object( 'Red', { name: 'red', color: '#f00' } ),
+		object( 'White', { name: 'white', color: '#fff' } ),
+		object( 'Blue', { name: 'blue', color: '#00f' } ),
+	];
+
+	return (
+		<ColorPaletteWithState
+			colors={ colors }
+		/>
+	);
+};
+