diff --git a/package.json b/package.json
index d73af21..74bb863 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@caohenghu/vue-colorpicker",
-    "version": "1.2.4",
+    "version": "1.2.6",
     "description": "Colorpicker of Vue Components",
     "main": "src/index.js",
     "scripts": {
diff --git a/src/color/Alpha.vue b/src/color/Alpha.vue
index d1a5a49..270ab4f 100644
--- a/src/color/Alpha.vue
+++ b/src/color/Alpha.vue
@@ -2,18 +2,21 @@
     <div
         class="color-alpha"
         @mousedown.prevent.stop="selectAlpha"
+        @touchstart.prevent.stop="selectAlphaTouch"
     >
         <canvas ref="canvasAlpha" />
-        <div
-            :style="slideAlphaStyle"
-            class="slide"
-        />
+        <Slide :style="slideAlphaStyle" />
     </div>
 </template>
 
 <script>
 import mixin from './mixin'
+import Slide from './Slide.vue'
+
 export default {
+    components: {
+        Slide
+    },
     mixins: [mixin],
     props: {
         color: {
@@ -43,7 +46,7 @@ export default {
         color() {
             this.renderColor()
         },
-        'rgba.a'() {
+        'rgba'() {
             this.renderSlide()
         }
     },
@@ -68,37 +71,59 @@ export default {
 
             this.createLinearGradient('p', ctx, width, height, 'rgba(255,255,255,0)', this.color)
         },
+        changeStart () {
+            const { top } = this.$el.getBoundingClientRect()
+            this.hueTop = top
+        },
+        change (e) {
+            const clientY = e.clientY || e.touches[0].clientY
+            let y = clientY - this.hueTop
+
+            if (y < 0) {
+                y = 0
+            }
+            if (y > this.height) {
+                y = this.height
+            }
+
+            let a = parseFloat((y / this.height).toFixed(2))
+            this.$emit('selectAlpha', a)
+        },
+        changeEnd () {
+            delete this.hueTop
+        },
         renderSlide() {
+            const { r, g, b, a } = this.rgba
             this.slideAlphaStyle = {
-                top: this.rgba.a * this.height - 2 + 'px'
+                top: a * this.height - 2 + 'px',
+                background: `rgba(${r}, ${g}, ${b}, ${a})`
             }
         },
         selectAlpha(e) {
-            const { top: hueTop } = this.$el.getBoundingClientRect()
-
-            const mousemove = e => {
-                let y = e.clientY - hueTop
-
-                if (y < 0) {
-                    y = 0
-                }
-                if (y > this.height) {
-                    y = this.height
-                }
-
-                let a = parseFloat((y / this.height).toFixed(2))
-                this.$emit('selectAlpha', a)
-            }
-
-            mousemove(e)
+            this.changeStart()
+            this.change(e)
 
             const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove)
+                this.changeEnd()
+                document.removeEventListener('mousemove', this.change)
                 document.removeEventListener('mouseup', mouseup)
             }
 
-            document.addEventListener('mousemove', mousemove)
+            document.addEventListener('mousemove', this.change)
             document.addEventListener('mouseup', mouseup)
+        },
+        selectAlphaTouch(e) {
+            this.changeStart(e)
+            this.change(e)
+
+            const touchend = () => {
+                this.changeEnd()
+                document.removeEventListener('touchmove', this.change)
+                document.removeEventListener('touchend', touchend)
+            }
+
+            document.addEventListener('touchmove', this.change)
+            document.addEventListener('touchend', touchend)
         }
     }
 }
@@ -107,17 +132,7 @@ export default {
 <style lang="scss">
 .color-alpha {
     position: relative;
-    margin-left: 8px;
+    margin-left: 12px;
     cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 0;
-        top: 100px;
-        width: 100%;
-        height: 4px;
-        background: #fff;
-        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
-        pointer-events: none;
-    }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/color/Colors.vue b/src/color/Colors.vue
index cfabd49..d71f4ab 100644
--- a/src/color/Colors.vue
+++ b/src/color/Colors.vue
@@ -98,6 +98,10 @@ export default {
 .colors {
     padding: 0;
     margin: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
     &.history {
         margin-top: 10px;
         border-top: 1px solid #2e333a;
@@ -133,4 +137,4 @@ export default {
         }
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/color/Hue.vue b/src/color/Hue.vue
index b2134ec..0c447bf 100644
--- a/src/color/Hue.vue
+++ b/src/color/Hue.vue
@@ -2,17 +2,19 @@
     <div
         class="hue"
         @mousedown.prevent.stop="selectHue"
+        @touchstart.prevent.stop="selectHueTouch"
     >
         <canvas ref="canvasHue" />
-        <div
-            :style="slideHueStyle"
-            class="slide"
-        />
+        <Slide :style="slideHueStyle" />
     </div>
 </template>
 
 <script>
+import Slide from './Slide.vue'
 export default {
+    components: {
+        Slide
+    },
     props: {
         hsv: {
             type: Object,
@@ -25,7 +27,11 @@ export default {
         height: {
             type: Number,
             default: 152
-        }
+        },
+        color: {
+            type: String,
+            default: '#000000'
+        },
     },
     data() {
         return {
@@ -64,60 +70,77 @@ export default {
         },
         renderSlide() {
             this.slideHueStyle = {
-                top: (1 - this.hsv.h / 360) * this.height - 2 + 'px'
+                top: (1 - this.hsv.h / 360) * this.height - 2 + 'px',
+                background: this.color
             }
         },
-        selectHue(e) {
-            const { top: hueTop } = this.$el.getBoundingClientRect()
-            const ctx = e.target.getContext('2d')
+        changeStart (e) {
+            const { top } = this.$el.getBoundingClientRect()
+            this.hueTop = top
+            this.ctx = e.target.getContext('2d')
+        },
+        change (e) {
+            if (!this.hueTop || !this.ctx) return
 
-            const mousemove = e => {
-                let y = e.clientY - hueTop
+            const clientY = e.clientY || e.touches[0].clientY
+            let y = clientY - this.hueTop
 
-                if (y < 0) {
-                    y = 0
-                }
-                if (y > this.height) {
-                    y = this.height
-                }
+            if (y < 0) {
+                y = 0
+            }
+            if (y > this.height) {
+                y = this.height
+            }
 
-                this.slideHueStyle = {
-                    top: y - 2 + 'px'
-                }
-                // 如果用最大值，选择的像素会是空的，空的默认是黑色
-                const imgData = ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1)
-                const [r, g, b] = imgData.data
-                this.$emit('selectHue', { r, g, b })
+            this.slideHueStyle = {
+                top: y - 2 + 'px',
+                background: this.color
             }
 
-            mousemove(e)
+            // 如果用最大值，选择的像素会是空的，空的默认是黑色
+            const imgData = this.ctx.getImageData(0, Math.min(y, this.height - 1), 1, 1)
+            const [r, g, b] = imgData.data
+
+            this.$emit('selectHue', { r, g, b })
+        },
+        changeEnd () {
+            delete this.hueTop
+            delete this.ctx
+        },
+        selectHue(e) {
+            this.changeStart(e)
+            this.change(e)
 
             const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove)
+                this.changeEnd()
+                document.removeEventListener('mousemove', this.change)
                 document.removeEventListener('mouseup', mouseup)
             }
 
-            document.addEventListener('mousemove', mousemove)
+            document.addEventListener('mousemove', this.change)
             document.addEventListener('mouseup', mouseup)
+        },
+        selectHueTouch(e) {
+            this.changeStart(e)
+            this.change(e)
+
+            const touchend = () => {
+                this.changeEnd()
+                document.removeEventListener('touchmove', this.change)
+                document.removeEventListener('touchend', touchend)
+            }
+
+            document.addEventListener('touchmove', this.change)
+            document.addEventListener('touchend', touchend)
         }
     }
 }
 </script>
 
 <style lang="scss">
-.hue {
+  .hue {
     position: relative;
-    margin-left: 8px;
+    margin-left: 12px;
     cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 0;
-        top: 100px;
-        width: 100%;
-        height: 4px;
-        background: #fff;
-        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3);
-        pointer-events: none;
-    }
-}
+  }
 </style>
\ No newline at end of file
diff --git a/src/color/Index.vue b/src/color/Index.vue
index 7853f7e..7eb9107 100644
--- a/src/color/Index.vue
+++ b/src/color/Index.vue
@@ -15,6 +15,7 @@
             <Hue
                 ref="hue"
                 :hsv="hsv"
+                :color="modelHex"
                 :width="hueWidth"
                 :height="hueHeight"
                 @selectHue="selectHue"
@@ -138,7 +139,7 @@ export default {
             return this.theme === 'light'
         },
         totalWidth() {
-            return this.hueHeight + (this.hueWidth + 8) * 2
+            return this.hueHeight + (this.hueWidth + 12) * 2
         },
         previewWidth() {
             return this.totalWidth - (this.suckerHide ? 0 : this.previewHeight)
@@ -294,4 +295,4 @@ export default {
         display: flex;
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/color/Saturation.vue b/src/color/Saturation.vue
index 7e082e1..7788007 100644
--- a/src/color/Saturation.vue
+++ b/src/color/Saturation.vue
@@ -2,18 +2,21 @@
     <div
         class="saturation"
         @mousedown.prevent.stop="selectSaturation"
+        @touchstart.prevent.stop="selectSaturationTouch"
     >
         <canvas ref="canvasSaturation" />
-        <div
-            :style="slideSaturationStyle"
-            class="slide"
-        />
+        <Slide :style="slideSaturationStyle" />
     </div>
 </template>
 
 <script>
 import mixin from './mixin'
+import Slide from './Slide.vue'
+
 export default {
+    components: {
+        Slide
+    },
     mixins: [mixin],
     props: {
         color: {
@@ -60,51 +63,80 @@ export default {
         },
         renderSlide() {
             this.slideSaturationStyle = {
-                left: this.hsv.s * this.size - 5 + 'px',
-                top: (1 - this.hsv.v) * this.size - 5 + 'px'
+                left: this.hsv.s * this.size - 7 + 'px',
+                top: (1 - this.hsv.v) * this.size - 2 + 'px',
+                background: this.color
             }
         },
-        selectSaturation(e) {
-            const { top: saturationTop, left: saturationLeft } = this.$el.getBoundingClientRect()
-            const ctx = e.target.getContext('2d')
+        changeStart (e) {
+            const { top, left } = this.$el.getBoundingClientRect()
+            this.saturationLeft = left
+            this.saturationTop = top
+            this.ctx = e.target.getContext('2d')
+        },
+        change (e) {
+            if (!this.saturationLeft || !this.saturationTop || !this.ctx) return
 
-            const mousemove = e => {
-                let x = e.clientX - saturationLeft
-                let y = e.clientY - saturationTop
+            const clientX = e.clientX || e.touches[0].clientX
+            const clientY = e.clientY || e.touches[0].clientY
 
-                if (x < 0) {
-                    x = 0
-                }
-                if (y < 0) {
-                    y = 0
-                }
-                if (x > this.size) {
-                    x = this.size
-                }
-                if (y > this.size) {
-                    y = this.size
-                }
+            let x = clientX - this.saturationLeft
+            let y = clientY - this.saturationTop
 
-                // 不通过监听数据变化来修改dom，否则当颜色为#ffffff时，slide会跑到左下角
-                this.slideSaturationStyle = {
-                    left: x - 5 + 'px',
-                    top: y - 5 + 'px'
-                }
-                // 如果用最大值，选择的像素会是空的，空的默认是黑色
-                const imgData = ctx.getImageData(Math.min(x, this.size - 1), Math.min(y, this.size - 1), 1, 1)
-                const [r, g, b] = imgData.data
-                this.$emit('selectSaturation', { r, g, b })
+            if (x < 0) {
+                x = 0
+            }
+            if (y < 0) {
+                y = 0
+            }
+            if (x > this.size) {
+                x = this.size
+            }
+            if (y > this.size) {
+                y = this.size
             }
 
-            mousemove(e)
+            // 不通过监听数据变化来修改dom，否则当颜色为#ffffff时，slide会跑到左下角
+            this.slideSaturationStyle = {
+                left: x - 7 + 'px',
+                top: y - 2 + 'px',
+                background: this.color
+            }
+            // 如果用最大值，选择的像素会是空的，空的默认是黑色
+            const imgData = this.ctx.getImageData(Math.min(x, this.size - 1), Math.min(y, this.size - 1), 1, 1)
+            const [r, g, b] = imgData.data
+            this.$emit('selectSaturation', { r, g, b })
+        },
+        changeEnd () {
+            delete this.saturationTop
+            delete this.saturationLeft
+            delete this.ctx
+        },
+        selectSaturation(e) {
+            this.changeStart(e)
+            this.change(e)
 
             const mouseup = () => {
-                document.removeEventListener('mousemove', mousemove)
+                this.changeEnd()
+                document.removeEventListener('mousemove', this.change)
                 document.removeEventListener('mouseup', mouseup)
             }
 
-            document.addEventListener('mousemove', mousemove)
+            document.addEventListener('mousemove', this.change)
             document.addEventListener('mouseup', mouseup)
+        },
+        selectSaturationTouch (e) {
+            this.changeStart(e)
+            this.change(e)
+
+            const touchend = () => {
+                this.changeEnd()
+                document.removeEventListener('touchmove', this.change)
+                document.removeEventListener('touchend', touchend)
+            }
+
+            document.addEventListener('touchmove', this.change)
+            document.addEventListener('touchend', touchend)
         }
     }
 }
@@ -114,16 +146,5 @@ export default {
 .saturation {
     position: relative;
     cursor: pointer;
-    .slide {
-        position: absolute;
-        left: 100px;
-        top: 0;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        border: 1px solid #fff;
-        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
-        pointer-events: none;
-    }
 }
 </style>
\ No newline at end of file
diff --git a/src/color/Slide.vue b/src/color/Slide.vue
new file mode 100644
index 0000000..524abec
--- /dev/null
+++ b/src/color/Slide.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="slide">
+        <canvas
+            ref="canvasAlpha"
+            class="canvas"
+        />
+    </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+    mixins: [mixin],
+    mounted () {
+        const canvas = this.$refs.canvasAlpha
+        const canvasSquare = this.createAlphaSquare(5)
+        const ctx = canvas.getContext('2d')
+        const width = 13
+        const height = 13
+        canvas.width = width
+        canvas.height = height
+
+        ctx.fillStyle = ctx.createPattern(canvasSquare, 'repeat')
+        ctx.fillRect(0, 0, width, height)
+    }
+}
+</script>
+
+<style scoped>
+  .slide {
+    position: absolute;
+    left: 0;
+    top: 100px;
+    width: 13px;
+    height: 1px;
+    pointer-events: none;
+  }
+  .slide:after {
+    content: '';
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 100%;
+    box-shadow: 0 0 0 2px white, 0 2px 4px 2px rgb(0 0 0 / 50%);
+    transform: translate(1px, calc(-50% + 1px));
+    background: inherit;
+  }
+  .canvas {
+    transform: translate(1px, calc(-50% + 1px));
+    position: absolute;
+    border-radius: 100%
+  }
+</style>
\ No newline at end of file