diff --git a/src/routes/tools/ColorConverter.vue b/src/routes/tools/ColorConverter.vue
index 9df03408..6830e603 100644
--- a/src/routes/tools/ColorConverter.vue
+++ b/src/routes/tools/ColorConverter.vue
@@ -10,7 +10,7 @@
                             canvas-height="300"
                             hide-inputs
                             mode="rgba"
-                            v-model="rgb"
+                            v-model="rgbPicker"
                     />
                 </v-col>
                 <v-col cols="12" sm="6" align="center">
@@ -18,7 +18,8 @@
                             outlined
                             ref="hex"
                             label="hex"
-                            v-model="_hex"
+                            :value="hex"
+                            @input="(v) => updateColors(v, 'hex')"
                             :rules="rules.hex"
                             dense
                     />
@@ -26,7 +27,8 @@
                             outlined
                             label="rgb"
                             ref="rgb"
-                            v-model="_rgb"
+                            :value="rgb"
+                            @input="(v) => updateColors(v, 'rgb')"
                             :rules="rules.rgb"
                             dense
                     />
@@ -34,17 +36,19 @@
                             outlined
                             label="hsl"
                             ref="hsl"
-                            v-model="_hsl"
+                            :value="hsl"
                             :rules="rules.hsl"
+                            @input="(v) => updateColors(v, 'hsl')"
                             dense
                     />
-                    <v-autocomplete
-                            v-model="_keyword"
+                    <v-combobox
+                            :value="keyword"
                             outlined
                             label="css keyword"
                             ref="keyword"
                             :items="colorsName"
                             :rules="rules.keyword"
+                            @change="(v) => updateColors(v, 'keyword')"
                             no-data-text="This is not an authorized color name."
                             dense
                     />
@@ -63,7 +67,7 @@
     export default {
         name: "ColorConverter",
         data: () => ({
-            rgb: {
+            rgbPicker: {
                 "r": 76,
                 "g": 175,
                 "b": 80
@@ -87,62 +91,123 @@
                     required,
                     v => !!colors[v] || 'Value should be from the list'
                 ]
-            }
+            },
+            hex: '#4CAF50',
+            rgb: undefined,
+            hsl: undefined,
+            keyword: undefined,
         }),
-        computed: {
-            _hex: {
-                get() {
-                    const result = convert.rgb.hex(this.rgb.r, this.rgb.g, this.rgb.b)
-                    return `#${result}`
-                },
-                set(value) {
-                    if (this.$refs.hex.validate()) {
-                        const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''))
-                        this.rgb = {r, g, b}
-                    }
-                }
+        mounted() {
+            this.updateColors(this.hex, 'hex');
+        },
+        methods: {
+            setHSL(r, g, b) {
+                const [h, s, l] = convert.rgb.hsl(r, g, b)
+                this.hsl = `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`;
             },
-            _rgb: {
-                get() {
-                    return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`
-                },
-                set(value) {
-                    if (this.$refs.rgb.validate()) {
+            setRGB(r, g, b) {
+                this.rgb = `rgb(${r}, ${g}, ${b})`;
+            },
+            setHEX(r, g, b) {
+                const result = convert.rgb.hex(r, g, b);
+                this.hex = `#${result}`
+            },
+            setKeyword(r, g, b) {
+                this.keyword = convert.rgb.keyword(r, g, b);
+            },
+            updateColors(value, fromType) {
+                if (this.$refs[fromType].validate()) {
+                    if (fromType === 'rgb') {
                         const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v));
-                        this.rgb = {r, g, b}
-                    }
-                }
-            },
-            _hsl: {
-                get() {
-                    const [h, s, l] = convert.rgb.hsl(this.rgb.r, this.rgb.g, this.rgb.b)
-                    return `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`
-                },
-                set(value) {
-                    if (this.$refs.hsl.validate()) {
+                        this.rgbPicker = {r, g, b}
+
+                        this.setHEX(r, g, b);
+                        this.setHSL(r, g, b);
+                        this.setKeyword(r, g, b);
+                    } else if (fromType === 'hex') {
+                        const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''));
+                        this.rgbPicker = {r, g, b}
+
+                        this.setRGB(r, g, b);
+                        this.setHSL(r, g, b);
+                        this.setKeyword(r, g, b);
+                    } else if (fromType === 'hsl') {
                         const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v));
                         const [r, g, b] = convert.hsl.rgb(h, s, l)
+                        this.rgbPicker = {r, g, b}
 
-                        this.rgb = {r, g, b}
-                    }
-                }
-            },
-            _keyword: {
-                get() {
-                    return convert.rgb.keyword(this.rgb.r, this.rgb.g, this.rgb.b)
-                },
-                set(value) {
-                    if (this.$refs.keyword.validate()) {
+                        this.setRGB(r, g, b);
+                        this.setHEX(r, g, b);
+                        this.setKeyword(r, g, b);
+                    } else if (fromType === 'keyword') {
                         try {
-                            const [r, g, b] = convert.keyword.rgb(value)
-                            this.rgb = {r, g, b}
+                            const [r, g, b] = convert.keyword.rgb(value);
+                            this.rgbPicker = {r, g, b}
+
+                            this.setRGB(r, g, b);
+                            this.setHEX(r, g, b);
+                            this.setHSL(r, g, b);
                         } catch (ignored) {
                             // ignored
                         }
                     }
                 }
             }
-        }
+        },
+        // computed: {
+        //     _hex: {
+        //         get() {
+        //             const result = convert.rgb.hex(this.rgb.r, this.rgb.g, this.rgb.b)
+        //             return `#${result}`
+        //         },
+        //         set(value) {
+        //             if (this.$refs.hex.validate()) {
+        //                 const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''))
+        //                 this.rgb = {r, g, b}
+        //             }
+        //         }
+        //     },
+        //     _rgb: {
+        //         get() {
+        //             return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`
+        //         },
+        //         set(value) {
+        //             if (this.$refs.rgb.validate()) {
+        //                 const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v));
+        //                 this.rgb = {r, g, b}
+        //             }
+        //         }
+        //     },
+        //     _hsl: {
+        //         get() {
+        //             const [h, s, l] = convert.rgb.hsl(this.rgb.r, this.rgb.g, this.rgb.b)
+        //             return `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`
+        //         },
+        //         set(value) {
+        //             if (this.$refs.hsl.validate()) {
+        //                 const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v));
+        //                 const [r, g, b] = convert.hsl.rgb(h, s, l)
+        //
+        //                 this.rgb = {r, g, b}
+        //             }
+        //         }
+        //     },
+        //     _keyword: {
+        //         get() {
+        //             return convert.rgb.keyword(this.rgb.r, this.rgb.g, this.rgb.b)
+        //         },
+        //         set(value) {
+        //             if (this.$refs.keyword.validate()) {
+        //                 try {
+        //                     const [r, g, b] = convert.keyword.rgb(value)
+        //                     this.rgb = {r, g, b}
+        //                 } catch (ignored) {
+        //                     // ignored
+        //                 }
+        //             }
+        //         }
+        //     }
+        // }
     }
 </script>