A collection of efficient and customizable color pickers, designed for modern web development.
Explore the components in action: 👉 Open Live Demo
Dual Vue Compatibility – Supports both Vue 2.7 and Vue 3 out of the box
Modular & Tree-Shakable – Import only what you use
TypeScript Ready – Full typings for better DX
SSR-Friendly – Compatible with Nuxt and other SSR frameworks
Optimized for Accessibility – Built with keyboard navigation and screen readers in mind
Dark Mode Support – Built-in dark theme
npm install vue-color
# or
yarn add vue-color
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
// Import styles
import 'vue-color/style.css';
createApp(App).mount('#app')
<template>
<ChromePicker v-model="color" />
</template>
<script setup lang="ts">
import { ChromePicker } from 'vue-color'
const color = defineModel({
default: '#68CCCA'
});
</script>
If you plan to use vue-color with Vue 2.7, please refer to Use with Vue 2.7.
📘 For a full list of available components, see the Documentation.
All color pickers listed below can be imported as named exports from vue-color.
import { ChromePicker, CompactPicker, HueSlider /** ...etc */ } from 'vue-color';
| Component Name | Docs |
|---|---|
| ChromePicker | View |
| CompactPicker | View |
| GrayscalePicker | View |
| MaterialPicker | - |
| PhotoshopPicker | View |
| SketchPicker | View |
| SliderPicker | View |
| SwatchesPicker | View |
| TwitterPicker | View |
| HueSlider | View |
| AlphaSlider | - |
All color picker components (expect for <HueSlider />) in vue-color share a set of common props and events for handling color updates and synchronization.
Below we'll take <ChromePicker /> as an example to illustrate how to work with v-model.
v-model<template>
<ChromePicker v-model="color" />
</template>
<script setup>
import { ChromePicker } from 'vue-color'
const color = defineModel({
default: 'rgb(50, 168, 82)'
});
</script>
The v-model of vue-color accepts a variety of color formats as input. It will preserve the format you provide, which is especially useful if you need format consistency throughout your app.
const color = defineModel({
default: 'hsl(136, 54%, 43%)'
// or
default: '#32a852'
// or
default: '#32a852ff'
// or
default: { r: 255, g: 255, b: 255, a: 1 }
});
Under the hood, vue-color uses tinycolor2 to handle color parsing and conversion.
This means you can pass in any color format that tinycolor2 supports—and it will just work.
v-model:tinyColor<template>
<ChromePicker v-model:tinyColor="tinyColor" />
</template>
<script setup>
import { ChromePicker, tinycolor } from 'vue-color';
const tinyColor = defineModel('tinyColor', {
default: tinycolor('#F5F7FA')
});
</script>
In addition to plain color values, you can also bind a tinycolor2 instance using v-model:tinyColor.
This gives you full control and utility of the tinycolor API.
⚠️ Note: You must use the
tinycolorexported fromvue-colorto ensure compatibility with the library's internal handling.
Since vue-color relies on DOM interaction, components must be rendered client-side. Example for Nuxt:
<template>
<ClientOnly>
<ChromePicker />
</ClientOnly>
</template>
<script setup lang="ts">
import { ClientOnly } from '#components';
import { ChromePicker } from 'vue-color';
</script>
By default, vue-color uses CSS variables defined under the :root scope. To enable dark mode, simply add a .dark class to your HTML element:
<html class="dark">
<!-- your app -->
</html>
To use vue-color with Vue 2.7:
<template>
<ChromePicker v-model="color" />
</template>
<script>
import { ref } from 'vue'
// Note: use the Vue 2.7 specific entry point
import { ChromePicker } from 'vue-color/vue2'
export default {
setup() {
const color = ref('#5c8f94');
return { color };
}
}
</script>
The Vue 2.7 build is fully compatible with the Vue Composition API introduced in 2.7.
Make sure to use vue-color/vue2 as the import path, and include the correct stylesheet:
import vue-color/vue2/style.css in your main entry file.
Vue 2.7 has full TypeScript support, but vue-color does not include type declarations for the Vue 2.7 build.
You can work around this by manually adding the following shim:
// vue-color-shims.d.ts
declare module 'vue-color/vue2' {
import { Component } from 'vue';
import tinycolor from 'tinycolor2';
export const ChromePicker: Component;
export const SketchPicker: Component;
export const PhotoshopPicker: Component;
export const CompactPicker: Component;
export const GrayscalePicker: Component;
export const MaterialPicker: Component;
export const SliderPicker: Component;
export const TwitterPicker: Component;
export const SwatchesPicker: Component;
export const HueSlider: Component;
export const tinycolor: typeof tinycolor;
}
declare module '*.css' {
const content: { [className: string]: string };
export default content;
}
| Error / Symptom | Related Issue |
|---|---|
TS2742: The inferred type of 'default' cannot be named without a reference to ... (commonly triggered when using pnpm) | #278 |
Contributions are welcome! Please open issues or pull requests as needed.
FAQs
<img src="https://img.shields.io/github/stars/linx4200/vue-
The npm package vue-color receives a total of 75,669 weekly downloads. As such, vue-color popularity was classified as popular.
We found that vue-color demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.