diff --git a/components/Checkbox/src/index.svelte b/components/Checkbox/src/index.svelte
index 72e5de9b..baeeacad 100644
--- a/components/Checkbox/src/index.svelte
+++ b/components/Checkbox/src/index.svelte
@@ -18,6 +18,10 @@
 	export let indeterminate: KCheckboxProps['indeterminate'] = false;
 	export let cls: KCheckboxProps['cls'] = undefined;
 	export let attrs: KCheckboxProps['attrs'] = {};
+	/**
+	 * @internal
+	 */
+	export let canCancel: KCheckboxProps['canCancel'] = false;
 	// updateValue
 	const dispatch = createEventDispatcher();
 
@@ -43,6 +47,9 @@
 	 */
 	const handleUpdateValue = () => {
 		if (isDisabled) return;
+		if (canCancel && valueInner) {
+			return;
+		}
 		doUpdatedValue(!valueInner, true);
 		isIndeterminate = false;
 		// Being in a checkbox group does not trigger it
diff --git a/components/Checkbox/src/types.d.ts b/components/Checkbox/src/types.d.ts
index 782610e8..bf341f51 100644
--- a/components/Checkbox/src/types.d.ts
+++ b/components/Checkbox/src/types.d.ts
@@ -8,6 +8,7 @@ export type KCheckboxProps = {
 	bgUnCheckColor: string;
 	label: string;
 	value: boolean;
+	canCancel: boolean;
 	uid: string | number;
 	size: IKunSize;
 	disabled: boolean;
diff --git a/components/CheckboxGroup/src/index.svelte b/components/CheckboxGroup/src/index.svelte
index e17b790c..81c09226 100644
--- a/components/CheckboxGroup/src/index.svelte
+++ b/components/CheckboxGroup/src/index.svelte
@@ -35,7 +35,7 @@
 	}
 	onMount(() => {
 		// Register event, KForm can set KInput value
-		if (formContext && formInstance) {
+		if (formContext && formInstance && field) {
 			formUpdateField(true);
 			formPropsChangeCb(formInstance.__dynamicProps);
 			formInstance.__itemCompMap[field] = {
diff --git a/components/ColorPicker/__test__/color-picker.spec.ts b/components/ColorPicker/__test__/color-picker.spec.ts
new file mode 100644
index 00000000..72baecd3
--- /dev/null
+++ b/components/ColorPicker/__test__/color-picker.spec.ts
@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import KColorPicker from '../src';
+
+let host;
+
+const initHost = () => {
+	host = globalThis.document.createElement('div');
+	host.setAttribute('id', 'host');
+	globalThis.document.body.appendChild(host);
+};
+beforeEach(() => {
+	initHost();
+	vi.useFakeTimers();
+});
+afterEach(() => {
+	host.remove();
+	vi.useRealTimers();
+});
+
+describe('Test: KColorPicker', () => {
+	test('props: cls', async () => {
+		const instance = new KColorPicker({
+			target: host,
+			props: {
+				cls: 'k-color-picker--test'
+			}
+		});
+		expect(instance).toBeTruthy();
+		expect(host!.innerHTML.includes('k-color-picker--test')).toBeTruthy();
+		expect(host.innerHTML).matchSnapshot();
+	});
+});
diff --git a/components/ColorPicker/package.json b/components/ColorPicker/package.json
new file mode 100644
index 00000000..b1acf5c9
--- /dev/null
+++ b/components/ColorPicker/package.json
@@ -0,0 +1,56 @@
+{
+	"name": "@ikun-ui/color-picker",
+	"version": "0.2.1",
+	"type": "module",
+	"main": "src/index.ts",
+	"types": "src/index.d.ts",
+	"svelte": "src/index.ts",
+	"keywords": [
+		"svelte",
+		"svelte3",
+		"web component",
+		"component",
+		"react",
+		"vue",
+		"svelte-kit",
+		"dx"
+	],
+	"files": [
+		"dist",
+		"package.json"
+	],
+	"scripts": {
+		"build": "svelte-package -i src",
+		"publish:pre": "node ../../scripts/pre-publish.js",
+		"publish:npm": "pnpm run publish:pre && pnpm publish --no-git-checks --access public"
+	},
+	"publishConfig": {
+		"access": "public",
+		"main": "dist/index.js",
+		"module": "dist/index.js",
+		"svelte": "dist/index.js",
+		"types": "dist/index.d.ts"
+	},
+	"dependencies": {
+		"@ikun-ui/icon": "workspace:*",
+		"@ikun-ui/popover": "workspace:*",
+		"@ikun-ui/input": "workspace:*",
+		"@ikun-ui/input-number": "workspace:*",
+		"@ikun-ui/dropdown": "workspace:*",
+		"@ikun-ui/checkbox": "workspace:*",
+		"@ikun-ui/checkbox-group": "workspace:*",
+		"@ikun-ui/utils": "workspace:*",
+		"esm-env": "^1.0.0",
+		"tinycolor2": "^1.6.0",
+		"baiwusanyu-utils": "^1.0.18",
+		"clsx": "^2.0.0",
+		"svelte": "^4.2.7"
+	},
+	"devDependencies": {
+		"@sveltejs/package": "^2.2.5",
+		"@tsconfig/svelte": "^5.0.2",
+		"@types/tinycolor2": "^1.4.6",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3"
+	}
+}
diff --git a/components/ColorPicker/src/block.svelte b/components/ColorPicker/src/block.svelte
new file mode 100644
index 00000000..0c678dcc
--- /dev/null
+++ b/components/ColorPicker/src/block.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { KColorPickerBlockProps } from './types';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import tinycolor from 'tinycolor2';
+	export let focus: KColorPickerBlockProps['focus'] = false;
+	export let trigger: KColorPickerBlockProps['trigger'] = false;
+	export let disabled: KColorPickerBlockProps['disabled'] = false;
+	export let isClear: KColorPickerBlockProps['isClear'] = false;
+	export let size: KColorPickerBlockProps['size'] = 'md';
+	export let value: KColorPickerBlockProps['value'] = '';
+	export let cls: KColorPickerBlockProps['cls'] = '';
+	export let attrs: KColorPickerBlockProps['attrs'] = {};
+
+	const prefixCls = getPrefixCls('color-picker-block');
+	const contentCls = `${prefixCls}-content`;
+
+	$: cnames = clsx(prefixCls, cls);
+	$: blockBg = tinycolor(value).toRgbString();
+
+	$: contentSizeCls = clsx({
+		[`${prefixCls}-content--${size}`]: trigger,
+		[`${prefixCls}-content--clear`]: isClear
+	});
+	$: wrapperCls = clsx(`${prefixCls}-w`, {
+		[`${prefixCls}-w--disabled`]: disabled,
+		[`${prefixCls}-w--${size}`]: trigger,
+		[`${prefixCls}-w--focus`]: focus
+	});
+	$: cnamesSize = clsx(
+		{
+			[`${prefixCls}`]: !isClear,
+			[`${prefixCls}-clear`]: isClear,
+			[`${prefixCls}--${size}`]: trigger
+		},
+		{
+			[`${prefixCls}--${size}`]: trigger
+		},
+		cls
+	);
+</script>
+
+{#if trigger}
+	<div class={wrapperCls}>
+		<div class={cnamesSize} {...$$restProps} {...attrs}>
+			<div class={contentSizeCls} style:background-color={blockBg}></div>
+		</div>
+		<slot name="text" />
+	</div>
+{:else}
+	<div class={cnames} {...$$restProps} {...attrs}>
+		<div class={contentCls} style:background-color={blockBg}></div>
+	</div>
+{/if}
diff --git a/components/ColorPicker/src/format.svelte b/components/ColorPicker/src/format.svelte
new file mode 100644
index 00000000..162f943d
--- /dev/null
+++ b/components/ColorPicker/src/format.svelte
@@ -0,0 +1,195 @@
+<script lang="ts">
+	import type { KColorPickerFormatProps } from './types';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { KDropdown, KDropdownItem } from '@ikun-ui/dropdown';
+	import { KIcon } from '@ikun-ui/icon';
+	import { clsx } from 'clsx';
+	import tinycolor from 'tinycolor2';
+	import { createEventDispatcher } from 'svelte';
+	import { KInput } from '@ikun-ui/input';
+	import { KInputNumber } from '@ikun-ui/input-number';
+	import { isString } from 'baiwusanyu-utils';
+	export let format: KColorPickerFormatProps['format'] = 'rgb';
+	export let disabledAlpha: KColorPickerFormatProps['disabledAlpha'] = false;
+	export let value: KColorPickerFormatProps['value'] = '';
+	export let cls: KColorPickerFormatProps['cls'] = '';
+	export let attrs: KColorPickerFormatProps['attrs'] = {};
+
+	let hRValue = 0;
+	let sGValue = 0;
+	let vBValue = 0;
+	let hRMaxValue = 255;
+	let sGMaxValue = 255;
+	let vBMaxValue = 255;
+	let alphaValue = 0;
+	let valueHex = '';
+	function init(
+		formatValue: KColorPickerFormatProps['format'],
+		value: KColorPickerFormatProps['value']
+	) {
+		if (formatValue === 'rgb') {
+			const rgbValue = tinycolor(value).toRgb();
+			hRMaxValue = 255;
+			sGMaxValue = 255;
+			vBMaxValue = 255;
+			hRValue = rgbValue.r;
+			sGValue = rgbValue.g;
+			vBValue = rgbValue.b;
+			alphaValue = rgbValue.a * 100;
+		}
+
+		if (formatValue === 'hsv') {
+			const rgbValue = tinycolor(value).toHsv();
+			hRMaxValue = 360;
+			sGMaxValue = 100;
+			vBMaxValue = 100;
+			hRValue = rgbValue.h;
+			sGValue = rgbValue.s * 100;
+			vBValue = rgbValue.v * 100;
+			alphaValue = rgbValue.a * 100;
+		}
+
+		if (formatValue === 'hex') {
+			const rgbValue = tinycolor(value).toRgb();
+			if (!isString(value) || (isString(value) && rgbValue.a !== 1)) {
+				alphaValue = rgbValue.a * 100;
+				valueHex = tinycolor({ ...rgbValue, a: 1 })
+					.toHex()
+					.replace('#', '')
+					.toLocaleUpperCase();
+			} else {
+				valueHex = (value as string).replace('#', '').toLocaleUpperCase();
+			}
+		}
+	}
+	$: {
+		init(formatValue, value);
+	}
+
+	$: formatValue = format;
+	$: curFormat = formatValue!.toLocaleUpperCase();
+	function onSelectFormat(e: CustomEvent) {
+		formatValue = e.detail;
+		dispatch('formatChange', formatValue);
+	}
+
+	const dispatch = createEventDispatcher();
+	function handleInput(e: CustomEvent, type: 'hr' | 'sg' | 'vb' | 'a' | 'hex') {
+		if (e.detail === null) return;
+		if (type === 'hr') {
+			hRValue = e.detail;
+		}
+		if (type === 'sg') {
+			sGValue = e.detail;
+		}
+		if (type === 'vb') {
+			vBValue = e.detail;
+		}
+		if (type === 'a') {
+			alphaValue = e.detail;
+		}
+		const alpha = alphaValue / 100;
+		if (formatValue === 'rgb') {
+			dispatch('change', {
+				value: tinycolor({
+					r: hRValue,
+					g: sGValue,
+					b: vBValue,
+					a: alpha
+				}).toHsv(),
+				format: formatValue
+			});
+		}
+
+		if (formatValue === 'hsv') {
+			dispatch('change', {
+				value: {
+					h: hRValue,
+					s: sGValue,
+					v: vBValue,
+					a: alpha
+				},
+				format: formatValue
+			});
+		}
+
+		if (formatValue === 'hex') {
+			const hsv = tinycolor(`#${valueHex}`).toHsv();
+			hsv.a = alpha;
+			dispatch('change', {
+				value: hsv,
+				format: formatValue
+			});
+		}
+	}
+
+	const prefixCls = getPrefixCls('color-picker-format');
+	const valueCls = `${prefixCls}--val`;
+	const inputNumCls = `${prefixCls}--input-num`;
+	const inputCls = `${prefixCls}--input`;
+	$: cnames = clsx(prefixCls, cls);
+</script>
+
+<div class={cnames} {...$$restProps} {...attrs}>
+	<KDropdown on:command={onSelectFormat} trigger="click">
+		<div class={valueCls}>
+			{curFormat}
+			<KIcon icon="i-carbon-chevron-down" width="auto" height="auto" cls="op50"></KIcon>
+		</div>
+		<div slot="dropdown">
+			<KDropdownItem command="rgb">RGB</KDropdownItem>
+			<KDropdownItem command="hex">HEX</KDropdownItem>
+			<KDropdownItem command="hsv">HSV</KDropdownItem>
+		</div>
+	</KDropdown>
+	{#if formatValue !== 'hex'}
+		<KInputNumber
+			value={hRValue}
+			min={0}
+			step={1}
+			stepStrictly
+			max={hRMaxValue}
+			on:input={(e) => handleInput(e, 'hr')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+		<KInputNumber
+			value={sGValue}
+			min={0}
+			step={1}
+			max={sGMaxValue}
+			stepStrictly
+			on:input={(e) => handleInput(e, 'sg')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+
+		<KInputNumber
+			value={vBValue}
+			min={0}
+			step={1}
+			max={vBMaxValue}
+			stepStrictly
+			on:input={(e) => handleInput(e, 'vb')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+	{/if}
+	{#if formatValue === 'hex'}
+		<KInput value={valueHex} cls={inputCls} on:input={(e) => handleInput(e, 'hex')} size="sm">
+			<span slot="prefix">#</span>
+		</KInput>
+	{/if}
+	{#if !disabledAlpha}
+		<KInputNumber
+			value={alphaValue}
+			min={1}
+			max={100}
+			step={1}
+			stepStrictly
+			on:input={(e) => handleInput(e, 'a')}
+			cls={inputNumCls}
+			size="sm"
+		></KInputNumber>
+	{/if}
+</div>
diff --git a/components/ColorPicker/src/index.svelte b/components/ColorPicker/src/index.svelte
new file mode 100644
index 00000000..a5d223b1
--- /dev/null
+++ b/components/ColorPicker/src/index.svelte
@@ -0,0 +1,245 @@
+<script lang="ts">
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import type { HsvaColor, KColorPickerProps } from './types';
+	import { KPopover } from '@ikun-ui/popover';
+	import tinycolor from 'tinycolor2';
+	import KColorPickerPalette from './palette.svelte';
+	import KColorPickerSlider from './slider.svelte';
+	import KColorPickerBlock from './block.svelte';
+	import KColorPickerFormat from './format.svelte';
+	import KColorPickerPreset from './preset.svelte';
+	import { createEventDispatcher } from 'svelte';
+	export let allowClear: KColorPickerProps['allowClear'] = false;
+	export let title: KColorPickerProps['title'] = '';
+	export let value: KColorPickerProps['value'] = '';
+	export let defaultValue: KColorPickerProps['defaultValue'] = '';
+	export let format: KColorPickerProps['format'] = 'rgb';
+	export let disabled: KColorPickerProps['disabled'] = false;
+	export let disabledAlpha: KColorPickerProps['disabledAlpha'] = false;
+	export let placement: KColorPickerProps['placement'] = 'top';
+	export let presets: KColorPickerProps['presets'] = [];
+	export let size: KColorPickerProps['size'] = 'md';
+	export let showText: KColorPickerProps['showText'] = false;
+	export let trigger: KColorPickerProps['trigger'] = 'click';
+	export let cls: KColorPickerProps['cls'] = '';
+	export let attrs: KColorPickerProps['attrs'] = {};
+
+	function formatColor(format: KColorPickerProps['format'], value: KColorPickerProps['value']) {
+		if (format === 'rgb') {
+			return tinycolor(value).toRgbString();
+		}
+		if (format === 'hsv') {
+			return tinycolor(value).toHsvString();
+		}
+		return tinycolor(value).toHex8String();
+	}
+
+	const dispatch = createEventDispatcher();
+	function handleChangeComplete(e: CustomEvent) {
+		isDragging = false;
+		const res = { ...e.detail, a: aColor.a };
+		aColor = res;
+		blockColor = res;
+		formatterColor = res;
+		isClear = false;
+		dispatch('changeComplete', formatColor(formatValue, blockColor));
+	}
+
+	let isDragging = false;
+	function handleChange(e: CustomEvent) {
+		isDragging = true;
+		const res = { ...e.detail, a: aColor.a };
+		aColor = res;
+		blockColor = res;
+		formatterColor = res;
+		isClear = false;
+		dispatch('change', formatColor(formatValue, blockColor));
+	}
+
+	function handleHValueInput(e: CustomEvent) {
+		// console.log(aColor)
+		const res = { ...e.detail, a: aColor.a };
+		aColor = { ...aColor, h: res.h, a: res.a };
+		// console.log(aColor)
+		blockColor = { ...blockColor, h: res.h, a: res.a };
+		formatterColor = { ...formatterColor, h: res.h, a: res.a };
+		defaultPaletteColor = { ...defaultPaletteColor, h: res.h, a: res.a };
+		isClear = false;
+
+		const resolveColor = formatColor(formatValue, blockColor);
+		dispatch('change', resolveColor);
+		dispatch('changeComplete', resolveColor);
+	}
+
+	function handleAValueInput(e: CustomEvent) {
+		aColor.a = e.detail.a;
+		blockColor = e.detail;
+		formatterColor = e.detail;
+		isClear = false;
+		dispatch('changeComplete', formatColor(formatValue, blockColor));
+	}
+
+	let focus = false;
+	function onDisplayChange(e: CustomEvent) {
+		focus = e.detail;
+		dispatch('openChange', focus);
+	}
+
+	let isClear = false;
+	function handleClear() {
+		aColor.a = 0;
+		blockColor = aColor;
+		formatterColor = aColor;
+		isClear = true;
+		dispatch('clear');
+		dispatch('change', null);
+	}
+
+	let paletteRef: any = null;
+	$: formatValue = format;
+	function handleFormatInput(e: CustomEvent) {
+		const hsv = tinycolor(e.detail.value).toHsv() as HsvaColor;
+		formatValue = e.detail.format;
+
+		blockColor = hsv;
+		paletteColor = hsv;
+		aColor = hsv;
+		hColor = hsv;
+		defaultPaletteColor = { ...hColor, s: 1, v: 1, a: 1 };
+		formatterColor = hsv;
+		if (paletteRef) {
+			paletteRef.setPickerPos(paletteColor);
+		}
+		dispatch('change', formatColor(formatValue, blockColor));
+	}
+
+	function handleFormatChange(e: CustomEvent) {
+		formatValue = e.detail;
+		dispatch('formatChange', formatValue);
+	}
+
+	function handlePresetChange(e: CustomEvent) {
+		const v = tinycolor(e.detail[0]).toHsv() as HsvaColor;
+		const res = { ...v, a: aColor.a };
+		defaultPaletteColor = { ...defaultPaletteColor, h: res.h, a: res.a };
+		blockColor = { ...res, a: res.a };
+		formatterColor = { ...res, a: res.a };
+		paletteColor = { ...res, a: res.a };
+		presetColor = res;
+		if (paletteRef) {
+			paletteRef.setPickerPos(paletteColor);
+		}
+		isClear = false;
+		const resolveColor = formatColor(formatValue, blockColor);
+		dispatch('change', resolveColor);
+		dispatch('changeComplete', resolveColor);
+	}
+
+	let hsvValue: HsvaColor = { h: 0, s: 0, v: 0, a: 1 };
+	$: {
+		if (!isDragging) {
+			hsvValue = tinycolor(value).toHsv() as HsvaColor;
+		}
+	}
+
+	let hsvDefaultValue: HsvaColor = { h: 0, s: 0, v: 0, a: 1 };
+	$: {
+		hsvDefaultValue = tinycolor(defaultValue).toHsv();
+	}
+	$: paletteColor = hsvValue;
+	$: defaultPaletteColor = hsvDefaultValue;
+	$: hColor = hsvValue;
+	$: aColor = hsvValue;
+	$: blockColor = hsvValue;
+	$: formatterColor = hsvValue;
+	$: presetColor = hsvValue;
+
+	const prefixCls = getPrefixCls('color-picker');
+	const hsbCls = getPrefixCls('color-picker--hsb');
+	const hsCls = getPrefixCls('color-picker--hs');
+	const headerCls = getPrefixCls('color-picker-header');
+	const clearCls = getPrefixCls('color-picker-clear');
+	const lineCls = getPrefixCls('color-picker-line');
+	$: triggerCls = clsx({
+		[`${prefixCls}-trigger--disabled`]: disabled
+	});
+
+	$: txtCls = clsx({
+		[`${prefixCls}-txt`]: showText
+	});
+	$: titleCls = clsx({
+		[`${prefixCls}-title`]: title
+	});
+	const clearClsx = clsx(clearCls, lineCls);
+	const alphaCls = getPrefixCls('color-picker--alpha');
+	$: cnames = clsx(prefixCls, cls);
+</script>
+
+<KPopover {placement} {disabled} {trigger} on:change={onDisplayChange} arrow={false}>
+	<div slot="triggerEl" class={triggerCls}>
+		{#if $$slots.default}
+			<slot {blockColor} />
+		{:else}
+			<KColorPickerBlock {disabled} value={blockColor} trigger {size} {focus} {isClear}>
+				<div slot="text" class={txtCls} style:display={showText ? 'initial' : 'none'}>
+					{#if showText}
+						<slot name="text">
+							{formatColor(formatValue, blockColor)}
+						</slot>
+					{/if}
+				</div>
+			</KColorPickerBlock>
+		{/if}
+	</div>
+	<div slot="contentEl" class={cnames} {...$$restProps} {...attrs}>
+		<div class={headerCls}>
+			<slot name="title">
+				<span class={titleCls}>{title}</span>
+			</slot>
+			{#if allowClear}
+				<div class={clearClsx} aria-hidden="true" on:click={handleClear}></div>
+			{/if}
+		</div>
+		<div>
+			<KColorPickerPalette
+				bind:this={paletteRef}
+				value={paletteColor}
+				defaultValue={defaultPaletteColor}
+				on:change={handleChange}
+				on:changeComplete={handleChangeComplete}
+			></KColorPickerPalette>
+			<div class={hsbCls}>
+				<div class={hsCls}>
+					<KColorPickerSlider max={360} min={0} step={1} on:input={handleHValueInput} value={hColor}
+					></KColorPickerSlider>
+					{#if !disabledAlpha}
+						<KColorPickerSlider
+							isAlpha
+							on:input={handleAValueInput}
+							cls={alphaCls}
+							max={1}
+							min={0}
+							step={0.01}
+							value={aColor}
+						></KColorPickerSlider>
+					{/if}
+				</div>
+				<KColorPickerBlock value={blockColor} />
+			</div>
+			<KColorPickerFormat
+				value={formatterColor}
+				{disabledAlpha}
+				on:change={handleFormatInput}
+				on:formatChange={handleFormatChange}
+				format={formatValue}
+			></KColorPickerFormat>
+			<slot name="preset" {presetColor} {handlePresetChange}>
+				{#if presets && presets.length}
+					<KColorPickerPreset value={presetColor} on:change={handlePresetChange} {presets}
+					></KColorPickerPreset>
+				{/if}
+			</slot>
+		</div>
+	</div>
+</KPopover>
diff --git a/components/ColorPicker/src/index.ts b/components/ColorPicker/src/index.ts
new file mode 100644
index 00000000..4f4cd64e
--- /dev/null
+++ b/components/ColorPicker/src/index.ts
@@ -0,0 +1,23 @@
+/// <reference types="./types" />
+import ColorPicker from './index.svelte';
+import ColorPickerPalette from './palette.svelte';
+import ColorPickerSlider from './slider.svelte';
+import ColorPickerBlock from './block.svelte';
+import ColorPickerFormat from './format.svelte';
+import ColorPickerPreset from './preset.svelte';
+export { ColorPicker as KColorPicker };
+export { ColorPickerPalette as KColorPickerPalette };
+export { ColorPickerSlider as KColorPickerSlider };
+export { ColorPickerBlock as KColorPickerBlock };
+export { ColorPickerFormat as KColorPickerFormat };
+export { ColorPickerPreset as KColorPickerPreset };
+export default ColorPicker;
+
+export type {
+	KColorPickerProps,
+	KColorPickerPaletteProps,
+	KColorPickerSliderProps,
+	KColorPickerBlockProps,
+	KColorPickerFormatProps,
+	KColorPickerPresetProps
+} from './types';
diff --git a/components/ColorPicker/src/palette.svelte b/components/ColorPicker/src/palette.svelte
new file mode 100644
index 00000000..e7e5be8a
--- /dev/null
+++ b/components/ColorPicker/src/palette.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import tinycolor from 'tinycolor2';
+	import type { KColorPickerPaletteProps, HsvaColor } from './types.js';
+	import { extend } from 'baiwusanyu-utils';
+	export let cls: KColorPickerPaletteProps['cls'] = '';
+	export let attrs: KColorPickerPaletteProps['attrs'] = {};
+	export let value: KColorPickerPaletteProps['value'] = { h: 0, s: 1, v: 1, a: 1 };
+	export let defaultValue: KColorPickerPaletteProps['defaultValue'] = {
+		h: 0,
+		s: 1,
+		v: 1,
+		a: 1
+	};
+	$: hsvColor = value as HsvaColor;
+	let isDragging = false;
+	let startX = 0;
+	let startY = 0;
+	let offsetX = 0;
+	let offsetY = 0;
+	let dragElement: null | HTMLElement = null;
+	let containerElement: null | HTMLElement = null;
+	let containerBounds = { x: 0, y: 0, width: 0, height: 0 };
+	const dispatch = createEventDispatcher();
+	function clamp(value: number, min: number, max: number): number {
+		return Math.min(Math.max(min, value), max);
+	}
+
+	function getCurColorVal(width?: number, height?: number) {
+		if (!width || !height) {
+			const { width: elWidth, height: elHeight } = containerElement!.getBoundingClientRect();
+			width = elWidth;
+			height = elHeight;
+		}
+
+		const s = clamp(mouse.x / width, 0, 1) * 100;
+		const v = clamp((height - mouse.y) / height, 0, 1) * 100;
+		hsvColor.h = valueHsvH;
+		return extend(hsvColor, { s, v });
+	}
+
+	function handleMouseup() {
+		isDragging = false;
+		dispatch('changeComplete', getCurColorVal());
+	}
+
+	function handleMousedown(e: MouseEvent) {
+		if (e.button === 0 || e.button === 2) {
+			onClick(e);
+			pickerMousedown(e);
+		}
+	}
+
+	let ClickPos = { x: 0, y: 0 };
+	function handleMouseMove(event: MouseEvent) {
+		if (Math.abs(event.clientX - ClickPos.x) < 10 && Math.abs(event.clientY - ClickPos.y) < 10) {
+			return;
+		}
+		if (isDragging && dragElement) {
+			const newX = event.clientX - startX;
+			const newY = event.clientY - startY;
+			const halfOffsetW = dragElement.offsetWidth / 2;
+			const halfOffsetH = dragElement.offsetHeight / 2;
+
+			const newLeft = Math.max(-halfOffsetW, Math.min(newX, containerBounds.width - halfOffsetW));
+			const newTop = Math.max(-halfOffsetH, Math.min(newY, containerBounds.height - halfOffsetH));
+			mouse = { x: newLeft, y: newTop };
+			updatePickerPos(newLeft, newTop);
+			dispatch('change', getCurColorVal());
+		}
+	}
+
+	function pickerMousedown(event: MouseEvent) {
+		isDragging = true;
+		containerBounds = containerElement!.getBoundingClientRect();
+		ClickPos = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		startX = event.clientX - offsetX;
+		startY = event.clientY - offsetY;
+	}
+
+	let dragLeft = '-99px';
+	let dragTop = '-99px';
+	function updatePickerPos<T = string | number>(x: T, y: T) {
+		if (dragElement) {
+			offsetX = x as number;
+			offsetY = y as number;
+			dragLeft = `${x}px`;
+			dragTop = `${y}px`;
+		}
+	}
+
+	let mouse = { x: 0, y: 0 };
+	function onClick(e: { clientX: number; clientY: number }) {
+		if (containerElement) {
+			const { width, left, height, top } = containerElement!.getBoundingClientRect();
+			mouse = { x: clamp(e.clientX - left, 0, width), y: clamp(e.clientY - top, 0, height) };
+			updatePickerPos(mouse.x - 8, mouse.y - 8);
+			dispatch('change', getCurColorVal(width, height));
+		}
+	}
+
+	export function setPickerPos(val: HsvaColor) {
+		if (dragElement && containerElement) {
+			const { width, height } = containerElement!.getBoundingClientRect();
+			const sNormalized = val.s;
+			const vNormalized = val.v;
+			const mouseX = sNormalized * width;
+			const mouseY = height - vNormalized * height;
+			hsvColor.h = valueHsvH;
+			updatePickerPos(mouseX - 8, mouseY - 8);
+		}
+	}
+	onMount(() => {
+		setTimeout(() => setPickerPos(hsvColor), 300);
+		window.addEventListener('mousemove', handleMouseMove);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('mousemove', handleMouseMove);
+	});
+
+	$: valueHsvH = tinycolor(defaultValue).toHsv().h;
+	$: bgColorVal = tinycolor(defaultValue).toHex();
+	const prefixCls = getPrefixCls('color-picker-palette');
+	$: cnames = clsx(
+		prefixCls,
+		{
+			[`${prefixCls}--base`]: true
+		},
+		cls
+	);
+	const pointerCls = getPrefixCls('color-picker-pointer');
+</script>
+
+<div
+	class={cnames}
+	aria-hidden="true"
+	on:mousedown|preventDefault={handleMousedown}
+	on:mouseup|preventDefault={handleMouseup}
+	bind:this={containerElement}
+	style:background-color={`#${bgColorVal}`}
+	{...$$restProps}
+	{...attrs}
+>
+	<div
+		class={pointerCls}
+		style:left={dragLeft}
+		style:top={dragTop}
+		aria-hidden="true"
+		bind:this={dragElement}
+	></div>
+</div>
diff --git a/components/ColorPicker/src/preset.svelte b/components/ColorPicker/src/preset.svelte
new file mode 100644
index 00000000..187659ca
--- /dev/null
+++ b/components/ColorPicker/src/preset.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { KColorPickerPresetProps } from './types';
+	import { fade } from 'svelte/transition';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import tinycolor from 'tinycolor2';
+	import { KIcon } from '@ikun-ui/icon';
+	import { KCheckbox } from '@ikun-ui/checkbox';
+	import { KCheckboxGroup } from '@ikun-ui/checkbox-group';
+	import { createEventDispatcher } from 'svelte';
+	export let presets: KColorPickerPresetProps['presets'] = [];
+	export let value: KColorPickerPresetProps['value'] = '';
+	export let cls: KColorPickerPresetProps['cls'] = '';
+	export let attrs: KColorPickerPresetProps['attrs'] = {};
+
+	let normalPresets: KColorPickerPresetProps['presets'] = [];
+	$: {
+		normalPresets = (presets || []).map((v) => {
+			return {
+				...v,
+				colors: v.colors.map((color) => tinycolor(color).toHexString())
+			};
+		}) as KColorPickerPresetProps['presets'];
+	}
+
+	// expend icon
+	function handleExpendIcon(open: boolean | undefined) {
+		return open ? 'i-carbon-chevron-down' : 'i-carbon-chevron-down -rotate-90';
+	}
+
+	function handleExpend(index: number) {
+		normalPresets[index].defaultOpen = !normalPresets[index].defaultOpen;
+	}
+
+	const dispatch = createEventDispatcher();
+	let checkValue = [tinycolor(value).toHexString()];
+	function handleCheck(e: CustomEvent) {
+		checkValue = e.detail.length ? [e.detail.pop()] : [];
+		dispatch('change', checkValue);
+	}
+
+	const getColor = (c: KColorPickerPresetProps['value']) => c as string;
+	const getCheckColor = (c: KColorPickerPresetProps['value']) =>
+		tinycolor(c).isLight() ? 'text-ikun-dark-300' : 'text-white';
+	const prefixCls = getPrefixCls('color-picker-preset');
+	$: cnames = clsx(prefixCls, cls);
+	const containerCls = getPrefixCls('color-picker-preset--container');
+	const headCls = getPrefixCls('color-picker-preset--head');
+	const labelCls = getPrefixCls('color-picker-preset--label');
+	const iconCls = getPrefixCls('color-picker-preset--icon');
+	const colorCls = getPrefixCls('color-picker-preset--color');
+	const checkCls = getPrefixCls('color-picker-preset--checkbox');
+</script>
+
+<div class={cnames} {...$$restProps} {...attrs}>
+	<KCheckboxGroup value={checkValue} on:updateValue={handleCheck}>
+		{#each normalPresets as preset, index (preset.label + index)}
+			<div class={containerCls}>
+				<div class={headCls} on:click={() => handleExpend(index)} aria-hidden="true">
+					<KIcon
+						cls={iconCls}
+						icon={handleExpendIcon(preset.defaultOpen)}
+						width="14px"
+						height="14px"
+					/>
+					<span class={labelCls}>{preset.label}</span>
+				</div>
+				{#if preset.defaultOpen}
+					<div class={colorCls} transition:fade>
+						{#each preset.colors as color (color)}
+							<KCheckbox
+								uid={getColor(color)}
+								cls={checkCls}
+								canCancel
+								checkColor={getCheckColor(color)}
+								bgUnCheckColor={getColor(color)}
+								bgCheckColor={getColor(color)}
+							></KCheckbox>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</KCheckboxGroup>
+</div>
diff --git a/components/ColorPicker/src/slider.svelte b/components/ColorPicker/src/slider.svelte
new file mode 100644
index 00000000..504fb6b7
--- /dev/null
+++ b/components/ColorPicker/src/slider.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { HsvaColor, KColorPickerSliderProps } from './types';
+	import tinycolor from 'tinycolor2';
+	import { getPrefixCls } from '@ikun-ui/utils';
+	import { clsx } from 'clsx';
+	import { createEventDispatcher } from 'svelte';
+
+	export let isAlpha: KColorPickerSliderProps['isAlpha'] = false;
+	export let max: KColorPickerSliderProps['max'] = 0;
+	export let min: KColorPickerSliderProps['min'] = 360;
+	export let step: KColorPickerSliderProps['step'] = 1;
+	export let value: KColorPickerSliderProps['value'] = '';
+	export let cls: KColorPickerSliderProps['cls'] = '';
+	export let attrs: KColorPickerSliderProps['attrs'] = {};
+
+	let slider: HTMLDivElement | undefined = undefined;
+	$: valueHsv = value as HsvaColor;
+	$: valueHsvH = valueHsv.h;
+	$: valueHsvA = !isAlpha ? 1 : valueHsv.a;
+	let valueHex = '';
+	$: {
+		const v = {
+			s: !isAlpha ? 1 : valueHsv.s,
+			v: !isAlpha ? 1 : valueHsv.v,
+			h: valueHsvH,
+			a: valueHsvA
+		};
+		// console.log(valueHsvA)
+		valueHex = tinycolor(v).toRgbString();
+	}
+
+	let trackAlphaBg = '';
+	$: {
+		const v = tinycolor({ ...valueHsv, a: 1 }).toHex();
+		trackAlphaBg = !isAlpha ? '' : `linear-gradient(to right, rgba(255, 0, 4, 0), #${v})`;
+	}
+	$: position = Number((((!isAlpha ? valueHsvH : valueHsvA) - min) / (max - min)).toFixed(4));
+
+	function bound(value: number) {
+		const ratio = 1 / step;
+		const rounded = Math.round(value * ratio) / ratio;
+		return Math.max(min, Math.min(max, rounded));
+	}
+
+	const dispatch = createEventDispatcher();
+	function updateValue(e: { clientX: number; clientY: number }) {
+		const clientWidth = slider?.clientWidth || 120;
+		const sliderOffsetX = slider?.getBoundingClientRect().left || 0;
+		let offsetX = e.clientX - sliderOffsetX;
+		if (isAlpha) {
+			valueHsvA = (offsetX / clientWidth) * (max - min) + min;
+			valueHsvA = bound(valueHsvA);
+			valueHsv.a = valueHsvA;
+		} else {
+			valueHsvH = (offsetX / clientWidth) * (max - min) + min;
+			valueHsvH = bound(valueHsvH);
+			valueHsv.h = valueHsvH;
+		}
+
+		dispatch('input', valueHsv);
+	}
+	let isDragging: boolean = false;
+	function jump(e: MouseEvent) {
+		updateValue(e);
+		isDragging = true;
+	}
+
+	function drag(e: MouseEvent) {
+		if (isDragging) updateValue(e);
+	}
+
+	function endDrag() {
+		isDragging = false;
+	}
+
+	const prefixCls = getPrefixCls('color-picker-slider');
+	const thumbCls = clsx(`${prefixCls}--thumb`);
+	const trackCls = clsx({
+		[`${prefixCls}--track`]: !isAlpha,
+		[`${prefixCls}--track_alpha`]: isAlpha
+	});
+	$: cnames = clsx(
+		prefixCls,
+		{
+			[`${prefixCls}_alpha`]: isAlpha
+		},
+		cls
+	);
+</script>
+
+<svelte:window on:mousemove={drag} on:mouseup={endDrag} />
+<div
+	aria-hidden="true"
+	class={cnames}
+	{...$$restProps}
+	{...attrs}
+	bind:this={slider}
+	on:mousedown|self={jump}
+>
+	<div class={trackCls} style:background={trackAlphaBg} />
+	<div class={thumbCls} style:background-color={valueHex} style:left={`${position * 100}%`} />
+</div>
diff --git a/components/ColorPicker/src/types.d.ts b/components/ColorPicker/src/types.d.ts
new file mode 100644
index 00000000..b1f08b67
--- /dev/null
+++ b/components/ColorPicker/src/types.d.ts
@@ -0,0 +1,233 @@
+/// <reference types="svelte" />
+import type { ClassValue } from 'clsx';
+import type { IKunPlacement, IKunSize, IKunTrigger } from '@ikun-ui/utils';
+export type KColorPickerProps = {
+	/**
+	 * 标题
+	 * @type string ;
+	 * @default ''
+	 */
+	title: string;
+	/**
+	 * 允许清除选择的颜色
+	 * @type boolean
+	 * @default false
+	 */
+	allowClear?: boolean;
+	/**
+	 * 默认颜色的值
+	 * @expiremrnt 决定线性范围，他会根据颜色的 slider 来变化
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	defaultValue: string | RgbaColor | HsvaColor;
+	/**
+	 * 颜色的值
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	value: string | RgbaColor | HsvaColor;
+	/**
+	 * 颜色格式值
+	 * @type 'rgb' | 'hex' | 'hsv'
+	 * @default 'rgb'
+	 */
+	format?: 'rgb' | 'hex' | 'hsv';
+	/**
+	 * 禁用颜色选择器
+	 * @type boolean
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * 禁用透明度
+	 * @type boolean
+	 * @default false
+	 */
+	disabledAlpha?: boolean;
+	/**
+	 * 弹出窗口的位置
+	 * @type IKunPlacement
+	 * @default 'top'
+	 */
+	placement?: IKunPlacement;
+	/**
+	 * 预设的颜色
+	 * @type { label: string, colors: Array<string | Color>, defaultOpen?: boolean }[]
+	 * @default undefined
+	 */
+	presets?: KColorPickerPreset[];
+	/**
+	 * 触发器大小
+	 * @type IKunSize
+	 * @default 'md'
+	 */
+	size: IKunSize;
+	/**
+	 * 触发器是否显示文本
+	 * @type boolean
+	 * @default false
+	 */
+	showText: boolean;
+	/**
+	 * 颜色选择器的触发模式
+	 * @type IKunTrigger
+	 * @default 'click'
+	 */
+	trigger: IKunTrigger;
+	cls: ClassValue;
+	attrs: Record<string, string>;
+};
+
+export type KColorPickerPaletteProps = {
+	/**
+	 * 颜色的值
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	value: string | RgbaColor | HsvaColor;
+	/**
+	 * 默认颜色的值
+	 * @expiremrnt 决定线性范围，他会根据颜色的 slider 来变化
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	defaultValue: string | RgbaColor | HsvaColor;
+	cls: ClassValue;
+	attrs: Record<string, string>;
+};
+
+export type KColorPickerSliderProps = {
+	max: number;
+	min: number;
+	step: number;
+	isAlpha: boolean;
+	/**
+	 * 颜色的值
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	value: string | RgbaColor | HsvaColor;
+	cls: ClassValue;
+	attrs: Record<string, string>;
+};
+
+export type KColorPickerBlockProps = {
+	disabled: boolean;
+	focus: boolean;
+	isClear: boolean;
+	trigger: boolean;
+	/**
+	 * 颜色的值
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	value: string | RgbaColor | HsvaColor;
+	/**
+	 * 触发器大小
+	 * @type IKunSize
+	 * @default 'md'
+	 */
+	size: IKunSize;
+	cls: ClassValue;
+	attrs: Record<string, string>;
+};
+
+export type KColorPickerFormatProps = {
+	/**
+	 * 禁用透明度
+	 * @type boolean
+	 * @default false
+	 */
+	disabledAlpha?: boolean;
+	/**
+	 * 颜色格式值
+	 * @type 'rgb' | 'hex' | 'hsv'
+	 * @default 'rgb'
+	 */
+	format?: 'rgb' | 'hex' | 'hsv';
+	/**
+	 * 颜色的值
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	value: string | RgbaColor | HsvaColor;
+	cls: ClassValue;
+	attrs: Record<string, string>;
+};
+
+// TODO:
+//  🚧 slider
+//  🚧 顔色格式轉換
+//  🚧 多個 popover
+
+// TODO: 🚧 Title and Clear
+// TODO: 🚧 颜色选择区
+// TODO: 🚧 颜色选择条
+// TODO: 🚧 透明度选择条
+// TODO: 🚧 HEX 格式输入控件与值输出
+// TODO: 🚧 HSB 格式输入控件与值输出
+// TODO: 🚧 RGB 格式输入控件与值输出
+// TODO: 🚧 颜色预设区域
+// TODO: 受控模式
+
+// TODO: 🚧 props allowClear 允许清除选择的颜色 boolean @default false
+// TODO: 🚧 props value 颜色的值 string @default ''
+// TODO: 🚧 defaultValue value 初始化时决定线性范围 string @default ''
+// TODO: 🚧 props format 颜色格式值 rgb | hex | hsb @default rgb
+// TODO: 🚧 props disabled 禁用颜色选择器 boolean @default false
+// TODO: 🚧 props disabledAlpha 禁用透明度 boolean @default false
+// TODO: 🚧 props placement unit test
+// TODO: 🚧 props presets 预设的颜色  { label: string, colors: Array<string | Color>, defaultOpen?: boolean }[] @default undefined
+// TODO: 🚧 props size 触发器大小 IkunSize @default 'md'
+// TODO: 🚧 props showText 触发器是否显示文本 boolean @default false
+// TODO: 🚧 props trigger unit test
+
+// TODO: 🚧 event change 颜色变化的回调 (color: string) => void
+// TODO: 🚧 event changeComplete 颜色选择完成的回调 (color: string) => void
+
+// TODO: 🚧 event formatChange 颜色格式变化的回调 (format: 'hex' | 'rgb' | 'hsb') => void
+// TODO: 🚧 event openChange 当 open 被改变时的回调 (open: boolean) => void
+// TODO: 🚧 event clear 清除的回调 () => void
+
+// TODO: 🚧 slot presetLabel 预设的 label 插槽
+// TODO: 🚧 slot text 后置插槽(参数颜色值)
+// TODO: 🚧 slot default 自定义触发插槽
+// TODO: 🚧 slot title 标题插槽
+
+// TODO: dark mode
+export interface RgbaColor {
+	r: number;
+	g: number;
+	b: number;
+	a: number;
+}
+
+export interface HsvaColor {
+	h: number;
+	s: number;
+	v: number;
+	a: number;
+}
+
+export interface KColorPickerPreset {
+	defaultOpen?: boolean;
+	label: string;
+	colors: string[] | RgbaColor[] | HsvaColor[];
+}
+export type KColorPickerPresetProps = {
+	/**
+	 * 颜色的值
+	 * @type string | RgbaColor | HsvaColor;
+	 * @default ''
+	 */
+	value: string | RgbaColor | HsvaColor;
+	/**
+	 * 预设颜色的值
+	 * @type string[] | RgbaColor[] | HsvaColor[];
+	 * @default ''
+	 */
+	presets: KColorPickerPreset[];
+	cls: ClassValue;
+	attrs: Record<string, string>;
+};
diff --git a/components/ColorPicker/tsconfig.json b/components/ColorPicker/tsconfig.json
new file mode 100644
index 00000000..fe0d7c4f
--- /dev/null
+++ b/components/ColorPicker/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+
+	"compilerOptions": {
+		"noImplicitAny": true,
+		"strict": true,
+		"declaration": true
+	},
+	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
+	"exclude": ["node_modules/*", "**/*.spec.ts"]
+}
diff --git a/components/Dropdown/src/index.ts b/components/Dropdown/src/index.ts
index c42a14a3..777ed956 100644
--- a/components/Dropdown/src/index.ts
+++ b/components/Dropdown/src/index.ts
@@ -2,7 +2,7 @@
 import Dropdown from './index.svelte';
 import DropdownItem from './item.svelte';
 export { Dropdown as KDropdown };
-export { DropdownItem as DropdownItem };
+export { DropdownItem as KDropdownItem };
 export default Dropdown;
 
 export type { KDropdownProps, KDropdownItemProps, KDropdownCtx } from './types';
diff --git a/components/index.ts b/components/index.ts
index 0ef52060..09d3bea5 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -63,3 +63,4 @@ export * from '@ikun-ui/segmented';
 export * from '@ikun-ui/steps';
 export * from '@ikun-ui/auto-complete';
 export * from '@ikun-ui/skeleton';
+export * from '@ikun-ui/color-picker';
diff --git a/package.json b/package.json
index b3f38248..b6e565a3 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
 		"clean:deps": "node scripts/clean-deps.js && node scripts/clean-root-deps.js",
 		"prepare": "npx simple-git-hooks",
 		"update:deps": "npx taze -w -r major && pnpm run init",
-		"create:new:comp": "node scripts/new-component.js skeleton"
+		"create:new:comp": "node scripts/new-component.js color-picker"
 	},
 	"peerDependencies": {
 		"baiwusanyu-utils": "^1.0.18",
@@ -145,7 +145,8 @@
 		"@ikun-ui/segmented": "workspace:*",
 		"@ikun-ui/steps": "workspace:*",
 		"@ikun-ui/auto-complete": "workspace:*",
-		"@ikun-ui/skeleton": "workspace:*"
+		"@ikun-ui/skeleton": "workspace:*",
+		"@ikun-ui/color-picker": "workspace:*"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4fc6e311..a8d61f1d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
       '@ikun-ui/collapse-wrapper':
         specifier: workspace:*
         version: link:components/CollapseWrapper
+      '@ikun-ui/color-picker':
+        specifier: workspace:*
+        version: link:components/ColorPicker
       '@ikun-ui/contextmenu':
         specifier: workspace:*
         version: link:components/Contextmenu
@@ -885,6 +888,64 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
 
+  components/ColorPicker:
+    dependencies:
+      '@ikun-ui/checkbox':
+        specifier: workspace:*
+        version: link:../Checkbox
+      '@ikun-ui/checkbox-group':
+        specifier: workspace:*
+        version: link:../CheckboxGroup
+      '@ikun-ui/dropdown':
+        specifier: workspace:*
+        version: link:../Dropdown
+      '@ikun-ui/icon':
+        specifier: workspace:*
+        version: link:../Icon
+      '@ikun-ui/input':
+        specifier: workspace:*
+        version: link:../Input
+      '@ikun-ui/input-number':
+        specifier: workspace:*
+        version: link:../InputNumber
+      '@ikun-ui/popover':
+        specifier: workspace:*
+        version: link:../Popover
+      '@ikun-ui/utils':
+        specifier: workspace:*
+        version: link:../../utils
+      baiwusanyu-utils:
+        specifier: ^1.0.18
+        version: 1.0.18(ansi-colors@4.1.3)(moment@2.29.4)
+      clsx:
+        specifier: ^2.0.0
+        version: 2.1.0
+      esm-env:
+        specifier: ^1.0.0
+        version: 1.0.0
+      svelte:
+        specifier: ^4.2.7
+        version: 4.2.8
+      tinycolor2:
+        specifier: ^1.6.0
+        version: 1.6.0
+    devDependencies:
+      '@sveltejs/package':
+        specifier: ^2.2.5
+        version: 2.2.5(svelte@4.2.8)(typescript@5.3.3)
+      '@tsconfig/svelte':
+        specifier: ^5.0.2
+        version: 5.0.2
+      '@types/tinycolor2':
+        specifier: ^1.4.6
+        version: 1.4.6
+      tslib:
+        specifier: ^2.6.2
+        version: 2.6.2
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
+
   components/Contextmenu:
     dependencies:
       '@ikun-ui/icon':
@@ -4076,6 +4137,10 @@ packages:
     resolution: {integrity: sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==}
     dev: true
 
+  /@types/tinycolor2@1.4.6:
+    resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
+    dev: true
+
   /@types/unist@3.0.2:
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
     dev: true
@@ -5405,7 +5470,7 @@ packages:
     dev: true
 
   /emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==, tarball: https://r2.cnpmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz}
     dev: true
 
   /emoji-regex@9.2.2:
@@ -6422,7 +6487,7 @@ packages:
     engines: {node: '>=0.10.0'}
 
   /is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==, tarball: https://r2.cnpmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz}
     engines: {node: '>=8'}
     dev: true
 
@@ -8077,7 +8142,7 @@ packages:
     dev: true
 
   /string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==, tarball: https://r2.cnpmjs.org/string-width/-/string-width-4.2.3.tgz}
     engines: {node: '>=8'}
     dependencies:
       emoji-regex: 8.0.0
@@ -8540,6 +8605,10 @@ packages:
     resolution: {integrity: sha512-65NKvSuAVDP/n4CqH+a9w2kTlLReS9vhsAP06MWx+/89nMinJyB2icyl58RIcqCmIggpojIGeuJGhjU1aGMBSg==}
     dev: true
 
+  /tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: false
+
   /tinypool@0.8.1:
     resolution: {integrity: sha512-zBTCK0cCgRROxvs9c0CGK838sPkeokNGdQVUUwHAbynHFlmyJYj825f/oRs528HaIJ97lo0pLIlDUzwN+IorWg==}
     engines: {node: '>=14.0.0'}
@@ -9279,7 +9348,7 @@ packages:
     dev: true
 
   /wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==, tarball: https://r2.cnpmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz}
     engines: {node: '>=10'}
     dependencies:
       ansi-styles: 4.3.0
diff --git a/preset/src/rules/index.ts b/preset/src/rules/index.ts
index c8e72807..39bcd0fb 100644
--- a/preset/src/rules/index.ts
+++ b/preset/src/rules/index.ts
@@ -16,6 +16,7 @@ import { getIkunColorRules } from './src/ikun-color';
 import { tabRules } from './src/tab';
 import { carouselRules } from './src/carousel';
 import { skeletonRules } from './src/skeleton';
+import { colorPickerRules } from './src/color-picker';
 import { baseRules } from './src/base';
 
 declare type dynamicRulesFunc = (...args: any[]) => Array<RegExp | ((...args: any[]) => any)>;
@@ -31,6 +32,7 @@ export const defaultRules = {
 	...tabRules,
 	...carouselRules,
 	...skeletonRules,
+	...colorPickerRules,
 	...baseRules,
 	...getColCls(),
 	...getDescriptionsGridColCls(),
diff --git a/preset/src/rules/src/base.ts b/preset/src/rules/src/base.ts
index f52fbb0e..c9bb7953 100644
--- a/preset/src/rules/src/base.ts
+++ b/preset/src/rules/src/base.ts
@@ -1,3 +1,9 @@
 export const baseRules = {
-	'k-user-drag-none': { '-webkit-user-drag': 'none' }
+	'k-user-drag-none': {
+		'-webkit-user-drag': 'none'
+	},
+	'k-transparent-bg': {
+		'background-image':
+			'conic-gradient(rgba(0, 0, 0, 0.06) 0 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0);'
+	}
 };
diff --git a/preset/src/rules/src/color-picker.ts b/preset/src/rules/src/color-picker.ts
new file mode 100644
index 00000000..fc451599
--- /dev/null
+++ b/preset/src/rules/src/color-picker.ts
@@ -0,0 +1,27 @@
+export const colorPickerRules = {
+	'k-color-picker-shadow': { 'box-shadow': '0 0 0 2px #ff787542' },
+	'palette-bg': {
+		'background-image':
+			'linear-gradient(0deg, rgb(0, 0, 0), transparent),\n' +
+			'\t\t\tlinear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0))'
+	},
+	'color-block-bg': {
+		'background-size': '50% 50%;'
+	},
+	'color-alpha-bg': {
+		'background-size': '8px 8px'
+	},
+	'color-track': {
+		background:
+			'linear-gradient(\n' +
+			'\t\t\tto right,\n' +
+			'\t\t\trgb(255, 0, 0),\n' +
+			'\t\t\trgb(255, 255, 0),\n' +
+			'\t\t\trgb(0, 255, 0),\n' +
+			'\t\t\trgb(0, 255, 255),\n' +
+			'\t\t\trgb(0, 0, 255),\n' +
+			'\t\t\trgb(255, 0, 255),\n' +
+			'\t\t\trgb(255, 0, 0)\n' +
+			'\t\t);'
+	}
+};
diff --git a/preset/src/shortcuts/index.ts b/preset/src/shortcuts/index.ts
index ebd32598..5d64999d 100644
--- a/preset/src/shortcuts/index.ts
+++ b/preset/src/shortcuts/index.ts
@@ -1,3 +1,4 @@
+import { colorPickerShortcuts } from './src/color-picker';
 import { skeletonShortcuts } from './src/skeleton';
 import { autoCompleteShortcuts } from './src/auto-complete';
 import { stepsShortcuts } from './src/steps';
@@ -66,6 +67,8 @@ export const defaultShortcuts = [
 	commonShortcuts,
 	// don't remove
 	// anchor defaultShortcuts
+	// color-picker
+	colorPickerShortcuts,
 	// skeleton
 	skeletonShortcuts,
 	// auto-complete
@@ -181,6 +184,7 @@ export const defaultShortcuts = [
 export function getSafeList() {
 	// don't remove
 	// anchor shortcuts
+	const colorPickerList = Object.keys(colorPickerShortcuts);
 	const skeletonList = Object.keys(skeletonShortcuts);
 	const autoCompleteList = Object.keys(autoCompleteShortcuts);
 	const stepsList = Object.keys(stepsShortcuts);
@@ -241,6 +245,7 @@ export function getSafeList() {
 	let res = iconList
 		// don't remove
 		// anchor list
+		.concat(colorPickerList)
 		.concat(skeletonList)
 		.concat(autoCompleteList)
 		.concat(stepsList)
@@ -370,3 +375,4 @@ export { segmentedShortcuts } from './src/segmented';
 export { stepsShortcuts } from './src/steps';
 export { autoCompleteShortcuts } from './src/auto-complete';
 export { skeletonShortcuts } from './src/skeleton';
+export { colorPickerShortcuts } from './src/color-picker';
diff --git a/preset/src/shortcuts/src/color-picker.ts b/preset/src/shortcuts/src/color-picker.ts
new file mode 100644
index 00000000..acedc2d9
--- /dev/null
+++ b/preset/src/shortcuts/src/color-picker.ts
@@ -0,0 +1,53 @@
+export const colorPickerShortcuts: Record<string, string> = {
+	'k-color-picker': 'm-4px',
+	'k-color-picker-header': 'fbc text-base',
+	'k-color-picker-title': 'mb-12px',
+	'k-color-picker-line':
+		"after:(content-[''] pa right-14px top-15px w-22px h-2px block bg-ikun-error origin-right -rotate-45)",
+	'k-color-picker-clear':
+		'w-18px h-18px k-border border-ikun-bd-base rounded-4px cursor-pointer mb-12px',
+	'k-color-picker-palette':
+		'pr overflow-hidden left-0 top-0 rounded-4px w-269px h-160px palette-bg',
+	'k-color-picker-pointer':
+		'cursor-pointer pa rounded-16px w-14px h-14px bd-3 border-solid border-white',
+	'k-color-picker--hsb': 'fcc mt-12px w-full',
+	'k-color-picker--hs': 'w-full mr-12px',
+	'k-color-picker--alpha': 'mt-12px',
+	'k-color-picker-block': 'w-28px h-28px color-block-bg k-transparent-bg rounded-4px',
+	'k-color-picker-block-clear':
+		"color-block-bg k-border border-ikun-bd-base rounded-4px pr w-28px h-28px k-transparent-bg after:(content-[''] pa right-2px top-0 w-32px h-2px block bg-ikun-error origin-right -rotate-45)",
+	'k-color-picker-block--sm': 'w-16px h-16px',
+	'k-color-picker-block--md': 'w-24px h-24px',
+	'k-color-picker-block--lg': 'w-32px h-32px',
+	'k-color-picker-block-w--disabled': 'k-cur-disabled',
+	'k-color-picker-block-w':
+		'p-4px box-border rounded-4px k-border border-ikun-bd-base cursor-pointer fcc hover:border-ikun-main',
+	'k-color-picker-block-w--focus': 'border-ikun-main k-color-picker-shadow',
+	'k-color-picker-block-w--sm': 'min-w-24px h-24px',
+	'k-color-picker-block-w--md': 'min-w-32px h-32px',
+	'k-color-picker-trigger--disabled': 'k-bg-disabled k-cur-disabled',
+	'k-color-picker-txt': 'ml-4px',
+	'k-color-picker-block-w--lg': 'min-w-40px h-40px',
+	'k-color-picker-block-content': 'w-28px h-28px rounded-4px',
+	'k-color-picker-block-content--sm': 'w-16px h-16px rounded-4px',
+	'k-color-picker-block-content--md': 'w-24px h-24px rounded-4px',
+	'k-color-picker-block-content--lg': 'w-32px h-32px rounded-4px',
+	'k-color-picker-slider': 'cursor-pointer pr select-none h-8px',
+	'k-color-picker-slider_alpha': 'color-alpha-bg k-transparent-bg ',
+	'k-color-picker-slider--track':
+		'color-track pa h-8px w-full pointer-events-none box-border top-1/2 rounded-8px left-0 right-0 -translate-y-1/2',
+	'k-color-picker-slider--track_alpha':
+		'pa h-8px w-full pointer-events-none box-border top-1/2 rounded-8px left-0 right-0 -translate-y-1/2',
+	'k-color-picker-slider--thumb':
+		'-translate-y-1/2 -translate-x-1/2 border-solid border-white bd-3 box-border pointer-events-none pa h-14px w-14px rounded-full shadow top-1/2',
+	'k-color-picker-format': 'fsc mt-12px',
+	'k-color-picker-format--val': 'fcc cursor-pointer',
+	'k-color-picker-format--input-num': 'w-50px ml-6px',
+	'k-color-picker-format--input': 'ml-6px',
+	'k-color-picker-preset--icon': 'op50 k-icon-transition',
+	'k-color-picker-preset--container': 'mt-12px cursor-pointer',
+	'k-color-picker-preset--head': 'fsc',
+	'k-color-picker-preset--label': 'text-12px ml-4px',
+	'k-color-picker-preset--color': 'grid mt-12px gap-6px grid-cols-11',
+	'k-color-picker-preset--checkbox': 'w-18px h-18px rounded-4px'
+};
diff --git a/preset/src/shortcuts/src/common.ts b/preset/src/shortcuts/src/common.ts
index f1e8f473..4488bc29 100644
--- a/preset/src/shortcuts/src/common.ts
+++ b/preset/src/shortcuts/src/common.ts
@@ -36,5 +36,7 @@ export const commonShortcuts: UserShortcuts<Theme> = {
 	'bdtr-1': 'border-l-0 border-t-1 border-b-0 border-r-1',
 	'n-bdb-1': 'border-l-1 border-t-1 border-b-0 border-r-1',
 	'n-bdt-1': 'border-l-1 border-t-0 border-b-1 border-r-1',
-	'n-bdl-1': 'border-l-0 border-t-1 border-b-1 border-r-1'
+	'n-bdl-1': 'border-l-0 border-t-1 border-b-1 border-r-1',
+	'bd-2': 'border-t-2 border-l-2 border-b-2 border-r-2',
+	'bd-3': 'border-t-3 border-l-3 border-b-3 border-r-3'
 };
diff --git a/preset/src/shortcuts/src/popover.ts b/preset/src/shortcuts/src/popover.ts
index f134189b..2c249dcf 100644
--- a/preset/src/shortcuts/src/popover.ts
+++ b/preset/src/shortcuts/src/popover.ts
@@ -1,6 +1,6 @@
 export const popoverShortcuts: Record<string, string> = {
 	// popover
-	'k-popover--base': 'rounded p2 bg-ikun-white  z-999 box-border text-ikun-tx-base',
+	'k-popover--base': 'rounded p-8px bg-ikun-white  z-999 box-border text-ikun-tx-base',
 	'k-popover--base__left': 'k-popover-shadow__left',
 	'k-popover--base__top': 'k-popover-shadow__top',
 	'k-popover--base__right': 'k-popover-shadow__right',