		@@ -103,3 +103,2 @@ # vue-color
		<material-picker v-model="colors" @change-color="onChange"></material-picker>
		<material-picker v-model="colors" @change-color="onChange"></material-picker>
		<compact-picker v-model="colors" @change-color="onChange"></compact-picker>
		@@ -106,0 +105,0 @@ <swatches-picker v-model="colors" @change-color="onChange"></swatches-picker>

src/mixin/color.js

		import tinycolor from 'tinycolor2'

		function _colorChange (data, oldHue) {
		if (data.a && data.a > 1) {
		data.a = 1
		}
		var alpha = data && data.a
		var color

		data.a = data.a \|\| 1

		var color
		if (data.hex) {
		// hsl is better than hex between conversions
		if (data && data.hsl) {
		color = tinycolor(data.hsl)
		} else if (data && data.hex && data.hex.length > 0) {
		color = tinycolor(data.hex)
		color.setAlpha(data.a)
		} else {
		color = tinycolor(data)
		}

		if (color) color.setAlpha(alpha \|\| 1)

		var hsl = color.toHsl()
		var hsv = color.toHsv()

		if (hsl.s === 0) {
		@@ -23,2 +25,3 @@ hsl.h = data.h \|\| oldHue \|\| 0
		}

		return {
		@@ -31,3 +34,3 @@ hsl: hsl,
		source: data.source,
		a: data.a
		a: data.a \|\| color.getAlpha()
		}
		@@ -57,19 +60,8 @@ }
		this.val = _colorChange(newVal)
		// this.$emit('change', newVal)
		}
		},
		created () {
		// console.log(this.colors)
		/*
		Enforce the colorChange in case only HEX value is given.
		Guarantees that HEX value is uppercase and other values such
		as HSL or HSV exists and reflect the HEX value
		TODO accept any kind of color value, HEX, RGBA, HSL and others
		*/
		// this.colors = _colorChange(this.colors)
		},
		methods: {
		colorChange (data, oldHue) {
		this.oldHue = this.colors.hsl.h
		this.colors = _colorChange(data, oldHue \|\| this.oldHue)
		this.oldHue = this.colors.hsl.h
		},
		@@ -76,0 +68,0 @@ isValidHex (hex) {

.npmignore