Aware Controls | JavaScript (ES5) Color Picker Demos

The Color Picker control allows for selecting and adjusting color values. It supports various color specifications, including RGB (Red Green Blue), HSV (Hue Saturation Value), and Hex codes.

Default Behavior

Demonstrates the default behavior of the ColorPicker control.

new ac.inputs.ColorPicker({}, "#cntlColorPicker");

<input id="cntlColorPicker" />

Palette Only

Demonstrates how the mode can be only set to only allow Palette.

new ac.inputs.ColorPicker(
	{
		mode: "Palette",
		modeSwitcher: false
	},
	"#cntlColorPicker"
);

<input id="cntlColorPicker" />

Set Default Color

Demonstrates how the default color can be specified.

new ac.inputs.ColorPicker(
	{
		value: "#ff0000"
	},
	"#cntlColorPicker"
);

<input id="cntlColorPicker" />

Custom Palette

Demonstrates how a custom palette can be specified with a custom display.

new ac.inputs.ColorPicker(
	{
		mode: "Palette",
		modeSwitcher: false,
		inline: true,
		showButtons: false,
		columns: 4,
		presetColors: {
			custom: ["#ea4335", "#e91e63", "#ff9800", "#fecf4a", "#cddc39", "#33a853", "#009688", "#00bcd4", "#4285f4", "#9c27b0", "#3f51b5", "#000000"]
		},
		beforeTileRender: function (e) {
			e.element.classList.add("a-circle");
			e.element.appendChild(ac.core.createElement("span", { className: "a-circle-selection" }));
		}
	},
	"#cntlCustomPalette"
);

<input id="cntlCustomPalette" />

.a-cntr .a-palette .a-circle {
	border: 0;
	height: 32px;
	width: 32px;
	border-radius: 20px;
	margin: 4px;
}

.a-bigger .a-cntr .a-palette .a-circle {
	height: 32px;
	width: 32px;
}

.a-cntr .a-palette .a-circle:hover {
	box-shadow: none;
	transform: scale(1.2);
	transition: transform 0.2s ease-out;
}

.a-circle .a-circle-selection {
	height: 32px;
	width: 32px;
	border-radius: 20px;
	display: inline-block;
	transform: scale(0);
	transition: transform 1.2s ease-in;
}

.a-circle.a-sel .a-circle-selection {
	transform: scale(0.8);
	background-color: #fff;
	transition: transform 0.2s ease-out;
}

#cntlCustomPalette + .a-cntr {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

.a-cntr .a-palette .a-circle.a-sel {
	outline: none;
}