diff --git a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
index c50b119e53..2ae31385aa 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Colorpicker.svelte
@@ -149,39 +149,6 @@
   $: shrink = swatches.length > 0
 </script>
 
-<div class="colorpicker-container">
-
-  <div class="palette-panel">
-    <Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
-  </div>
-
-  <div class="control-panel">
-    <div class="alpha-hue-panel">
-      <div>
-        <CheckedBackground borderRadius="50%" backgroundSize="8px">
-          <div class="selected-color" {style} />
-        </CheckedBackground>
-      </div>
-      <div>
-        <Slider type="hue" value={h} on:change={hue => setHue(hue.detail)} />
-
-        <CheckedBackground borderRadius="10px" backgroundSize="7px">
-          <Slider
-            type="alpha"
-            value={a}
-            on:change={alpha => setAlpha(alpha.detail)} />
-        </CheckedBackground>
-
-      </div>
-    </div>
-
-    <div class="format-input-panel">
-      <ButtonGroup {format} onclick={changeFormatAndConvert} />
-      <Input {value} on:input={event => handleColorInput(event.target.value)} />
-    </div>
-  </div>
-
-</div>
 <div
   class="colorpicker-container"
   bind:clientHeight={pickerHeight}
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
index c148d6bf30..b7a6f94ff7 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Input.svelte
@@ -2,9 +2,6 @@
   export let value = ""
 </script>
 
-<div>
-  <input on:input type="text" {value} maxlength="25" />
-</div>
 <div>
   <input on:input on:change type="text" {value} maxlength="25" />
 </div>
diff --git a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
index 906f5f0d6a..a6abab6ca1 100644
--- a/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
+++ b/packages/builder/src/components/userInterface/Colorpicker/Slider.svelte
@@ -29,19 +29,6 @@
   $: style = `transform: translateX(${thumbPosition - 6}px);`
 </script>
 
-<div
-  bind:this={slider}
-  bind:clientWidth={sliderWidth}
-  on:click={event => handleClick(event.clientX)}
-  class="color-format-slider"
-  class:hue={type === 'hue'}
-  class:alpha={type === 'alpha'}>
-  <div
-    use:dragable
-    on:drag={e => handleClick(e.detail)}
-    class="slider-thumb"
-    {style} />
-</div>
 <div
   bind:this={slider}
   bind:clientWidth={sliderWidth}