Color Picker

yarn add @clayui/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.

Stable 3.41.0 View in Lexicon CHANGELOG

Example
Variations
Sizes

This requires custom javascript.

Example

Background Color

Code Sample (expand to see it)

<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

Code Sample (expand to see it)

<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>

Code Sample (expand to see it)

<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>

Code Sample (expand to see it)

<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

Form Group Sm

#

Code Sample (expand to see it)

<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>

Input Group Sm

Code Sample (expand to see it)

<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>