diff --git a/src/modules/colorpicker/colorpicker.component.scss b/src/modules/colorpicker/colorpicker.component.scss
index 47765f7a6..789963587 100644
--- a/src/modules/colorpicker/colorpicker.component.scss
+++ b/src/modules/colorpicker/colorpicker.component.scss
@@ -3,19 +3,20 @@
 
 :host-context(sky-colorpicker) {
   ::ng-deep .sky-dropdown-button {
-    padding: 0;
-    position: relative;
     z-index: 1;
     border-color: transparent;
-    left: -30px;
     height: 30px;
     width: 30px;
     color: transparent;
     background-color: transparent;
   }
+
+  ::ng-deep sky-dropdown {
+    position: absolute;
+  }
 }
 
-:host-context(sky-colorpicker) /deep/ .sky-colorpicker-input {
+:host-context(sky-colorpicker) ::ng-deep .sky-colorpicker-input {
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M0%200h30v30H0V0zm14.5%204H4v22h14v-8h8V4H14.5z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22%23FFF%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cpath%20stroke%3D%22%23CCC%22%20d%3D%22M.5.5v29h29V.5H.5zm18%2018v8h-15v-23h23v15h-8z%22%2F%3E%3Cpath%20fill%3D%22%23292A2B%22%20d%3D%22M23.5%2025L21%2022h5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
   width: 30px;
   height: 30px;
@@ -34,13 +35,11 @@
 
 .sky-colorpicker-reset-button {
   background-color: $sky-color-white;
-  margin: 0px;
+  margin-left: $sky-margin-half;
   @include sky-border(light, top, right, bottom, left);
   box-shadow: inset 0 0 0 2px $sky-color-white, inset 0 0 0 3px $sky-border-color-neutral-medium;
   width: 30px;
   height: 30px;
-  position: relative;
-  left: -25px;
   cursor: pointer;
   color: $sky-text-color-deemphasized;
   &:hover {