Color Picker
Color picker lets users select a color from a predefined palette, specify a color via its hexadecimal value, sample a color, and explore color values to create a custom color variation.
install | yarn add @clayui/color-picker |
---|---|
version | 3.124.0 |
Stable3.124.0View in LexiconCHANGELOG
This requires custom javascript.
Example
Custom Colors
Copied!
<label for="clayColor1DropdownToggle">Background Color</label>
<div class="clay-color input-group">
<div class="input-group-item input-group-item-shrink input-group-prepend">
<div class="input-group-text">
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Select a color"
class="btn clay-color-btn dropdown-toggle"
data-toggle="dropdown"
id="clayColor1DropdownToggle"
title="#B2EDFF"
type="button"
style="background-color:#B2EDFF;"
></button>
<div
aria-labelledby="clayColor1DropdownToggle"
class="clay-color-dropdown-menu dropdown-menu"
x-placement="bottom-start"
style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(8px, 32px, 0px);"
>
<div class="clay-color-swatch">
<div class="clay-color-swatch-item">
<button
class="btn clay-color-btn"
title="#000000"
style="background-color:#000000;"
></button>
</div>
</div>
<div class="clay-color-header">
<span class="component-title">Custom Colors</span>
<button
class="component-action"
id="claySiteShowView2"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-drop"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#drop" />
</svg>
</button>
</div>
<div class="clay-color-swatch">
<div class="clay-color-swatch-item">
<button
class="active btn clay-color-btn"
title="#B2EDFF"
style="background-color:#B2EDFF;"
tabindex="-1"
></button>
</div>
<div class="clay-color-swatch-item">
<button
class="btn clay-color-btn clay-color-btn-bordered"
title="#FFFFFF"
style="background-color:#FFFFFF;"
></button>
</div>
</div>
</div>
</div>
</div>
<div class="input-group-append input-group-item">
<input
aria-label="Color selection is #B2EDFF"
class="form-control"
id="clayColor1"
type="text"
value="#B2EDFF"
/>
</div>
</div>
Variations
Copied!
<div class="clay-color-dropdown-menu dropdown-menu show">
<div class="clay-color-swatch">
<div class="clay-color-swatch-item">
<button
class="btn clay-color-btn"
title="#FFB1B1"
style="background-color:#FFB1B1;"
></button>
</div>
...
</div>
</div>
Custom Colors
Copied!
<div class="clay-color-dropdown-menu dropdown-menu show">
<div class="clay-color-swatch">
<div class="clay-color-swatch-item">
<button
class="btn clay-color-btn"
title="#000000"
style="background-color:#000000;"
></button>
</div>
</div>
<div class="clay-color-header">
<span class="component-title">Custom Colors</span>
<button class="component-action" type="button">
<svg
class="lexicon-icon lexicon-icon-drop"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#drop" />
</svg>
</button>
</div>
<div class="clay-color-swatch">
<div class="clay-color-swatch-item">
<button
class="active btn clay-color-btn"
title="#B2EDFF"
style="background-color:#B2EDFF;"
tabindex="-1"
></button>
</div>
<div class="clay-color-swatch-item">
<button
class="btn clay-color-btn clay-color-btn-bordered"
title="#FFFFFF"
style="background-color:#FFFFFF;"
></button>
</div>
</div>
</div>
Custom Colors
Copied!
<div class="clay-color-dropdown-menu dropdown-menu show">
<div class="clay-color-header">
<span class="component-title">Custom Colors</span>
<button class="close" type="button">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times" />
</svg>
</button>
</div>
<div class="clay-color-swatch">
<div class="clay-color-swatch-item">
<button
class="active btn clay-color-btn"
title="#B2EDFF"
style="background-color:#B2EDFF;"
tabindex="-1"
></button>
</div>
<div class="clay-color-swatch-item">
<button
class="btn clay-color-btn"
title="#45EDC5"
style="background-color:#45EDC5;"
></button>
</div>
</div>
<div class="clay-color-map-group">
<div
class="clay-color-map-hsb clay-color-map"
style="background-color:rgb(180,237,254);"
>
<button
class="clay-color-pointer clay-color-map-pointer"
style="top: 0px; left: 130px;background-color: rgb(180, 237, 254);"
type="button"
></button>
</div>
<div class="clay-color-map-values">
<div class="form-group">
<div class="input-group">
<div class="input-group-item">
<input
class="form-control input-group-inset input-group-inset-before"
id="clayColor3Red"
type="text"
value="180"
/>
<label
class="input-group-inset-item input-group-inset-item-before"
for="clayColor3Red"
>
R
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-item">
<input
class="form-control input-group-inset input-group-inset-before"
id="clayColor3Green"
type="text"
value="237"
/>
<label
class="input-group-inset-item input-group-inset-item-before"
for="clayColor3Green"
>
G
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-item">
<input
class="form-control input-group-inset input-group-inset-before"
id="clayColor3Blue"
type="text"
value="254"
/>
<label
class="input-group-inset-item input-group-inset-item-before"
for="clayColor3Blue"
>
B
</label>
</div>
</div>
</div>
</div>
</div>
<div class="clay-color-range clay-color-range-hue">
<button
class="clay-color-pointer clay-color-range-pointer"
type="button"
style="left: 98px; background-color: rgb(180,237,254);"
></button>
</div>
<div class="clay-color-footer">
<div class="form-group">
<input class="form-control" type="text" value="#B2EDFF" />
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-item">
<input
class="form-control input-group-inset input-group-inset-before"
id="hexInput"
type="text"
value="B2EDFF"
/>
<label
class="input-group-inset-item input-group-inset-item-before"
for="hexInput"
>
#
</label>
</div>
</div>
</div>
</div>
</div>
Sizes
Copied!
<div class="form-group form-group-sm">
<label for="_xc5ufh2gj">Form Group Sm</label>
<div class="clay-color input-group">
<div
class="input-group-item input-group-item-shrink input-group-prepend"
>
<div class="input-group-text">
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Select a color"
class="btn clay-color-btn dropdown-toggle"
data-toggle="dropdown"
id="_xc5ufh2gj"
title="#B2EDFF"
type="button"
style="background-color:#B2EDFF;"
></button>
<div
aria-labelledby="_xc5ufh2gj"
class="clay-color-dropdown-menu dropdown-menu"
></div>
</div>
</div>
<div class="input-group-append input-group-item">
<input
aria-label="Color selection is B2EDFF"
class="form-control input-group-inset input-group-inset-before"
id="clayColor3"
type="text"
value="B2EDFF"
/>
<label
class="input-group-inset-item input-group-inset-item-before"
for="clayColor3"
>
#
</label>
</div>
</div>
</div>
Copied!
<div class="form-group">
<label for="_a37tcs84w">Input Group Sm</label>
<div class="clay-color input-group input-group-sm">
<div
class="input-group-item input-group-item-shrink input-group-prepend"
>
<div class="input-group-text">
<button
aria-expanded="false"
aria-haspopup="true"
aria-label="Select a color"
class="btn clay-color-btn dropdown-toggle"
data-toggle="dropdown"
id="_a37tcs84w"
title="#B2EDFF"
type="button"
style="background-color:#B2EDFF;"
></button>
<div
aria-labelledby="_a37tcs84w"
class="clay-color-dropdown-menu dropdown-menu"
></div>
</div>
</div>
</div>
</div>