Color Picker

yarn add @clayui/color-picker

React Component
CSS / Markup

Stable3.1.4

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.

Check the Lexicon Color Picker Pattern for a more in-depth look at the motivations and proper usage of this component.

Color Picker is delivered in 3 different states: default colors, custom colors and native.

Default colors: a predefined list of colors to the dropdown that is not allowed to change or manipulate.
Custom colors: using the colors API in conjunction with onColorsChange enables the user to modify colors and add new ones.
Native: use the useNative API when the color picker is being used in a native environment, it changes to the browser default color picker.

Custom Colors

import ClayColorPicker from '@clayui/color-picker';
import React, {useState} from 'react';

import ClayColorPicker from '@clayui/color-picker';
import React, {useState} from 'react';

const Component = () => {
  const [customColors, setCustoms] = useState(["008000", "00FFFF", "0000FF"]);
  const [color, setColor] = useState(customColors[0]);

  return (
    <ClayColorPicker
      colors={customColors}
      label="Custom Colors"
      name="colorPicker2"
      onColorsChange={setCustoms}
      onValueChange={setColor}
      showHex={true}
      spritemap={spritemap}
      title="Custom Colors"
      value={color}
    />
  );
};

render(<Component />);

const Component = () => {
  const [customColors, setCustoms] = useState(["008000", "00FFFF", "0000FF"]);
  const [color, setColor] = useState(customColors[0]);
  return (
    <ClayColorPicker
      colors={customColors}
      label="Custom Colors"
      name="colorPicker2"
      onColorsChange={setCustoms}
      onValueChange={setColor}
      showHex={true}
      spritemap={spritemap}
      title="Custom Colors"
      value={color}
    />
  );
};
render(<Component />);

We recommend that you review the use cases in the Storybook.

API

Property	Type	Default	Description
ariaLabels	{ selectColor: string; selectionIs: string; }	{ selectColor: 'Select a color', selectionIs: 'Color selection is {0}', }	Labels for the aria attributes
colors	Array<string>		List of color hex values
disabled	boolean		Flag for adding ColorPicker in disabled state
label	string		The label describing the collection of colors in the menu
name	string		The input attribute for name
onColorsChange	(val: Array<string>) => void		Callback for when the list of colors change
onValueChange	(val: string) => void	() => {}	Callback for when the selected color changes
showHex	boolean	true	Determines if the hex input should render
spritemap	string		Path to the location of the spritemap resource.
title	string		Title to describe the color picker form element
useNative	boolean	false	Determines if the native color picker should be used
value	string	'FFFFFF'	Value of the selected color hex
onBlur		() => {}

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.

Example
Variations

Check the Lexicon Color Picker Pattern for a more in-depth look at the motivations and proper usage of this component.

This requires custom javascript.

Example

Background Color

<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="btn clay-color-btn focus"
							title="#B2EDFF"
							style="background-color:#B2EDFF;"
						></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

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

<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="btn clay-color-btn focus"
				title="#B2EDFF"
				style="background-color:#B2EDFF;"
			></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 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="btn clay-color-btn focus"
				title="#B2EDFF"
				style="background-color:#B2EDFF;"
			></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>