# Color Picker

> Source: https://design.nanatec.co.ke/components/color-picker/
> A full-featured color selection component with alpha, swatches, multiple formats, an eyedropper, and a WCAG contrast checker.
> Status: beta
> Since: v0.0.14

A full-featured color selection component built on Lit. Combines a
saturation/value canvas, hue and alpha sliders, multi-format text input,
swatches, and an eyedropper into a single popover-driven control.

<span class="nana-status nana-status--beta">beta</span> <small>since v0.0.14</small>

## Example

```html
<nana-color-picker value="#3b82f6" alpha></nana-color-picker>
```

## Variants

The `variant` attribute switches the layout: `spectrum` (default), `grid`
(palette-first), or `swatch` (swatches only). Add `notrigger` to render inline
without the popover.

```html
<nana-color-picker variant="grid" value="#cc0000" notrigger></nana-color-picker>
<nana-color-picker variant="swatch" value="#10b981" swatches="#ef4444,#f59e0b,#10b981,#3b82f6,#6366f1,#8b5cf6"></nana-color-picker>
```

## Properties

## Methods

| Method | Returns | Description |
|---|---|---|
| `open()` / `close()` | `void` | Open or close the popover |
| `setValue(color)` | `void` | Set the value from any supported format |
| `getHex()` | `string` | Current value as `#rrggbb(aa)` |
| `getRGB()` | `{r,g,b,a}` | Current value as RGB(A) |
| `getHSL()` | `{h,s,l,a}` | Current value as HSL(A) |
| `getContrastRatio(against?)` | `number \| null` | WCAG contrast ratio against a color |

## Events

## Keyboard

| Key | Context | Action |
|---|---|---|
| Arrow keys | Canvas | Nudge saturation/value by 1 (Shift: 10) |
| Arrow keys | Hue / alpha slider | Nudge by 1 (Shift: 10); hue wraps at 0/360 |
| Escape | Popover | Close and return focus to the trigger |

## CSS Custom Properties

## CSS Parts

## Import

```js
import "@nana-tec/ui-components/color-picker";
```

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-color-picker--docs