#### Colorpicker

#### Control Types

Hue (default)
Saturation
Brightness
Wheel

#### Input Modes

Text field
Hidden Input
Inline

#### Positions

Valid positions include bottom left, bottom right, top left, and top right.

bottom left (default)
top left
bottom right
top right

#### RGB(A)

RGB

RGB input can be assigned by setting the `format` option to `rgb`.

RGBA

RGBA input can be assigned by setting the `format` option to `rgb` and `opacity` option to `true`.

#### Different Styles

Opacity

Opacity can be assigned by including the `data-opacity` attribute or by setting the `opacity` option to `true`.

Keywords

CSS-wide keywords can be assigned by setting the `keywords` option to a comma-separated list of valid keywords: `transparent, initial, inherit`.

Default Value

This field has a default value assigned to it, so it will never be empty.

Letter Case

This field will always be uppercase.

Input Groups

Example using Bootstrap's input groups.

More Input Groups

Input group example with addon.

Color
Swatches

Example with swatches.

Swatches and opacity

Example with swatches and opacity.

#### Settings

###### Theme

Light Dark

###### Theme Direction

LTR RTL

###### Theme Colors

###### Layout Type

Vertical
Horizontal

###### Container Option

Boxed Full

###### Sidebar Type

Full
Collapse

###### Card With

Border Shadow

##### Quick Page Links

- Analytics /dashboards/dashboard1
- eCommerce /dashboards/dashboard2
- CRM /dashboards/dashboard3
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop
- Modern /dashboards/dashboard1
- Dashboard /dashboards/dashboard2
- Contacts /apps/contacts
- Posts /apps/blog/posts
- Detail /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow
- Shop /apps/ecommerce/shop