diff --git a/types/vue-color/index.d.ts b/types/vue-color/index.d.ts
new file mode 100644
index 0000000000..8c85b6238d
--- /dev/null
+++ b/types/vue-color/index.d.ts
@@ -0,0 +1,24 @@
+// Type definitions for vue-color 2.4
+// Project: https://github.com/xiaokaike/vue-color#readme
+// Definitions by: My Self <https://github.com/me>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import Vue from 'vue';
+
+export const version: string;
+export class Compact extends Vue {}
+export class Material extends Vue {}
+export class Slider extends Vue {}
+export class Swatches extends Vue {}
+export class Photoshop extends Vue {}
+export class Sketch  extends Vue {}
+export class Chrome extends Vue {}
+
+// those exports aren't specified in the documentation but still exported.
+// export class Grayscale extends Vue {}
+// export class Alpha  extends Vue {}
+// export class Checkboard  extends Vue {}
+// export class EditableInput  extends Vue {}
+// export class Hue  extends Vue {}
+// export class Saturation extends Vue {}
+// export class ColorMixin extends Vue {}
diff --git a/types/vue-color/package.json b/types/vue-color/package.json
new file mode 100644
index 0000000000..faefc1b2f7
--- /dev/null
+++ b/types/vue-color/package.json
@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "dependencies": {
+    "vue": ">=2.0.0"
+  }
+}
diff --git a/types/vue-color/tsconfig.json b/types/vue-color/tsconfig.json
new file mode 100644
index 0000000000..afb844324c
--- /dev/null
+++ b/types/vue-color/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "vue-color-tests.ts"
+    ]
+}
diff --git a/types/vue-color/tslint.json b/types/vue-color/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/vue-color/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/vue-color/vue-color-tests.ts b/types/vue-color/vue-color-tests.ts
new file mode 100644
index 0000000000..7b1ab0e394
--- /dev/null
+++ b/types/vue-color/vue-color-tests.ts
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import {
+    Material,
+    Compact,
+    Swatches,
+    Slider,
+    Sketch,
+    Chrome,
+    Photoshop
+} from 'vue-color';
+
+const colors = '#194d33';
+
+new Vue({
+    el: '#app',
+    components: {
+        'material-picker': Material,
+        'compact-picker': Compact,
+        'swatches-picker': Swatches,
+        'slider-picker': Slider,
+        'sketch-picker': Sketch,
+        'chrome-picker': Chrome,
+        'photoshop-picker': Photoshop
+    },
+    template: `
+        <material-picker v-model="colors"></material-picker>
+        <compact-picker v-model="colors"></compact-picker>
+        <swatches-picker v-model="colors"></swatches-picker>
+        <slider-picker v-model="colors"></slider-picker>
+        <sketch-picker v-model="colors"></sketch-picker>
+        <chrome-picker v-model="colors"></chrome-picker>
+        <photoshop-picker v-model="colors"></photoshop-picker>
+    `,
+    data() {
+        return { colors };
+    }
+});