A Vue3.x based color picker component with gradient bar control.

Last update: Dec 3, 2022

Related tags

Overview

a Vue3.x based color picker component.

English | 中文

Features

Supports 3 CSS background color modes: solid, linear-gradient and radial-gradient.
Supports color opacity(alpha) adjustment.
Supports gradient bar control, easily drag/add/delete the control points.
The EyeDropper can quickly pick any color from your screen. （supports Google Chrome version 95+）
Supports live preview.

Screenshot

demo.mov

Installation

npm i @mcistudio/vue-colorpicker

How to Use

Global Registration

main.js

import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/style.css'
createApp(App)
  .use(router)
  .use(ColorPicker)
  .mount("#app");

OR

Local Registration

HelloWorld.vue

<script setup>
import ColorPicker from '@mcistudio/vue-colorpicker'
import '@mcistudio/vue-colorpicker/dist/style.css'

<template>
  <ColorPicker></ColorPicker>
</template>

script>

demo

HelloWorld.vue

<template>
  <ColorPicker mode="mode" :degree="degree" :gradients="grad" @colorChanged="triggerChanged" />
template>

<script setup>
import ColorPicker from '@mcisutdio/vue-colorpicker'
import '@mcisutdio/vue-colorpicker/dist/style.css'
import { ref } from 'vue'
const mode = ref('linear')
const degree = ref(90)
const grad = ref([
  { id: 0, percent: 10, color: { r: 255, g: 10, b: 20, a: 1 } },
  { id: 1, percent: 100, color: { r: 59, g: 50, b: 240, a: 1 } },
])
function triggerChanged(color) {
  console.log('current color:', color)
}
script>

Props

Prop Name	Description	Type	Accepted Value	Default Value	Required
mode	color mode	String	solid linear radial	solid	No
degree	drgee value in Linear-gradient mode	Number	-	90	No
color	rgba color value in solid mode	String	-	{ r: 0, g: 0, b: 0, a: 1 }	No
gradients	gradient list	JSON Array	-	[ { percent: 0, color: { r: 255, g: 255, b: 255, a: 1 } } { percent: 100, color: { r: 0, g: 0, b: 0, a: 1 } } ]	No

Events

event Name	Description	Parameters
colorChanged	triggered when the color is changed	returnValue

`returnValue` examples:

Solid Mode

{
    "mode": "solid",
    "color": {
        "r": 0,
        "g": 0,
        "b": 0,
        "a": 1
    },
    "css": "background-color:rgba(0,0,0,1)"
}

Linear Mode

{
    "mode": "linear",
    "degree": 90,
    "color": [
        {
            "percent": 0,
            "color": {
                "r": 255,
                "g": 255,
                "b": 255,
                "a": 1
            }
        },
        {
            "percent": 100,
            "color": {
                "r": 0,
                "g": 0,
                "b": 0,
                "a": 1
            }
        }
    ],
    "css": "background-image:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%)"
}

Radial Mode

{
    "mode": "radial",
    "color": [
        {
            "percent": 0,
            "color": {
                "r": 255,
                "g": 255,
                "b": 255,
                "a": 1
            }
        },
        {
            "percent": 100,
            "color": {
                "r": 0,
                "g": 0,
                "b": 0,
                "a": 1
            }
        }
    ],
    "css": "background-image:radial-gradient(rgba(255,255,255,1) 0%,rgba(0,0,0,1) 100%)"
}

You might also like...

Radial Color Picker - Vue

Radial Color Picker - Vue Introduction Great UX starts with two basic principles - ease of use and simplicity. Selecting a color should be as easy as

83 Dec 28, 2022

🎨 Lightweight color picker for Vue 3

141 Jan 2, 2023

Color Picker app, created by tauri.

Color Picker 取色器 ✨ 特性一键取色并复制到剪贴板保留历史取色记录自定义颜色值类型（如：HEX, RGB 等）自定义取色快捷键（默认：F2）颜色值去重历史记录：左键单击显示颜色值，左键双击复制颜色值到剪贴板，右键单击删除颜色可隐藏界面取色软件安装包小，占用内存少 🌴

27 Sep 30, 2022

Color picker chrome-style only

one-colorpicker A Chrome-style ColorPicker Install $ npm install one-colorpicker Quick Start import {ColorPicker, ColorPanel} from 'one-colorpicker'

13 Sep 20, 2022

Color picker for vue using Tailwind v2

Vue Tailwind Color Picker Color picker for vue using Tailwind v2. Requires Tailwind Live demo Installation $ npm install vue-tailwind-color-picker $ y