ColorPicker-Demo

#4F6BEDCC

Ring

Box

HSV

RGB

Red

Green

Blue

Opacity

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

const color = ref('#4F6BEDCC');
const colorMode = ref<'ring' | 'box'>('ring');
</script>

<template>
  <fv-color-picker
    v-model="color"
    :type="colorMode"
  />
</template>

ColorPicker-Color Info

`v-model` keeps returning a hex string. If you need more detail, `update:modelValue` now passes a second argument with `hex`, `rgba`, and `hsla`, and `color-info` emits the same object directly.

HSV

RGB

Red

Green

Blue

Opacity

{
  "hex": "#6B69D6CC",
  "rgba": {
    "r": 107,
    "g": 105,
    "b": 214,
    "a": 0.8
  },
  "hsla": {
    "h": 241.1,
    "s": 57.59,
    "l": 62.55,
    "a": 0.8
  }
}

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

const color = ref('#6B69D6CC');

function handleUpdate(value: string, info?: {
  hex: string;
  rgba: { r: number; g: number; b: number; a: number };
  hsla: { h: number; s: number; l: number; a: number };
}) {
  console.log(value);
  console.log(info);
}
</script>

<template>
  <fv-color-picker
    v-model="color"
    @update:modelValue="handleUpdate"
  />
</template>

ColorPicker-Hide Fields

Use `hideFields` when you want the picker UI without the lower numeric editor and mode switcher.

<fv-color-picker
  v-model="color"
  hideFields
/>

ColorPicker-Control Sliders

The value, saturation, and alpha sliders can be toggled independently, so the picker can be simplified for different product flows.

<fv-color-picker
  v-model="color"
  hideFields
  :showValueSlider="false"
  :showSaturationSlider="false"
  :showAlphaSlider="true"
/>

ColorPicker-Ring Only

Set `type="ring"` when you prefer circular hue selection instead of the rectangular area.

HSV

RGB

Red

Green

Blue

Opacity

<fv-color-picker
  v-model="color"
  type="ring"
/>

Properties

Property	Type	Required	Default	Description
disabled	boolean	No	false	Disables the component.
lang	string	No	"global"	Inherits the global language setting.
modelValue	string	No	undefined	The bound color string. Supports #RRGGBB and #RRGGBBAA.
theme	string	No	'global'	Theme style. Supports global, light, dark, system, and custom.
type	'box' | 'ring'	No	'box'	Defines the color area interaction mode.
foreground	string	No	''	Accent color used by the inner controls.
hideFields	boolean	No	false	Hides the lower fields section with mode and numeric inputs.
showValueSlider	boolean	No	true	Shows or hides the value slider.
showSaturationSlider	boolean	No	true	Shows or hides the saturation slider.
showAlphaSlider	boolean	No	true	Shows or hides the alpha slider.

Emits

Event	Arguments	Description
update:modelValue	value: string, info?: { hex, rgba, hsla }	Updates the v-model string and optionally exposes structured color data as the second argument.
color-info	info: { hex, rgba, hsla }	Emits only the structured color object.