# @ckpack/vue-color

> (vue3.0) 🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

Latest version **1.6.0** (published 2024-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ckpack/vue-color
pnpm add @ckpack/vue-color
yarn add @ckpack/vue-color
bun add @ckpack/vue-color
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2024-07-19 |
| First published | 2021-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 2 |
| Unpacked size | 348.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 188 |
| Author | chenkai |
| Maintainers | ckpack |
| Keywords | vue-color, color, vuejs |

## Links

- npm: https://www.npmjs.com/package/@ckpack/vue-color
- Repository: https://github.com/ckpack/vue-color
- Homepage: https://github.com/ckpack/vue-color#readme
- Issues: https://github.com/ckpack/vue-color/issues
- npm.io page: https://npm.io/package/@ckpack/vue-color

## Dependencies (2)

- [@ctrl/tinycolor](https://npm.io/package/@ctrl/tinycolor.md) ^3.6.0
- [material-colors](https://npm.io/package/material-colors.md) ^1.2.6

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.6.0 (latest) — 2024-07-19
- 1.5.2 — 2024-07-18
- 1.5.0 — 2023-06-15
- 1.4.1 — 2023-02-16
- 1.4.0 — 2023-02-16
- 1.3.0 — 2022-11-30
- 1.2.4 — 2022-10-17
- 1.2.3 — 2022-10-17
- 1.2.0 — 2022-07-11
- 1.1.9 — 2022-04-12
- 1.1.8 — 2022-02-22
- 1.1.7 — 2022-02-16
- 1.1.6 — 2022-02-14
- 1.1.5 — 2021-12-08
- 1.1.4 — 2021-10-21
- … 8 more at https://npm.io/package/@ckpack/vue-color/versions

## README

# vue-color 

> Modified based on [https://github.com/xiaokaike/vue-color](https://github.com/xiaokaike/vue-color) to support vue3.0

🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

![image](https://user-images.githubusercontent.com/30174970/114983369-1e5aa380-9ec3-11eb-9e77-b122d19f1ebd.png)

## [Demo](https://ckpack.github.io/vue-color)

## Use case

#### On demand

We can import components we actually need, making the project smaller than otherwise.

##### Import Directly

```html
<template>
  <Sketch v-model="colors"/>
</template>
<script setup>
import { ref } from 'vue';
import { Sketch } from '@ckpack/vue-color';

const colors = ref('#194D33A8'); // etc: { h: 150, s: 0.66, v: 0.30 }, { r: 255, g: 0, b: 0 }, '#194d33' 
</script>
```

##### Install on Demand Globally

```js
import { createApp } from 'vue';
import App from '@/App.vue';
import { Sketch, create } from '@ckpack/vue-color';

const app = createApp(App);
app.use(create({
  components: [Sketch],
}));
app.mount('#app');
```

#### Fully import

```js
import { createApp } from 'vue';
import App from '@/App.vue';
import VueColor from '@ckpack/vue-color';

const app = createApp(App);

app.use(VueColor);
app.mount('#app');
```

## [CHANGELOG](/CHANGELOG.md)

## License

vue-color is licensed under [The MIT License](LICENSE).

---
_Source: https://npm.io/package/@ckpack/vue-color · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._