Color Picker

View in Lexicon

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
use	`import ColorPicker from '@clayui/color-picker';`

Table of Contents

Example
Variations
Sizes

This requires custom javascript.

Example

Background Color

Snippet

<label for="clayColor1DropdownToggle">Background Color</label>
<div className="clay-color input-group">
	<div className="input-group-item input-group-item-shrink input-group-prepend">
		<div className="input-group-text">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				aria-label="Select a color"
				className="btn clay-color-btn dropdown-toggle"
				data-toggle="dropdown"
				id="clayColor1DropdownToggle"
				title="#B2EDFF"
				type="button"
				style={{backgroundColor: '#B2EDFF'}}
			></button>
			<div
				aria-labelledby="clayColor1DropdownToggle"
				className="clay-color-dropdown-menu dropdown-menu"
				x-placement="bottom-start"
				style={{position: 'absolute', willChange: 'transform', top: '0px', left: '0px', transform: 'translate3d(8px, 32px, 0px)'}}
			>
				<div className="clay-color-swatch">
					<div className="clay-color-swatch-item">
						<button
							className="btn clay-color-btn"
							title="#000000"
							style={{backgroundColor: '#000000'}}
						></button>
					</div>
				</div>
				<div className="clay-color-header">
					<span className="component-title">Custom Colors</span>
					<button
						className="component-action"
						id="claySiteShowView2"
						type="button"
					>
						<svg
							className="lexicon-icon lexicon-icon-drop"
							focusable="false"
							role="presentation"
						>
							<use href="/icons.svg#drop" />
						</svg>
					</button>
				</div>
				<div className="clay-color-swatch">
					<div className="clay-color-swatch-item">
						<button
							className="active btn clay-color-btn"
							title="#B2EDFF"
							style={{backgroundColor: '#B2EDFF'}}
							tabindex="-1"
						></button>
					</div>
					<div className="clay-color-swatch-item">
						<button
							className="btn clay-color-btn clay-color-btn-bordered"
							title="#FFFFFF"
							style={{backgroundColor: '#FFFFFF'}}
						></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div className="input-group-append input-group-item">
		<input
			aria-label="Color selection is #B2EDFF"
			className="form-control"
			id="clayColor1"
			type="text"
			value="#B2EDFF"
		/>
	</div>
</div>

Variations

Snippet

<div className="clay-color-dropdown-menu dropdown-menu show">
	<div className="clay-color-swatch">
		<div className="clay-color-swatch-item">
			<button
				className="btn clay-color-btn"
				title="#FFB1B1"
				style={{backgroundColor: '#FFB1B1'}}
			></button>
		</div>
		...
	</div>
</div>

Snippet

<div className="clay-color-dropdown-menu dropdown-menu show">
	<div className="clay-color-swatch">
		<div className="clay-color-swatch-item">
			<button
				className="btn clay-color-btn"
				title="#000000"
				style={{backgroundColor: '#000000'}}
			></button>
		</div>
	</div>
	<div className="clay-color-header">
		<span className="component-title">Custom Colors</span>
		<button className="component-action" type="button">
			<svg
				className="lexicon-icon lexicon-icon-drop"
				focusable="false"
				role="presentation"
			>
				<use href="/icons.svg#drop" />
			</svg>
		</button>
	</div>
	<div className="clay-color-swatch">
		<div className="clay-color-swatch-item">
			<button
				className="active btn clay-color-btn"
				title="#B2EDFF"
				style={{backgroundColor: '#B2EDFF'}}
				tabindex="-1"
			></button>
		</div>
		<div className="clay-color-swatch-item">
			<button
				className="btn clay-color-btn clay-color-btn-bordered"
				title="#FFFFFF"
				style={{backgroundColor: '#FFFFFF'}}
			></button>
		</div>
	</div>
</div>

Snippet

<div className="clay-color-dropdown-menu dropdown-menu show">
	<div className="clay-color-header">
		<span className="component-title">Custom Colors</span>
		<button className="close" type="button">
			<svg
				className="lexicon-icon lexicon-icon-times"
				focusable="false"
				role="presentation"
			>
				<use href="/icons.svg#times" />
			</svg>
		</button>
	</div>
	<div className="clay-color-swatch">
		<div className="clay-color-swatch-item">
			<button
				className="active btn clay-color-btn"
				title="#B2EDFF"
				style={{backgroundColor: '#B2EDFF'}}
				tabindex="-1"
			></button>
		</div>
		<div className="clay-color-swatch-item">
			<button
				className="btn clay-color-btn"
				title="#45EDC5"
				style={{backgroundColor: '#45EDC5'}}
			></button>
		</div>
	</div>
	<div className="clay-color-map-group">
		<div
			className="clay-color-map-hsb clay-color-map"
			style={{backgroundColor: 'rgb(180,237,254)'}}
		>
			<button
				className="clay-color-pointer clay-color-map-pointer"
				style={{top: '0px', left: '130px', backgroundColor: 'rgb(180, 237, 254)'}}
				type="button"
			></button>
		</div>
		<div className="clay-color-map-values">
			<div className="form-group">
				<div className="input-group">
					<div className="input-group-item">
						<input
							className="form-control input-group-inset input-group-inset-before"
							id="clayColor3Red"
							type="text"
							value="180"
						/>
						<label
							className="input-group-inset-item input-group-inset-item-before"
							for="clayColor3Red"
						>
							R
						</label>
					</div>
				</div>
			</div>
			<div className="form-group">
				<div className="input-group">
					<div className="input-group-item">
						<input
							className="form-control input-group-inset input-group-inset-before"
							id="clayColor3Green"
							type="text"
							value="237"
						/>
						<label
							className="input-group-inset-item input-group-inset-item-before"
							for="clayColor3Green"
						>
							G
						</label>
					</div>
				</div>
			</div>
			<div className="form-group">
				<div className="input-group">
					<div className="input-group-item">
						<input
							className="form-control input-group-inset input-group-inset-before"
							id="clayColor3Blue"
							type="text"
							value="254"
						/>
						<label
							className="input-group-inset-item input-group-inset-item-before"
							for="clayColor3Blue"
						>
							B
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div className="clay-color-range clay-color-range-hue">
		<button
			className="clay-color-pointer clay-color-range-pointer"
			type="button"
			style={{left: '98px', backgroundColor: 'rgb(180,237,254)'}}
		></button>
	</div>
	<div className="clay-color-footer">
		<div className="form-group">
			<input className="form-control" type="text" value="#B2EDFF" />
		</div>
		<div className="form-group">
			<div className="input-group">
				<div className="input-group-item">
					<input
						className="form-control input-group-inset input-group-inset-before"
						id="hexInput"
						type="text"
						value="B2EDFF"
					/>
					<label
						className="input-group-inset-item input-group-inset-item-before"
						for="hexInput"
					>
						#
					</label>
				</div>
			</div>
		</div>
	</div>
</div>

Sizes

Form Group Sm

Snippet

<div className="form-group form-group-sm">
	<label for="_xc5ufh2gj">Form Group Sm</label>
	<div className="clay-color input-group">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<div className="input-group-text">
				<button
					aria-expanded="false"
					aria-haspopup="true"
					aria-label="Select a color"
					className="btn clay-color-btn dropdown-toggle"
					data-toggle="dropdown"
					id="_xc5ufh2gj"
					title="#B2EDFF"
					type="button"
					style={{backgroundColor: '#B2EDFF'}}
				></button>
				<div
					aria-labelledby="_xc5ufh2gj"
					className="clay-color-dropdown-menu dropdown-menu"
				></div>
			</div>
		</div>
		<div className="input-group-append input-group-item">
			<input
				aria-label="Color selection is B2EDFF"
				className="form-control input-group-inset input-group-inset-before"
				id="clayColor3"
				type="text"
				value="B2EDFF"
			/>
			<label
				className="input-group-inset-item input-group-inset-item-before"
				for="clayColor3"
			>
				#
			</label>
		</div>
	</div>
</div>

Input Group Sm

Snippet

<div className="form-group">
	<label for="_a37tcs84w">Input Group Sm</label>
	<div className="clay-color input-group input-group-sm">
		<div
			className="input-group-item input-group-item-shrink input-group-prepend"
		>
			<div className="input-group-text">
				<button
					aria-expanded="false"
					aria-haspopup="true"
					aria-label="Select a color"
					className="btn clay-color-btn dropdown-toggle"
					data-toggle="dropdown"
					id="_a37tcs84w"
					title="#B2EDFF"
					type="button"
					style={{backgroundColor: '#B2EDFF'}}
				></button>
				<div
					aria-labelledby="_a37tcs84w"
					className="clay-color-dropdown-menu dropdown-menu"
				></div>
			</div>
		</div>
	</div>
</div>

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Example
Variations
Sizes