diff --git a/src/plugins/colorExtend.js b/src/plugins/colorExtend.js
new file mode 100644
index 0000000..f3547b8
--- /dev/null
+++ b/src/plugins/colorExtend.js
@@ -0,0 +1,53 @@
+const hexReg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+const rgbReg = /^(rgb|rgba|RGB|RGBA)/
+
+/**
+ * @description           hex color to rgb / rgba color
+ * @param      {string}   rgba opacity
+ * @return     {string}   rgb / rgba color
+ */
+export function hexToRgb (hex, opacity) {
+  if (!hex || !hexReg.test(hex)) return false
+
+  hex = hex.toLowerCase().replace('#', '')
+
+  // deal 3bit hex color to 6bit hex color
+  hex.length === 3 && (hex = Array.from(hex).map(hexNum => hexNum + hexNum).join())
+
+  let rgb = []
+
+  for (let i = 0; i < 6; i += 2) {
+    rgb.push(parseInt(`0x${hex.slice(i, i + 2)}`))
+  }
+
+  rgb = rgb.join(',')
+
+  if (opacity) {
+    return `rgba(${rgb}, ${opacity})`
+  } else {
+    return `rgb(${rgb})`
+  }
+}
+
+/**
+ * @description           rgb / rgba color to hex color
+ * @return     {string}   hex color
+ */
+export function rgbToHex (rgb) {
+  if (!rgb || !rgbReg.test(rgb)) return false
+
+  rgb = rgb.toLowerCase().replace(/rgb\(|rgba\(|\)/g, '').split(',').slice(0, 3)
+
+  const hex = rgb.map((rgbNum) => Number(rgbNum).toString(16)).map((rgbNum) => rgbNum === '0' ? rgbNum + rgbNum : rgbNum).join('')
+
+  return `#${hex}`
+}
+
+const color = {
+  hexToRgb,
+  rgbToHex
+}
+
+export default function (Vue) {
+  Vue.prototype.color = color
+}
diff --git a/src/plugins/index.js b/src/plugins/index.js
index 8af570d..9156336 100644
--- a/src/plugins/index.js
+++ b/src/plugins/index.js
@@ -2,10 +2,13 @@ import methodsExtend from './methodsExtend'
 
 import canvasExtend from './canvasExtend'
 
+import colorExtend from './colorExtend'
+
 import axiosExtend from './axiosExtend'
 
 export default function (Vue) {
   methodsExtend(Vue)
   canvasExtend(Vue)
+  colorExtend(Vue)
   axiosExtend(Vue)
 }