ColorPicker

Used for color value selection

Basic Usage

With default value

#1089ff

Without default value

Hide label

<template>
  <div flex>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">With default value</div>
      <b-color-picker v-model="color1" show-alpha color-format="hex"></b-color-picker>
      <div class="demonstration mb-5">{{ color1 }}</div>
    </div>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">Without default value</div>
      <b-color-picker v-model="color2" show-alpha></b-color-picker>
      <div class="demonstration mb-5">{{ color2 }}</div>
    </div>
    <div class="block" style="width: 240px; margin-right: 20px">
      <div class="demonstration mb-5">Hide label</div>
      <b-color-picker v-model="color3" show-alpha :show-label="false"></b-color-picker>
      <div class="demonstration mb-5">{{ color3 }}</div>
    </div>
  </div>
</template>

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

const color1 = ref('#1089ff')
const color2 = ref(null)
const color3 = ref(null)
</script>

With Alpha/opacity

Supports Alpha/opacity selection

With Alpha/opacity

<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <div class="demonstration mb-5">With Alpha/opacity</div>
      <b-color-picker v-model="color" show-alpha></b-color-picker>
    </div>
  </div>
</template>

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

const color = ref('rgba(45,140,240,0.45)')
</script>

With Preset Colors

Provides preset color swatches

<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color1" show-alpha :colors="colors1"></b-color-picker>
    </div>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color2" show-alpha :colors="colors2"></b-color-picker>
    </div>
  </div>
</template>

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

const color1 = ref('#2d8cf0')
const color2 = ref('#2d8cf0')
const colors1 = [
  '#1089ff',
  '#52c41a',
  '#fa8c16',
  '#f5222d',
  '#2f54eb',
  '#faad14',
  '#722ed1',
  '#eb2f96',
  '#13c2c2',
  '#fadb14',
  '#a0d911',
  '#fa541c',
  '#eaff8f',
  '#bae7ff',
  '#efdbff',
  '#ffd6e7',
  '#ff1885',
  '#fff506',
  '#00bcd4',
  '#f06292',
  '#cb6c00',
  '#607d8b',
  '#000000',
  '#ffffff'
]
const colors2 = [
  '#311B92',
  '#512DA8',
  '#673AB7',
  '#9575CD',
  '#D1C4E9',
  '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)'
]
</script>

Disabled State

Sets the disabled state

  

<template>
  <div flex>
    <div class="block" style="width: 200px; margin-right: 20px">
      <b-color-picker v-model="color" disabled></b-color-picker>
      &nbsp;&nbsp;
    </div>
  </div>
</template>

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

const color = ref('#1089ff')
</script>

Different Sizes

Four different sizes

<template>
  <div>
    <div flex="cross:center" class="mb-16">
      <div class="mr-16">
        <b-color-picker v-model="color" size="large"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" size="small"></b-color-picker>
      </div>
      <div>
        <b-color-picker v-model="color" size="mini"></b-color-picker>
      </div>
    </div>
    <div flex="cross:center">
      <div class="mr-16">
        <b-color-picker v-model="color" size="large" :show-label="false"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" :show-label="false"></b-color-picker>
      </div>
      <div class="mr-16">
        <b-color-picker v-model="color" size="small" :show-label="false"></b-color-picker>
      </div>
      <div>
        <b-color-picker v-model="color" size="mini" :show-label="false"></b-color-picker>
      </div>
    </div>
  </div>
</template>

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

const color = ref('#1089ff')
</script>

Props

Parameter	Description	Type	Options	Default
value / v-model	Bound value	string	—	—
disabled	Disable d	boolean	—	false
size	size	string	—	medium / small / mini
show-alpha	Whether to support Alpha/opacity selection	boolean	—	false
color-format	Color format written to 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 dropdown	string	—	—
colors	Preset colors	array	—	—

Events

Event Name	Description	Callback Parameters
change	Triggers when bound value changes	Current value
active-change	Triggers when the currently displayed color in the panel changes	Currently displayed color value