My favorites | Sign in
Project Home Downloads Wiki Issues Source
Project Information
Members
Links

Coloro - Light Weight JavaScript Color Picker

Author: Yoshiki Okawa E-mail: admin@yoshiki-okawa.com

Key Features:

  • About 8.5kb
  • Customisable
  • Free
  • Open Source (MIT Licence)

Example:

(Japanese) http://www.yoshiki-okawa.com/works/coloro/

// <header>
<script type="text/javascript" src="{{root}}/js/coloro.js"></script>
<script type="text/javascript">
	this.coloro = new Coloro();
	this.coloro.config({text:"abc",btn:["o","x"],imagePath:"images/coloro.png",isHexEditable:1});
	this.coloro.onColorChange = function(c) {
		$("coloro_eg1").value = c;
		$("coloro_eg1").style.backgroundColor = c;
	};
</script>
// <body>
<input id="coloro_eg1" type="text" onclick="coloro.rgb(this.value.toString());coloro.show(event);" style="background-color: #3098DD;width:100px" value="#3098DD"></input>

The followings are changeable properties and functions.

  • onColorChange(c): Called when a color is changed. c is color string. (e.g:#FF0000)
  • onComplete(c): Called when a user finish choosing a color.
  • text: Preview text
  • bun: Captions for OK and Cancel buttons
  • imagePath: Relative path to coloro.png
  • isHexEditable: The hex text field is editable or not. If this is True, focus to previous field will be lost.
Powered by Google Project Hosting