diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts b/packages/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts
new file mode 100644
index 000000000..65ac0d6df
--- /dev/null
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts
@@ -0,0 +1,59 @@
+import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
+import N8nColorPicker from './ColorPicker.vue';
+
+export default {
+ title: 'Atoms/ColorPicker',
+ component: N8nColorPicker,
+ argTypes: {
+ disabled: {
+ control: 'boolean',
+ },
+ size: {
+ control: 'select',
+ options: ['mini', 'small', 'medium', 'large'],
+ },
+ showAlpha: {
+ control: 'boolean',
+ },
+ colorFormat: {
+ control: 'select',
+ options: ['hsl', 'hsv', 'hex', 'rgb'],
+ },
+ popperClass: {
+ control: 'text',
+ },
+ predefine: {
+ control: 'array',
+ },
+ },
+};
+
+const methods = {
+ onChange: action('change'),
+ onActiveChange: action('active-change'),
+ onInput: action('input'),
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: {
+ N8nColorPicker,
+ },
+ data: () => ({
+ color: null,
+ }),
+ template:
+ '',
+ methods,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+ disabled: false,
+ size: 'medium',
+ showAlpha: false,
+ colorFormat: '',
+ popperClass: '',
+ showInput: true,
+};
diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
new file mode 100644
index 000000000..5a52c6d10
--- /dev/null
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/design-system/src/components/N8nColorPicker/__tests__/ColorPicker.spec.ts b/packages/design-system/src/components/N8nColorPicker/__tests__/ColorPicker.spec.ts
new file mode 100644
index 000000000..0367928bc
--- /dev/null
+++ b/packages/design-system/src/components/N8nColorPicker/__tests__/ColorPicker.spec.ts
@@ -0,0 +1,16 @@
+import { render } from '@testing-library/vue';
+import N8nColorPicker from '../ColorPicker.vue';
+
+describe('components', () => {
+ describe('N8nColorPicker', () => {
+ it('should render with input', () => {
+ const { container } = render(N8nColorPicker);
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render without input', () => {
+ const { container } = render(N8nColorPicker, { props: { showInput: false } });
+ expect(container).toMatchSnapshot();
+ });
+ });
+});
diff --git a/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap b/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
new file mode 100644
index 000000000..1e4756cfe
--- /dev/null
+++ b/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
@@ -0,0 +1,269 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nColorPicker > should render with input 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+