# Color Picker
[component-header:sl-color-picker]
Color pickers allow the user to select a color.
```html preview
```
## Examples
### Opacity
Use the `opacity` attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, or HSLA based on `format`.
```html preview
```
### Formats
Set the color picker's format with the `format` attribute. Valid options include `hex`, `rgb`, and `hsl`. Note that the color picker will accept any parsable format (including CSS color names) regardless of this option.
```html preview
```
### Inline
The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
```html preview
```
[component-metadata:sl-color-picker]