diff --git a/assets/main.scss b/assets/main.scss
index dfbd046..40c4e4a 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -149,7 +149,7 @@ button {
 .color_picker {
     @apply leading-none;
     &-selected {
-        @apply size-10 rounded border-gray-300 inline-block leading-none;
+        @apply size-10 rounded border-gray-300 shadow inline-block leading-none;
     }
     &-changer {
         @apply absolute w-80 z-10 bg-white flex gap-0;
diff --git a/components/calcValues.vue b/components/calcValues.vue
index 7661c27..74bf27f 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -81,7 +81,7 @@ watch(form_state, changeParametres, { deep: true })
             <div class="form-row">
                 <div class="form-item">
                     <label for="lamelle_color">Цвет ламелей</label>
-                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
+                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled :style="[{backgroundColor: lamelle_color}]" />
                     <ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
                 </div>
                 <div class="form-item">
diff --git a/components/colorPicker.vue b/components/colorPicker.vue
index c317760..e3ced56 100644
--- a/components/colorPicker.vue
+++ b/components/colorPicker.vue
@@ -13,12 +13,25 @@ const isOpenPicker = ref<boolean>(false)
 const toggleOpen = (value: boolean = !isOpenPicker) => {
     isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value
 }
+const picker = ref()
+const clickOutside = (e: Event) => {
+    if (!picker.value.contains(e.target)) {
+        toggleOpen(false)
+    }
+}
+onMounted(() => {
+    document.addEventListener('click', clickOutside)
+})
+onUnmounted(() => {
+    document.removeEventListener('click', clickOutside)
+})
 </script>
 <template>
     <div>
-        <div class="color_picker">
-            <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]" @click="toggleOpen"></div>
-            <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker" @focusout="toggleOpen(false)">
+        <div class="color_picker" ref="picker">
+            <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]"
+                @click="toggleOpen(!isOpenPicker)" @focusout="toggleOpen(false)"></div>
+            <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
                 <template v-for="col in converter.hex">
                     <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
                         :style="[{ backgroundColor: col }]" @click="onClick(col)">