
## Alpha Channel

```vue
<template>
  <el-color-picker v-model="color" show-alpha />
</template>

<script setup>
import { ref } from 'vue'

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

Predefined Colors

<template>
  <el-color-picker
    v-model="color"
    :predefine="predefineColors"
  />
</template>

<script setup>
import { ref } from 'vue'

const color = ref('#409EFF')
const predefineColors = [
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585'
]
</script>

Sizes

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

Color Formats

<template>
  <el-color-picker v-model="color" color-format="rgb" />
</template>

<script setup>
import { ref } from 'vue'

const color = ref('rgb(64, 158, 255)')
</script>

API Reference

Attributes

Name	Description	Type	Default
model-value / v-model	Binding value	`string`	—
disabled	Disabled	`boolean`	`false`
clearable	Show clear button	`boolean`	`true`
size	Size	`'large' \| 'default' \| 'small'`	—
show-alpha	Show alpha slider	`boolean`	`false`
color-format	Color format	`'rgb' \| 'prgb' \| 'hex' \| 'hex3' \| 'hex4' \| 'hex6' \| 'hex8' \| 'name' \| 'hsl' \| 'hsv'`	`'hex'` or `'rgb'`
predefine	Predefined colors	`string[]`	—
validate-event	Trigger form validation	`boolean`	`true`

Events

Name	Description	Type
change	Value changes	`(value: string) => void`
active-change	Active color changes	`(value: string) => void`
focus	Component focuses	`(event: FocusEvent) => void`
blur	Component blurs	`(event: FocusEvent) => void`
clear	Clear button clicked	`() => void`

Exposes

Name	Description	Type
color	Current color object	`Color`
show	Show picker	`() => void`
hide	Hide picker	`() => void`
focus	Focus picker	`() => void`
blur	Blur picker	`() => void`

Best Practices

Use show-alpha for transparent colors
Use predefine for brand colors
Use color-format for specific format needs

el-color-picker

ColorPicker Component

When to Use

Basic Usage