Color Picker

ColorPicker is a color selector supporting multiple color formats.

Basic usage

ColorPicker requires a string typed variable to be bound to v-model.

With default value

Without default value

---

<template>
  <b-space>
    <b-form-item label="With default value">
      <b-color-picker v-model="color1" />
    </b-form-item>
    <b-form-item label="Without default value">
      <b-color-picker v-model="color2" />
    </b-form-item>
  </b-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color1 = ref('#409EFF')
const color2 = ref()
</script>

Alpha

ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the show-alpha attribute.

---

<template>
  <b-color-picker v-model="color" show-alpha />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref('rgba(19, 206, 102, 0.8)')
</script>

Predefined colors

ColorPicker supports predefined color options

---

<template>
  <b-color-picker v-model="color" show-alpha :predefine="predefineColors" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
</script>

Sizes

---

<template>
  <b-space>
    <b-color-picker v-model="color" size="large" />
    <b-color-picker v-model="color" />
    <b-color-picker v-model="color" size="small" />
  </b-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const color = ref('409EFF')
</script>

Attributes

Name	Description	Type	Accepted Values	Default
model-value / v-model	binding value	string	—	—
disabled	whether to disable the ColorPicker	boolean	—	false
size	size of ColorPicker	string	large / default / small	—
large	size large	boolean	—	false
small	size small	boolean	—	false
show-alpha	whether to display the alpha slider	boolean	—	false
color-format	color format of v-model	string	hsl / hsv / hex / rgb	hex (when show-alpha is false)/ rgb (when show-alpha is true)
popper-class	custom class name for ColorPicker's dropdown	string	—	—
predefine	predefined color options	array	—	—
validate-event	whether to trigger form validation	boolean	-	true

Events

Name	Description	Parameters
change	triggers when input value changes	color value
active-change	triggers when the current active color changes	active color value