🎨 ARS Color Select

Interactive Color Picker Component Test

← Back to Demo Page

About ARS Color Select

A customizable color picker component that displays a color selector button. Click to open a color palette overlay with predefined color options.

🎯 Basic Usage

Press the elements below to change their color.
Press the element below to change its color.
Press the element below to change its color.
Press the element below to change its color.

⚡ Interactive Features

Click selector →

📡 Event Monitoring

All color selection events are logged below. Try clicking on any color selector above.

Event Log:

Ready to capture color selection events...\n

📖 Usage Instructions

HTML Usage:

<ars-color-select id="myColorPicker" color="Blue"></ars-color-select>

Event Handling:

Event: ars-color-select:change
Detail: { id: "elementId", color: "selectedColor" }

Attributes:

color: Initial color (optional). If not provided, a random color is selected.