Over the years, several articles have been written about the ColorPicker property editor. I also decided to look into this topic. I wanted to create something modern, simple and configurable. That’s why I used a simple HTML input color wrapped in a dijit widget.
Default ColorPicker property editor

Since there was very little code, I didn’t create a nuget package, just a code snippet that can be used in project. For simple scenario we need only EditorDescriptor and dijit widget.

ColorPicker file structure

EditorDescriptor

In the EditorDescriptor we are just registering dijit widget. Please note, that alloy prefix for “alloy/Editors/ColorEditor” will be different in your project.
Additionally I allow to pass list of predefined colors.

Client side ColorPicker property editor

Client editor is a dijit widget wrapper for input color HTML element. It supports readonly state and validation when property is required.

Readonly color picker

When predefined list of colors is defined, the datalist element will be renderred.

Using ColorPicker property

To use ColorPicker property we have to simply annotate property with ColorEditorDescriptor.UIHint UIHint.

Select color picker value

Registering list of predefined colors

List of colors can be defined using IPredefinedColors service. The interface has only one method that has to be implemented: GetPredefinedColors.
Method returns list of colors.

When predefined list of colors is provided, then Editor can select one of the colors from the list.
Custom color picker color

Code can be copied from Gist.