ColorPicker

Uses Arco ColorPicker trigger colors while keeping the Element Plus panel layout. See the Element Plus docs for props.

Trigger & Sizes

Click a swatch to open the panel; size provides three trigger sizes.

<script setup lang="ts">
import { ref } from 'vue'
const color = ref('#165dff')
</script>

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

Alpha & Inline Panel

Use ElColorPickerPanel to display alpha and preset colors directly on the page.

<script setup lang="ts">
import { ref } from 'vue'
const color = ref('rgba(22, 93, 255, 0.8)')
const predefine = ['#165dff', '#00b42a', '#ff7d00', '#f53f3f']
</script>

<template>
  <el-color-picker-panel v-model="color" show-alpha :predefine="predefine" />
</template>

Differences from Arco

• The hue slider is vertical; color input and Clear / Confirm actions retain the Element Plus layout.
• Disabled swatches keep Element Plus opacity to distinguish the state.