Preview Updated 2026-05-10

ColorPicker

HSV palette + hue slider + alpha slider + multi-format input — opens in a popover from a trigger or expands inline via panelOnly.

Basic usage

v-model binds a color string. Once open, you can drag on the HSV palette, adjust hue, switch between HEX / RGB / HSL formats, and edit the value as text. Preset swatches let you pick a color in one click.

背景

#3b82f6

<script setup lang="ts">
import { ref } from 'vue';
import { CfColorPicker } from '@chufix-design/vue';

const value = ref('#3b82f6');
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center;">
    <CfColorPicker v-model="value" />
    <span
      style="
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        box-shadow: inset 0 0 0 1px var(--line-1);
      "
      :style="{ background: value }"
    />
    <code style="font-size: 12px;">{{ value }}</code>
  </div>
</template>

import { useState } from 'react';
import { CfColorPicker } from '@chufix-design/react';

export default function Demo() {
const [value, setValue] = useState('#3b82f6');
return <CfColorPicker value={value} onChange={setValue} />;
}

Alpha

Enabling showAlpha adds an alpha slider; the output automatically switches to rgba() / hsla() / 8-digit HEX.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfColorPicker } from '@chufix-design/vue';

const value = ref('rgba(99, 102, 241, 0.6)');
</script>

<template>
  <CfColorPicker v-model="value" show-alpha default-format="rgb" />
</template>

<CfColorPicker value={value} showAlpha defaultFormat="rgb" onChange={setValue} />

Inline panel

panelOnly keeps the panel always expanded inline — common for settings sidebars or theme editors.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfColorPicker } from '@chufix-design/vue';

const value = ref('#10b981');
</script>

<template>
  <CfColorPicker v-model="value" panel-only show-alpha />
</template>

<CfColorPicker value={value} panelOnly showAlpha onChange={setValue} />

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`string`	`'#3b82f6'`	Color string; accepts hex / rgb / rgba / hsl / hsla
`defaultFormat`	`'hex' \| 'rgb' \| 'hsl'`	`'hex'`	Output format (auto switches to `-a` suffix or 8-digit HEX when alpha is on)
`showAlpha`	`boolean`	`false`	Whether to show the alpha slider
`presets`	`string[]`	12-color default palette	Custom preset swatches
`panelOnly`	`boolean`	`false`	Skip the trigger and render the panel directly
`disabled`	`boolean`	`false`	Disabled
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size (trigger only)

Events: update:modelValue / change (React: onChange).

Color parsing accepts #rgb #rgba #rrggbb #rrggbbaa rgb() rgba() hsl() hsla(). The input field re-parses on blur and falls back to the last valid value if it can’t be parsed.