dRawrpalette

Simple color picker with a focus on good ux for the average user, that works on android, ios, and desktop. to be bundled with drawr.

View on github

Example 1

			//Code for Example 1

			html

			<input type="text" id ="picker" />

			js

			$("#picker").drawrpalette();

Example 2: alpha channel

			//Code for Example 2: alpha channel

			<input type="text" id="picker_alpha" value="#3366ffcc" />
			<input type="text" id="picker_rgba"  value="#33cc3380" />

			$("#picker_alpha").drawrpalette({ enable_alpha: true });                   //outputs "#rrggbbaa"
			$("#picker_rgba" ).drawrpalette({ enable_alpha: true, format: "rgba" });   //outputs "rgba(...)"

Example 3 (events,preset value,inline styles and classes,destroy)

			//Code for Example 2

			html

			<input type="text" id ="picker" value="#770033" />
			
			js

			function debug(test){
				$("#debuglog").html($("#debuglog").html() + test + "
");
				$("#debuglog")[0].scrollTop = $("#debuglog")[0].scrollHeight;
			}

			$("#picker").drawrpalette().on("preview.drawrpalette",function(event,hexcolor){
				debug("preview: " + hexcolor);
			}).on("cancel.drawrpalette",function(event,hexcolor){
				debug("cancel: " + hexcolor);
			}).on("choose.drawrpalette",function(event,hexcolor){
				debug("choose: " + hexcolor);
			}).on("open.drawrpalette",function(){
				debug("open");
			}).on("close.drawrpalette",function(){
				debug("close");
			});

			//to destroy and restore original input:

			$("#picker").drawrpalette("destroy");

Features

Simple but intuitive UI
Android/iOS/Desktop support
events

Methods ($("picker").drawrpalette(methodname,param))

destroy (restores the original input)
set (sets a hex color)

Events

preview.drawrpalette (while picking a color)
cancel.drawrpalette (dialog closed or cancel pressed)
choose.drawrpalette (a color was picked)
open.drawrpalette (the dialog is opened)
close.drawrpalette (the dialog is closed)

Options

auto_apply (no ok button, auto applies color change)
enable_alpha (adds an alpha slider and outputs an alpha-aware color string)
format ("hex" | "hex8" | "rgba" | "hsla"; defaults to "hex", or "hex8" when enable_alpha is true)
aria_label (overrides the swatch button's accessible name)

Keyboard

Enter / Space on the swatch opens the picker
Arrow keys adjust saturation/value; Shift+Arrow adjusts hue; Alt+Arrow adjusts alpha (when enabled)
Enter commits; Escape cancels; Tab cycles within the dialog

This project is maintained by avokicchi