# Color Picker

> A color swatch that blooms into a radial rosette of hue and pastel petals with a vertical lightness arc.

<demo-color-picker>



</demo-color-picker>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/color-picker.json"
```

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import ColorPicker from '~/components/ui/color-picker/ColorPicker.vue';

  const color = ref('#e8b64c');
</script>

<template>
  <ColorPicker v-model="color" />
</template>
```

Click the swatch to bloom the rosette: an outer ring of saturated hue petals,
an inner ring of pastels, and a center swatch showing the current color. Click
any petal to pick its hue, then drag the vertical arc on the right to set
lightness. `v-model` stays in sync as a hex string. Set `:open-on-hover="true"`
to bloom on hover instead of click.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        model-value
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#e8b64c'
      </code>
    </td>
    
    <td>
      Two-way bound hex color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        56
      </code>
    </td>
    
    <td>
      Diameter of the closed swatch button, in px
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hue-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        16
      </code>
    </td>
    
    <td>
      Number of saturated hue petals in the outer ring
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        open-on-hover
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Bloom on hover instead of click
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        update:modelValue
      </code>
    </td>
    
    <td>
      <code>
        value: string
      </code>
    </td>
    
    <td>
      Fired as the color changes (v-model)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        change
      </code>
    </td>
    
    <td>
      <code>
        value: string
      </code>
    </td>
    
    <td>
      Fired when a new color is committed
    </td>
  </tr>
</tbody>
</table>

## Credits

Inspired by the color picker interaction by [@nexvyn](https://x.com/nexvyn).