Kappa / Color Picker

Accent color

#3F5FDB

<script setup>
import { ColorPicker, parseColor } from "@dicehub/kappa/components/color-picker";
</script>

<template>
  <ColorPicker.Root default-format="hsba" :default-value="parseColor('#3f5fdb')">
    <ColorPicker.Label>Accent color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" aria-label="Hex color" />
      <ColorPicker.Trigger aria-label="Open color picker">
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.HiddenInput name="accent" />
    <ColorPicker.Content>
      <ColorPicker.Area>
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
      </ColorPicker.Area>
      <ColorPicker.ChannelSlider channel="hue">
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.ChannelSlider channel="alpha">
        <ColorPicker.TransparencyGrid size="8px" />
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
    </ColorPicker.Content>
  </ColorPicker.Root>
</template>

Installation

Color Picker is part of Kappa. Ark UI owns the color model, focus, keyboard input, popover behavior, and form value. Kappa owns the visual design and compact size options.

Barrel

import { ColorPicker, parseColor } from "@dicehub/kappa";

Granular

import { ColorPicker, parseColor } from "@dicehub/kappa/components/color-picker";

Usage

Use parseColor for initial and controlled values. Add HiddenInput when the value must submit with a form.

Accent color

<script setup>
import { ColorPicker, parseColor } from "@dicehub/kappa/components/color-picker";
</script>

<template>
  <ColorPicker.Root default-format="hsba" :default-value="parseColor('#3f5fdb')">
    <ColorPicker.Label>Accent color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" aria-label="Hex color" />
      <ColorPicker.Trigger aria-label="Open color picker">
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.HiddenInput name="accent" />
    <ColorPicker.Content>
      <ColorPicker.Area>
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
      </ColorPicker.Area>
      <ColorPicker.ChannelSlider channel="hue">
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.ChannelSlider channel="alpha">
        <ColorPicker.TransparencyGrid size="8px" />
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
    </ColorPicker.Content>
  </ColorPicker.Root>
</template>

Composition

Typical part hierarchy

ColorPicker.Root
├── ColorPicker.Label
├── ColorPicker.Control
│   ├── ColorPicker.ChannelInput
│   └── ColorPicker.Trigger
│       └── ColorPicker.ValueSwatch
├── ColorPicker.HiddenInput
└── ColorPicker.Content
    ├── ColorPicker.Area
    │   ├── ColorPicker.AreaBackground
    │   └── ColorPicker.AreaThumb
    ├── ColorPicker.ChannelSlider
    │   ├── ColorPicker.ChannelSliderTrack
    │   └── ColorPicker.ChannelSliderThumb
    └── ColorPicker.SwatchGroup
        └── ColorPicker.SwatchTrigger
            └── ColorPicker.Swatch

Control groups the channel input and popup trigger.
Area changes two channels. Channel sliders change one channel.
Content includes positioning and teleports to body by default.
SwatchTrigger requires a color value. Nest Swatch and SwatchIndicator inside it.

Examples

Inline

Keep the full picker visible when color is a primary task.

Surface color

Hue170.94°

Opacity100%

<template>
  <ColorPicker.Root inline default-format="hsba" :default-value="parseColor('#157f6f')">
    <ColorPicker.Label>Surface color</ColorPicker.Label>
    <ColorPicker.Content :teleport="false">
      <ColorPicker.Area>
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
      </ColorPicker.Area>
      <!-- Add channel sliders and inputs. -->
    </ColorPicker.Content>
  </ColorPicker.Root>
</template>

Input Only

Use the color model and form value without a popup.

Annotation color

<template>
  <ColorPicker.Root :default-value="parseColor('#b54708')">
    <ColorPicker.Label>Annotation color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" aria-label="Annotation color in hexadecimal" />
      <ColorPicker.Trigger aria-label="Color preview"><ColorPicker.ValueSwatch /></ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.HiddenInput name="annotation-color" />
  </ColorPicker.Root>
</template>

Sizes

Match compact toolbars, standard forms, or larger touch targets.

base

<template>
  <ColorPicker.Root size="sm" :default-value="parseColor('#157f6f')">
    <ColorPicker.Control>…</ColorPicker.Control>
    <ColorPicker.Content>…</ColorPicker.Content>
  </ColorPicker.Root>
  <ColorPicker.Root size="base" :default-value="parseColor('#3f5fdb')">
    <ColorPicker.Control>…</ColorPicker.Control>
    <ColorPicker.Content>…</ColorPicker.Content>
  </ColorPicker.Root>
  <ColorPicker.Root size="lg" :default-value="parseColor('#b54708')">
    <ColorPicker.Control>…</ColorPicker.Control>
    <ColorPicker.Content>…</ColorPicker.Content>
  </ColorPicker.Root>
</template>

States

Disabled, read-only, and invalid states remain distinct.

Disabled

Read only

Invalid

<template>
  <ColorPicker.Root disabled :default-value="parseColor('#667085')">…</ColorPicker.Root>
  <ColorPicker.Root read-only :default-value="parseColor('#157f6f')">…</ColorPicker.Root>
  <ColorPicker.Root invalid :default-value="parseColor('#b42318')">…</ColorPicker.Root>
</template>

Accessibility

Use Label for the visible accessible name.
Add an accessible name to every channel input and trigger when visible text does not name it.
Arrow keys change focused area and slider thumbs. Page keys make larger slider changes.
Disabled, read-only, invalid, focus-visible, dark, and forced-color states remain distinct.
The popup restores focus to its trigger after dismissal.

See the official Ark UI Color Picker documentation for the complete behavior contract.

API Reference

ColorPicker.Root

Prop	Type	Default	Description
`defaultValue / modelValue`	`Color`	`parseColor("#000000") / —`	Initial or controlled color value.
`defaultFormat / format`	`"rgba" \| "hsla" \| "hsba"`	`"rgba"`	Initial or controlled channel format.
`defaultOpen / open`	`boolean`	`false / —`	Initial or controlled popover state.
`inline`	`boolean`	`false`	Keeps the picker content in the document flow.
`closeOnSelect`	`boolean`	`false`	Closes the popover after a swatch selection.
`disabled / readOnly / invalid / required`	`boolean`	`false`	Form and interaction states owned by Ark UI.
`name`	`string`	`—`	Name used by HiddenInput for native form submission.
`positioning`	`PositioningOptions`	`bottom-start, 4px gutter`	Floating content placement and collision options.
`size`	`"sm" \| "base" \| "lg"`	`"base"`	Selects Kappa control geometry.

Parts

Part	Element	Description
`ColorPicker.Root / RootProvider`	`div`	Owns the color, format, popover, and form state.
`ColorPicker.Label / Control`	`label / div`	Names and groups the input and trigger.
`ColorPicker.ChannelInput`	`input`	Edits a color channel, hexadecimal value, or CSS color.
`ColorPicker.Trigger / ValueSwatch / ValueText`	`button / span`	Opens the popover and presents the current value.
`ColorPicker.Content`	`div`	Token-styled, teleported popover surface.
`ColorPicker.Area / AreaBackground / AreaThumb`	`div`	Two-axis color selection surface.
`ColorPicker.ChannelSlider / Track / Thumb`	`div`	Single-channel pointer and keyboard control.
`ColorPicker.FormatSelect / FormatTrigger / View`	`select / button / div`	Switches and groups color formats.
`ColorPicker.SwatchGroup / SwatchTrigger / Swatch / SwatchIndicator`	`div / button`	Preset color choices and selected state.
`ColorPicker.TransparencyGrid / EyeDropperTrigger`	`div / button`	Alpha backdrop and browser eye-dropper action.
`ColorPicker.HiddenInput / Context`	`input / slot`	Native form value and renderless Ark API.

Events

Event	Payload	Description
`update:modelValue / valueChange`	`Color / ColorPickerValueChangeDetails`	Reports color changes during interaction.
`valueChangeEnd`	`ColorPickerValueChangeDetails`	Reports the end of a drag or keyboard change.
`update:open / openChange`	`boolean / ColorPickerOpenChangeDetails`	Reports popover state changes.
`update:format / formatChange`	`ColorFormat / ColorPickerFormatChangeDetails`	Reports format changes.

Data Attributes

Attribute	Value	Description
`data-slot`	`"color-picker" and part names`	Stable Kappa selectors for the root and parts.
`data-state`	`"open" \| "closed" \| "checked"`	Popover and selected-swatch state.
`data-disabled / data-invalid / data-readonly`	`present`	Interaction and validation states.
`data-size`	`"sm" \| "base" \| "lg"`	Resolved Kappa control size.
`data-channel`	`color channel`	Channel identity on inputs and sliders.

Exports

Export	Description
`ColorPicker`	Compound Ark-backed color selection control.
`ColorPickerRoot / Content / Control / Area / ChannelSlider`	Named root, popup, and selection parts.
`ColorPickerSwatch* / ChannelInput / Format*`	Preset, input, and format parts.
`ColorPickerProps / ColorPickerEmits / *Props`	Public Vue contracts.
`ColorPickerSize / COLOR_PICKER_*`	Kappa geometry options and defaults.
`parseColor / useColorPicker / useColorPickerContext / colorPickerAnatomy`	Ark UI color and composition utilities.