useColor

Use useColor to convert color strings and edit their channels. It does not render controls. Akaza's color components use it to share color state.

#Getting Started

<script setup lang="ts">
import { Collapsible } from 'akaza-ui'
</script>

<template>
  <Collapsible :ui="{ trigger: 'px-4 py-3 hover:bg-neutral-50' }">
    <template #trigger="{ isOpen }">
      <span>Advanced settings</span>
    </template>

    <template #icon="{ isOpen }">
      <svg :class="{ 'rotate-180': isOpen }" .../>
    </template>

    <template #content>
      <p>Hidden until the trigger is activated.</p>
    </template>
  </Collapsible>
</template>

Pass the model ref, not value.value. You can pass a ref or getter for format. Each call has its own state.

#Formats

Set format to choose the returned color string. You can enter a color in any supported format. Color components use the chosen format for model updates, events, and form values.

Use COLOR_FORMATS to build a format selector. You can also enter CSS color names, transparent, and short HEX values. HSB/HSV supports channel editing but is not a CSS output format.

CSS variables, currentColor, relative color expressions, gradients, and URLs are not supported. The same input rules apply during SSR.

#Precision and Gamut

useColor keeps more precision than the returned string. Editing does not round the color on each step. It remembers hue and saturation when you pass through black, and hue when you pass through gray. Replacing the model or entering a valid text value replaces the stored color.

RGB and HEX cannot represent all LCH, OKLCH, or Display P3 colors. These outputs clip colors to sRGB. Changing the format back restores the original color while you keep the same useColor instance. If you store only the HEX string and create a new instance, you lose that extra color information.

isOutOfGamut tells you whether the color falls outside sRGB. Areas and slider gradients show sRGB previews. Swatches use CSS OKLCH; their appearance depends on the browser and display.

#API Reference

#Arguments

#Returned State

#Actions

Reasons default to programmatic; components also use input, keyboard, pointer, blur, enter, format, select, and reset. Methods requiring values must be called with explicit arguments, not bound directly as native event handlers.

#Channels

Default steps are 1, except OKLab a/b and OKLCH chroma, which use 0.001. Editor bounds are interaction ranges, not limits on the CSS color literals accepted by setValue.

#Scope and Accessibility

Call useColor in component setup or an effect scope so Vue cleans it up. It supports SSR and does not access the DOM, storage, or network.

This composable does not provide keyboard behavior or ARIA by itself. Use ColorPicker, ColorField, ColorArea, ColorSlider, or ColorSwatchPicker for complete rendered controls.