Ark UI

Usage

To get started, import the necessary components from the package:

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaGradient,
  ColorPickerAreaThumb,
  ColorPickerChannelInput,
  ColorPickerChannelSliderBackground,
  ColorPickerChannelSliderThumb,
  ColorPickerChannelSliderTrack,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSwatch,
  ColorPickerSwatchBackground,
  ColorPickerSwatchGroup,
} from '@ark-ui/react'

Here is an example of how to use the Color Picker component:

import { useState } from 'react'
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaGradient,
  ColorPickerAreaThumb,
  ColorPickerChannelInput,
  ColorPickerChannelSliderBackground,
  ColorPickerChannelSliderThumb,
  ColorPickerChannelSliderTrack,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSwatch,
  ColorPickerSwatchBackground,
  ColorPickerSwatchGroup,
} from '@ark-ui/react'

const Basic = () => (
  <ColorPicker defaultValue="hsl(10, 81%, 59%)">
    {(api) => {
      const [hue, saturation, lightness] = api.channels
      return (
        <ColorPickerContent>
          <output>
            <ColorPickerSwatch value={api.value} readOnly />
          </output>
          <ColorPickerArea xChannel={saturation} yChannel={lightness}>
            <ColorPickerAreaGradient />
            <ColorPickerAreaThumb />
          </ColorPickerArea>

          <ColorPickerChannelSliderTrack channel={hue}>
            <ColorPickerChannelSliderBackground />
            <ColorPickerChannelSliderThumb />
          </ColorPickerChannelSliderTrack>

          <ColorPickerChannelSliderTrack channel="alpha">
            <ColorPickerChannelSliderBackground />
            <ColorPickerChannelSliderThumb />
          </ColorPickerChannelSliderTrack>

          <ColorPickerChannelInput channel={hue} />
          <ColorPickerChannelInput channel={saturation} />
          <ColorPickerChannelInput channel={lightness} />
          <ColorPickerChannelInput channel="alpha" />

          <ColorPickerSwatchGroup>
            <ColorPickerSwatch value="#123123">
              <ColorPickerSwatchBackground />
            </ColorPickerSwatch>
            <ColorPickerSwatch value="#ff1321">
              <ColorPickerSwatchBackground />
            </ColorPickerSwatch>
          </ColorPickerSwatchGroup>

          <ColorPickerEyeDropperTrigger>Pick color</ColorPickerEyeDropperTrigger>
        </ColorPickerContent>
      )
    }}
  </ColorPicker>
)

import { createSignal } from 'solid-js'
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaGradient,
  ColorPickerAreaThumb,
  ColorPickerChannelInput,
  ColorPickerChannelSliderBackground,
  ColorPickerChannelSliderThumb,
  ColorPickerChannelSliderTrack,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSwatch,
  ColorPickerSwatchBackground,
  ColorPickerSwatchGroup,
} from '@ark-ui/solid'

const Basic = () => (
  <ColorPicker value="hsla(10, 81%, 59%, 1)">
    {(api) => {
      const [hue, saturation, lightness] = api().channels
      return (
        <ColorPickerContent>
          <ColorPickerArea xChannel={saturation} yChannel={lightness}>
            <ColorPickerAreaGradient />
            <ColorPickerAreaThumb />
          </ColorPickerArea>

          <ColorPickerChannelSliderTrack channel={hue}>
            <ColorPickerChannelSliderBackground />
            <ColorPickerChannelSliderThumb />
          </ColorPickerChannelSliderTrack>

          <ColorPickerChannelSliderTrack channel="alpha">
            <ColorPickerChannelSliderBackground />
            <ColorPickerChannelSliderThumb />
          </ColorPickerChannelSliderTrack>

          <ColorPickerChannelInput channel={hue} />
          <ColorPickerChannelInput channel={saturation} />
          <ColorPickerChannelInput channel={lightness} />
          <ColorPickerChannelInput channel="alpha" />

          <ColorPickerSwatchGroup>
            <ColorPickerSwatch value="hsla(153, 46%, 13%, 1)">
              <ColorPickerSwatchBackground />
            </ColorPickerSwatch>
            <ColorPickerSwatch value="hsla(356, 100%, 54%, 1)">
              <ColorPickerSwatchBackground />
            </ColorPickerSwatch>
          </ColorPickerSwatchGroup>
          <ColorPickerEyeDropperTrigger>Pick color</ColorPickerEyeDropperTrigger>
        </ColorPickerContent>
      )
    }}
  </ColorPicker>
)

<script setup lang="ts">
import { ref, type UnwrapRef } from 'vue'
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaGradient,
  ColorPickerAreaThumb,
  ColorPickerChannelInput,
  ColorPickerChannelSliderBackground,
  ColorPickerChannelSliderThumb,
  ColorPickerChannelSliderTrack,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSwatch,
  ColorPickerSwatchBackground,
  ColorPickerSwatchGroup,
  type ColorPickerContext,
} from '@ark-ui/vue'

const colorPickerValue = ref('hsla(200, 81%, 59%, 0.5)')
</script>

<template>
  <ColorPicker
    v-model="colorPickerValue"
    v-slot="{ channels: [hue, saturation, lightness], value }: UnwrapRef<ColorPickerContext>"
  >
    <ColorPickerContent>
      <output>
        <div>Color: {{ value }}</div>
      </output>
      <ColorPickerArea :xChannel="saturation" :yChannel="lightness">
        <ColorPickerAreaGradient />
        <ColorPickerAreaThumb />
      </ColorPickerArea>

      <ColorPickerSwatch :value="value" readOnly />

      <ColorPickerChannelSliderTrack :channel="hue">
        <ColorPickerChannelSliderBackground />
        <ColorPickerChannelSliderThumb />
      </ColorPickerChannelSliderTrack>

      <ColorPickerChannelSliderTrack channel="alpha">
        <ColorPickerChannelSliderBackground />
        <ColorPickerChannelSliderThumb />
      </ColorPickerChannelSliderTrack>

      <ColorPickerChannelInput :channel="hue" />
      <ColorPickerChannelInput :channel="saturation" />
      <ColorPickerChannelInput :channel="lightness" />

      <ColorPickerChannelInput channel="alpha" />
      <ColorPickerChannelInput channel="hue" />

      <ColorPickerSwatchGroup>
        <ColorPickerSwatch value="#123123">
          <ColorPickerSwatchBackground />
        </ColorPickerSwatch>
        <ColorPickerSwatch value="#ff1321">
          <ColorPickerSwatchBackground />
        </ColorPickerSwatch>
      </ColorPickerSwatchGroup>

      <ColorPickerEyeDropperTrigger> Pick color </ColorPickerEyeDropperTrigger>
    </ColorPickerContent>
  </ColorPicker>
</template>

Controlled Color Picker

To create a controlled Color Picker component, manage the state of the current coclor using the value prop and update it when the onChange event handler is called:

import { useState } from 'react'
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaGradient,
  ColorPickerAreaThumb,
  ColorPickerChannelInput,
  ColorPickerChannelSliderBackground,
  ColorPickerChannelSliderThumb,
  ColorPickerChannelSliderTrack,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSwatch,
  ColorPickerSwatchBackground,
  ColorPickerSwatchGroup,
} from '@ark-ui/react'

const Controlled = () => {
  const [color, setColor] = useState('hsl(10, 81%, 59%)')

  return (
    <ColorPicker value={color} onValueChange={(details) => setColor(details.value)}>
      <ColorPickerContent>{/* ... */}</ColorPickerContent>
    </ColorPicker>
  )
}

import { createSignal } from 'solid-js'
import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaGradient,
  ColorPickerAreaThumb,
  ColorPickerChannelInput,
  ColorPickerChannelSliderBackground,
  ColorPickerChannelSliderThumb,
  ColorPickerChannelSliderTrack,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSwatch,
  ColorPickerSwatchBackground,
  ColorPickerSwatchGroup,
} from '@ark-ui/solid'

const Controlled = () => {
  const [color, setColor] = createSignal('hsl(10, 81%, 59%)')
  return (
    <ColorPicker value={color()} onValueChange={(details) => setColor(details.value)}>
      <ColorPickerContent>{/* ... */}</ColorPickerContent>
    </ColorPicker>
  )
}

Story not available

Conclusion

The Color Picker component offers a flexible and powerful solution for integrating color selection into your applications. With its comprehensive set of features and customizability, it can accommodate a wide range of use cases and designs.