Color Picker

#Anatomy

• #default: Replace the inner controls. The group and hidden form input remain.
• #area: Replace the two-axis area.
• #hue: Replace the hue slider.
• #alpha: Replace the opacity slider.
• #field: Replace the color text input.
• #preview: Replace the selected-color preview.
• #swatches: Replace the optional preset palette.

#Usage

<script setup lang="ts">
import { ColorArea, ColorPicker, ColorSlider } from "akaza-ui";
import { ref } from "vue";
const color = ref("#56d799");
const areaUi = {
  root: "aspect-square w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring",
  area: "rounded-lg",
  thumb: "size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm",
};
const sliderUi = {
  root: "h-6 w-full rounded-md data-[akaza-disabled]:opacity-50",
  axis: "peer outline-none",
  track: "h-3 w-full rounded-full bg-muted",
  thumb:
    "size-6 rounded-full border-2 border-neutral-400 bg-white shadow-sm peer-data-[akaza-focus-visible]:ring-2 peer-data-[akaza-focus-visible]:ring-ring peer-data-[akaza-focus-visible]:ring-offset-2 peer-data-[akaza-focus-visible]:ring-offset-background",
};
</script>

<template>
  <div class="grid gap-4">
    <output class="text-sm text-muted-foreground">Current: {{ color }}</output>
    <ColorPicker
      v-model="color"
      :ui="{ root: 'grid w-full max-w-64 gap-3' }"
      aria-label="Brand color controls"
    >
      <ColorArea
        color-space="hsl"
        x-channel="hue"
        y-channel="saturation"
        :ui="areaUi"
        aria-label="Brand area"
      />
      <label class="grid gap-1 text-xs text-muted-foreground">
        Lightness
        <ColorSlider
          channel="lightness"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Lightness"
        />
      </label>
      <label class="grid gap-1 text-xs text-muted-foreground">
        Opacity
        <ColorSlider
          channel="alpha"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Opacity"
        />
      </label>
    </ColorPicker>
  </div>
</template>

#Examples

#Output format

Choose the format for v-model. You can still change hue when the selected color is gray or black.

<Dialog
  :ui="{
    overlay: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',
    header: 'flex items-center justify-between p-6 border-b',
    body: 'p-6',
    footer: 'flex justify-end gap-2 p-6 border-t',
  }"
>

#Popover composition

Put the picker in Popover's #content slot and its button in #trigger. Use separate models for the popup's open state and the color.

import './main.css'

#Read-only and disabled

These states retain the chosen value and prevent edits.

<template>
  <Accordion
    :items="items"
    type="multiple"
  />
</template>

See the live demo's code for the state and style objects used in these examples.

#Formats

Set format to choose the returned color string. It does not change which colors you can enter or which channels you edit. See supported formats. Changing the format keeps opacity and emits value-change with reason format. HEX uses eight digits for transparent colors; hexa uses eight digits for all colors.

HEX and RGB can lose colors outside sRGB. The control keeps the original color until you replace the model or enter a new value. Area and slider previews use sRGB. See precision and gamut for details.

Use a color value such as #56d799 or oklch(0.65 0.2 250). CSS variables, currentColor, and relative color expressions are not supported.

#Behavior

The picker renders inline. Use Popover to show it in a popup. Its controls share one color, including hue changes while the value is black or gray.

ColorArea, ColorSlider, and ColorField in a picker slot share its color and format when you omit their v-model. Adding a child model gives that control a separate color. Listen to the picker's value-change and value-commit events for shared changes. The picker submits one named form value; its default children do not submit extra values.

The default slot provides value, cssColor, format, isOutOfGamut, setValue(value), setChannels(space, changes), and getChannel(space, channel). Pass arguments when calling actions, for example @click="setValue('#ff0000')".

#API Reference

#Props

#Emits

#Slots

• #default: Replace the inner controls. The group and hidden form input remain.
• #area: Replace the two-axis area.
• #hue: Replace the hue slider.
• #alpha: Replace the opacity slider.
• #field: Replace the color text input.
• #preview: Replace the selected-color preview.
• #swatches: Replace the optional preset palette.

#UI Options

#Styling Hooks

Form state attributes: data-akaza-disabled, data-akaza-readonly, data-akaza-invalid, data-akaza-focused, data-akaza-touched, data-akaza-dirty, data-akaza-filled, and data-akaza-out-of-gamut. Each appears only when true.

Use class or ui.root to style the root. Use the other ui keys for inner parts. Set sizes, borders, and colors in your own styles.

#Keyboard

#Parity Notes

ColorPicker combines the color controls in one component. Reka shows a picker built from separate color primitives. The supplied Base UI reference has no color picker component.