Purty Picker - Visual HSL, RGB and hex color picker

Download   Demo

Purty Picker is a super lightweight visual HSL, RGB and hex color picker with a responsive, touch-friendly and customizable UI. Compatible with jQuery or Zepto.

Features

Small file-size (~4kb minified) with < 300 lines of source JS (Spectrum exceeds 2000 lines).

Compact and simple design with native controls. The color input also serves as a preview (text color automatically inverts for legibility).

Responsive. Everything is percent and not pixel based.

HDPI “Retina” quality CSS based UI.

Touch friendly.

Color picker markup is your own and not JS generated.

Semantic class and file names (e.g. using .color-picker and not .purty-picker).

CSS is split into core and customization, allowing you to easily get started on your own skin.

Simple enough to reverse-engineer and extend with your own features.

Inexpensive and automatic initialization. Multiple pickers may be used on a page.

Browser Support

For modern browsers (IE10+ and recent versions of Chrome, Safari, Firefox), mostly due to the use of CSS3 linear gradients. Support for older browsers should be possible with a few modifications.

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="color-picker.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="color-picker.js"></script>

2. HTML

<fieldset class="color-picker">
	<select class="format">
		<option>Hex</option>
		<option>RGB</option>
		<option selected>HSL</option>
	</select>
	<input class="color" type="text" value="hsl(206, 59%, 42%)" />
	<div class="spectrum">
		<div>
			<div class="pin"></div>
		</div>
	</div>
	<input class="luminosity" type="range" min="0" max="100" />
</fieldset>

Add the .color-picker markup to your page, making sure to:

• Set a default .color input value (CSS valid HSL, RGB or hex).


• Mark the relevant color .format option as selected.

Purty Picker - Visual HSL, RGB and hex color picker