<!--
/**
 * @name            README
 * @namespace       doc
 * @type            Markdown
 * @platform        md
 * @status          stable
 * @menu            Documentation           /doc/readme
 *
 * @since           2.0.0
 * @author    Olivier Bossel <olivier.bossel@gmail.com> (https://coffeekraken.io)
 */
-->

{{#> layout-readme }}

## SColorPickerComponent

This package expose a simple `SColorPickerComponent` custom element that you can define and use in your pages easily.

## Features

-   Framework agnostic. Simply webcomponent.
-   Support multiple formats `hex`, `hexa`, `hsl`, `hsla`, `rgb` and `rgba`
-   Mobile friendly
-   RTL support
-   Possibility to save his state between page loads
-   Responsive props [see more](/doc/components/responsive)
-   And more...

## Usage

First, simply import and define the component in your js/ts file:

```js
import { define } from '@coffeekraken/s-color-picker-component';
define();
```

Make use of it in your pages:

```html
<s-color-picker>
    <input type="text" name="my-cool-color" value="#ff000000" />
</s-color-picker>
```

## Attributes

{{> interface namespace='@coffeekraken.s-color-picker-component.js.interface.SColorPickerComponentInterface' }}

## API

For more information about the API, please check out [the API documentation](/api/@coffeekraken.s-color-picker-component.js.SColorPickerComponent)

{{/ layout-readme }}
