diff --git a/packages/html/src/coloreditor/color-editor.spec.tsx b/packages/html/src/coloreditor/color-editor.spec.tsx
new file mode 100644
index 00000000000..89114f7f102
--- /dev/null
+++ b/packages/html/src/coloreditor/color-editor.spec.tsx
@@ -0,0 +1,93 @@
+import { classNames, stateClassNames, States } from '../utils';
+import { ActionButtons } from '../action-buttons';
+import { Button } from '../button';
+import { ButtonGroup } from '../button-group';
+import { ColorGradient } from '../colorgradient';
+import { ColorPalette } from '../colorpalette';
+import { ColorPreview } from '../color-preview';
+import { PALETTEPRESETS } from '../colorpalette/colorpalette-presets';
+
+const COLOREDITOR_CLASSNAME = 'k-coloreditor';
+
+const states = [
+    States.focus
+];
+
+const options = {};
+
+export type KendoColorEditorProps = {
+    view?: 'gradient' | 'palette';
+    color?: string;
+    currentColor?: string;
+    focusView?: boolean;
+    dir?: 'ltr' | 'rtl';
+    group?: boolean;
+    palette?: Array<string> | any;
+};
+
+export type KendoColorEditorState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    view: 'gradient',
+    currentColor: 'fuchsia',
+    palette: PALETTEPRESETS.office
+};
+
+export const ColorEditor = (
+    props: KendoColorEditorProps &
+        KendoColorEditorState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        view = defaultProps.view,
+        color,
+        currentColor = defaultProps.currentColor,
+        focus,
+        focusView,
+        dir,
+        group,
+        palette = defaultProps.palette
+    } = props;
+
+    return (
+        <div className={classNames(
+            props.className,
+            'k-flatcolorpicker',
+            COLOREDITOR_CLASSNAME,
+            stateClassNames(COLOREDITOR_CLASSNAME, { focus })
+        )} dir={dir}>
+            <div className="k-coloreditor-header k-hstack">
+                <div className="k-coloreditor-header-actions k-hstack">
+                    { group &&
+                        <ButtonGroup>
+                            <Button fillMode="flat" icon="droplet-slider" selected={ view === 'gradient' }></Button>
+                            <Button fillMode="flat" icon="palette" selected={ view === 'palette' }></Button>
+                        </ButtonGroup>
+                    }
+                </div>
+                <div className="k-spacer"></div>
+                <div className="k-coloreditor-header-actions k-hstack">
+                    <Button fillMode="flat" icon="droplet-slash"></Button>
+                    <div className="k-coloreditor-preview k-vstack">
+                        <ColorPreview className="k-coloreditor-preview-color" color={color} />
+                        <ColorPreview className="k-coloreditor-current-color" color={currentColor} />
+                    </div>
+                </div>
+            </div>
+            <div className="k-coloreditor-views k-vstack">
+                { view === 'gradient' ? <ColorGradient focus={focusView} /> : <ColorPalette palette={palette}/> }
+            </div>
+            <ActionButtons className="k-coloreditor-footer" alignment="end" >
+                <Button className="k-coloreditor-cancel">Cancel</Button>
+                <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
+            </ActionButtons>
+        </div>
+    );
+};
+
+ColorEditor.states = states;
+ColorEditor.options = options;
+ColorEditor.className = COLOREDITOR_CLASSNAME;
+ColorEditor.defaultProps = defaultProps;
+
+export default ColorEditor;
diff --git a/packages/html/src/coloreditor/index.ts b/packages/html/src/coloreditor/index.ts
new file mode 100644
index 00000000000..74b5e8edbb7
--- /dev/null
+++ b/packages/html/src/coloreditor/index.ts
@@ -0,0 +1 @@
+export * from './color-editor.spec';
diff --git a/packages/html/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx b/packages/html/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx
index 501b4b9e3a0..b37065c7f97 100644
--- a/packages/html/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx
+++ b/packages/html/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx
@@ -1,8 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { ColorPreview } from '../../color-preview';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorEditor } from '../../coloreditor';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -27,78 +24,7 @@ root.render(
             <span>Focused Cologradient Inside ColorEditor</span>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor">
-                    <div className="k-coloreditor-header k-hstack">
-                        <div className="k-coloreditor-header-actions k-hstack"></div>
-                        <div className="k-spacer"></div>
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <Button fillMode="flat" icon="reset-color"></Button>
-                            <div className="k-coloreditor-preview k-vstack">
-                                <ColorPreview className="k-coloreditor-preview-color" />
-                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-coloreditor-views k-vstack">
-                        <div className="k-focus k-colorgradient">
-                            <div className="k-colorgradient-canvas k-hstack">
-                                <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                                    <div className="k-hsv-gradient">
-                                        <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                                    </div>
-                                </div>
-                                <div className="k-hsv-controls k-hstack">
-                                    <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track">
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-colorgradient-inputs k-hstack">
-                                <div className="k-vstack">
-                                    <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">R</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">G</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">B</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                                    <label className="k-colorgradient-input-label">A</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <ActionButtons className="k-coloreditor-footer" alignment="end">
-                        <Button className="k-coloreditor-cancel">Cancel</Button>
-                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
-                    </ActionButtons>
-                </div>
+                <ColorEditor focusView />
             </section>
 
         </div>
diff --git a/packages/html/src/coloreditor/tests/coloreditor-rtl.tsx b/packages/html/src/coloreditor/tests/coloreditor-rtl.tsx
index 8096efd371b..97f6192d254 100644
--- a/packages/html/src/coloreditor/tests/coloreditor-rtl.tsx
+++ b/packages/html/src/coloreditor/tests/coloreditor-rtl.tsx
@@ -1,10 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { ColorPalette } from '../../colorpalette';
-import { ColorPreview } from '../../color-preview';
-import { NumericTextbox } from '../../numerictextbox';
-import { PALETTEPRESETS } from '../../colorpalette/colorpalette-presets';
+import { ColorEditor } from '../../coloreditor';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -30,110 +25,11 @@ root.render(
             <span>ColorPalette View</span>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor k-rtl">
-                    <div className="k-coloreditor-header k-hstack">
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <div className="k-button-group">
-                                <Button fillMode="flat" icon="color-canvas" selected></Button>
-                                <Button fillMode="flat" icon="palette"></Button>
-                            </div>
-                        </div>
-                        <div className="k-spacer"></div>
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <Button fillMode="flat" icon="reset-color"></Button>
-                            <div className="k-coloreditor-preview k-vstack">
-                                <ColorPreview className="k-coloreditor-preview-color" color="rgba(0,0,0, 0.5)" />
-                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-coloreditor-views k-vstack">
-                        <div className="k-colorgradient">
-                            <div className="k-colorgradient-canvas k-hstack">
-                                <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                                    <div className="k-hsv-gradient">
-                                        <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                                    </div>
-                                </div>
-                                <div className="k-hsv-controls k-hstack">
-                                    <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track">
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-colorgradient-inputs k-hstack">
-                                <div className="k-vstack">
-                                    <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">R</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">G</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">B</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                                    <label className="k-colorgradient-input-label">A</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <ActionButtons className="k-coloreditor-footer" alignment="end">
-                        <Button className="k-coloreditor-cancel">Cancel</Button>
-                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
-                    </ActionButtons>
-                </div>
+                <ColorEditor group color="rgba(0,0,0, 0.5)" dir="rtl" />
             </section>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor k-rtl">
-                    <div className="k-coloreditor-header k-hstack">
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <div className="k-button-group">
-                                <Button fillMode="flat" icon="color-canvas"></Button>
-                                <Button fillMode="flat" icon="palette" selected></Button>
-                            </div>
-                        </div>
-                        <div className="k-spacer"></div>
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <Button fillMode="flat" icon="reset-color"></Button>
-                            <div className="k-coloreditor-preview k-vstack">
-                                <ColorPreview className="k-coloreditor-preview-color" color="rgba(0,0,0, 0.5)" />
-                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia" />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-coloreditor-views k-vstack">
-                        <ColorPalette palette={PALETTEPRESETS.office}></ColorPalette>
-                    </div>
-                    <ActionButtons className="k-coloreditor-footer" alignment="end">
-                        <Button className="k-coloreditor-cancel">Cancel</Button>
-                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
-                    </ActionButtons>
-                </div>
+                <ColorEditor group view="palette" color="rgba(0,0,0, 0.5)" dir="rtl" />
             </section>
 
         </div>
diff --git a/packages/html/src/coloreditor/tests/coloreditor-states.tsx b/packages/html/src/coloreditor/tests/coloreditor-states.tsx
index c4a1702575e..65be534599a 100644
--- a/packages/html/src/coloreditor/tests/coloreditor-states.tsx
+++ b/packages/html/src/coloreditor/tests/coloreditor-states.tsx
@@ -1,8 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { ColorPreview } from '../../color-preview';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorEditor } from '../../coloreditor';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -27,79 +24,7 @@ root.render(
             <span>Focus</span>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor k-focus">
-                    <div className="k-coloreditor-header k-hstack">
-                        <div className="k-coloreditor-header-actions k-hstack"></div>
-                        <div className="k-spacer"></div>
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <Button fillMode="flat" icon="reset-color"></Button>
-                            <div className="k-coloreditor-preview k-vstack">
-                                <ColorPreview className="k-coloreditor-preview-color" />
-                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div className="k-coloreditor-views k-vstack">
-                        <div className="k-colorgradient">
-                            <div className="k-colorgradient-canvas k-hstack">
-                                <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                                    <div className="k-hsv-gradient">
-                                        <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                                    </div>
-                                </div>
-                                <div className="k-hsv-controls k-hstack">
-                                    <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track">
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-colorgradient-inputs k-hstack">
-                                <div className="k-vstack">
-                                    <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">R</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">G</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">B</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                                    <label className="k-colorgradient-input-label">A</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <ActionButtons className="k-coloreditor-footer" alignment="end">
-                        <Button className="k-coloreditor-cancel">Cancel</Button>
-                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
-                    </ActionButtons>
-                </div>
+                <ColorEditor focus />
             </section>
 
         </div>
diff --git a/packages/html/src/coloreditor/tests/coloreditor-views.tsx b/packages/html/src/coloreditor/tests/coloreditor-views.tsx
index 32e57a394db..b77f88f8b21 100644
--- a/packages/html/src/coloreditor/tests/coloreditor-views.tsx
+++ b/packages/html/src/coloreditor/tests/coloreditor-views.tsx
@@ -1,10 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { ColorPalette } from '../../colorpalette';
-import { ColorPreview } from '../../color-preview';
-import { NumericTextbox } from '../../numerictextbox';
-import { PALETTEPRESETS } from '../../colorpalette/colorpalette-presets';
+import { ColorEditor } from '../../coloreditor';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -30,110 +25,11 @@ root.render(
             <span>ColorPalette View</span>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor">
-                    <div className="k-coloreditor-header k-hstack">
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <div className="k-button-group">
-                                <Button fillMode="flat" icon="color-canvas" selected></Button>
-                                <Button fillMode="flat" icon="palette"></Button>
-                            </div>
-                        </div>
-                        <div className="k-spacer"></div>
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <Button fillMode="flat" icon="reset-color"></Button>
-                            <div className="k-coloreditor-preview k-vstack">
-                                <ColorPreview className="k-coloreditor-preview-color" color="rgba(0,0,0, 0.5)" />
-                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-coloreditor-views k-vstack">
-                        <div className="k-colorgradient">
-                            <div className="k-colorgradient-canvas k-hstack">
-                                <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                                    <div className="k-hsv-gradient">
-                                        <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                                    </div>
-                                </div>
-                                <div className="k-hsv-controls k-hstack">
-                                    <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track">
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-colorgradient-inputs k-hstack">
-                                <div className="k-vstack">
-                                    <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">R</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">G</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">B</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                                    <label className="k-colorgradient-input-label">A</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <ActionButtons className="k-coloreditor-footer" alignment="end">
-                        <Button className="k-coloreditor-cancel">Cancel</Button>
-                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
-                    </ActionButtons>
-                </div>
+                <ColorEditor group color="rgba(0,0,0, 0.5)" />
             </section>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor">
-                    <div className="k-coloreditor-header k-hstack">
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <div className="k-button-group">
-                                <Button fillMode="flat" icon="color-canvas"></Button>
-                                <Button fillMode="flat" icon="palette" selected></Button>
-                            </div>
-                        </div>
-                        <div className="k-spacer"></div>
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <Button fillMode="flat" icon="reset-color"></Button>
-                            <div className="k-coloreditor-preview k-vstack">
-                                <ColorPreview className="k-coloreditor-preview-color" color="rgba(0,0,0, 0.5)" />
-                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia" />
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-coloreditor-views k-vstack">
-                        <ColorPalette palette={PALETTEPRESETS.office}></ColorPalette>
-                    </div>
-                    <ActionButtons className="k-coloreditor-footer" alignment="end">
-                        <Button className="k-coloreditor-cancel">Cancel</Button>
-                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
-                    </ActionButtons>
-                </div>
+                <ColorEditor group view="palette" color="rgba(0,0,0, 0.5)" />
             </section>
 
         </div>
diff --git a/packages/html/src/coloreditor/tests/coloreditor.tsx b/packages/html/src/coloreditor/tests/coloreditor.tsx
index 0ee06302f2f..e2b7cb526dc 100644
--- a/packages/html/src/coloreditor/tests/coloreditor.tsx
+++ b/packages/html/src/coloreditor/tests/coloreditor.tsx
@@ -1,8 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { ColorPreview } from '../../color-preview';
-import { NumericTextbox } from '../../numerictextbox';
+import { ColorEditor } from '../../coloreditor';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -27,80 +24,8 @@ root.render(
             <span>Single View</span>
 
             <section>
-                <div className="k-flatcolorpicker k-coloreditor">
-                    <div className="k-coloreditor-header k-hstack">
-                        <div className="k-coloreditor-header-actions k-hstack"></div>
-                        <div className="k-spacer"></div>
-                        <div className="k-coloreditor-header-actions k-hstack">
-                            <Button fillMode="flat" icon="reset-color"></Button>
-                            <div className="k-coloreditor-preview k-vstack">
-                                <ColorPreview className="k-coloreditor-preview-color" />
-                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-coloreditor-views k-vstack">
-                        <div className="k-colorgradient">
-                            <div className="k-colorgradient-canvas k-hstack">
-                                <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
-                                    <div className="k-hsv-gradient">
-                                        <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
-                                    </div>
-                                </div>
-                                <div className="k-hsv-controls k-hstack">
-                                    <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track">
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
-                                        <div className="k-slider-track-wrap">
-                                            <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
-                                                <div className="k-slider-selection"></div>
-                                                <a className="k-draghandle k-draghandle-end"></a>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="k-colorgradient-inputs k-hstack">
-                                <div className="k-vstack">
-                                    <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">R</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">G</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
-                                    <label className="k-colorgradient-input-label">B</label>
-                                </div>
-
-                                <div className="k-vstack">
-                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
-                                    <label className="k-colorgradient-input-label">A</label>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <ActionButtons className="k-coloreditor-footer" alignment="end">
-                        <Button className="k-coloreditor-cancel">Cancel</Button>
-                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
-                    </ActionButtons>
-                </div>
+                <ColorEditor currentColor="fuchsia"/>
             </section>
-
         </div>
     </>
 );
diff --git a/packages/html/src/index.ts b/packages/html/src/index.ts
index c3299c24032..157d0e5429c 100644
--- a/packages/html/src/index.ts
+++ b/packages/html/src/index.ts
@@ -38,6 +38,7 @@ export * from './floating-label/index';
 export * from './autocomplete/index';
 export * from './colorpalette/index';
 export * from './colorgradient/index';
+export * from './coloreditor/index';
 export * from './captcha/index';
 export * from './colorpicker/index';
 export * from './combobox/index';