# Color Area (/forms/color-area)





<ComponentPreview name="color-area-preskok-demo" description="Color area with hue slider and hex field." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/color-area
```

## Usage [#usage]

```tsx
import { ColorArea } from "@/components/ui/preskok-ui/color-area"
import { ColorField } from "@/components/ui/preskok-ui/color-field"
import { ColorSlider } from "@/components/ui/preskok-ui/color-slider"

export function ColorAreaExample() {
  return (
    <div className="flex flex-col gap-3">
      <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
      <ColorSlider colorSpace="hsb" channel="hue" />
      <ColorField aria-label="Hex" placeholder="#000000" />
    </div>
  )
}
```