# swc-color-loupe

A visual magnifier that displays the currently picked color inside a loupe-shaped container with an opacity checkerboard behind transparent colors.

```js
import '@adobe/spectrum-wc/components/color-loupe/index.js';
// <swc-color-loupe></swc-color-loupe>
```

## Attributes

| Name    | Type      | Default                  | Description                                                                                                                                                            |
| ------- | --------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `open`  | `boolean` | `false`                  | Whether the loupe is visible. When `false` the loupe is hidden via CSS opacity and transform transitions.                                                              |
| `color` | `string`  | `'rgba(255, 0, 0, 0.5)'` | The CSS color value to display inside the loupe. Supports any valid CSS color string, including those with alpha transparency (which reveals the checkerboard behind). |