
Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
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
tinycolor
exported fromvue-color
to 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 82,903 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
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.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.