Demos
Warning: The examples won't work because your browser
seems to have the JavaScript disabled or not to support it.
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> This field can be left empty: <input class="color {required:false}">
<p> This field accepts any value: <input class="color {adjust:false}">
<p> Hash symbol: <input class="color {hash:true}">
<p> Hash symbol, lowercase: <input class="color {hash:true,caps:false}">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
HSV mode: <input class="color {pickerMode:'HSV'}">
HVS mode: <input class="color {pickerMode:'HVS'}">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p style="margin-left:210px">Left: <input class="color {pickerPosition:'left'}">
<p style="margin-left:90px"> Right: <input class="color {pickerPosition:'right'}">
<p style="margin-top:65px"> Top: <input class="color {pickerPosition:'top'}">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> Stronger borders: <input class="color {pickerBorder:3,pickerInset:10}">
<p> Stronger face: <input class="color {pickerFace:20}">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> Colour outer border: <input class="color {pickerBorderColor:'red green blue yellow'}">
<p> Colour inset borders: <input class="color {pickerInsetColor:'#9F9 #090 #090 #9F9'}">
<p> Colour picker face: <input class="color {pickerFaceColor:'#01BABE'}">
<p> Transparent picker: <input class="color {pickerFaceColor:'transparent',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input class="color {pickerOnfocus:false}" id="myColor"> this field has disabled automatic showing/hiding of a picker
<p> Move the mouse over these buttons:
<input type="button" value="Show"
onmousemove="document.getElementById('myColor').color.showPicker()">
<input type="button" value="Hide"
onmousemove="document.getElementById('myColor').color.hidePicker()">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> Change background: <input class="color"
onchange="document.getElementsByTagName('BODY')[0].style.backgroundColor = '#'+this.color">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
function updateInfo(color) {
document.getElementById('info-r').value = color.rgb[0];
document.getElementById('info-g').value = color.rgb[1];
document.getElementById('info-b').value = color.rgb[2];
}
</script>
Color: <input class="color {onImmediateChange:'updateInfo(this);'}" value="66ff00">
R: <input id="info-r" size="2" />,
G: <input id="info-g" size="2" />,
B: <input id="info-b" size="2" />
<script type="text/javascript" src="jscolor/jscolor.js"></script>
R<input id="red" size="5"> G<input id="grn" size="5"> B<input id="blu" size="5"> - - -
H<input id="hue" size="5"> S<input id="sat" size="5"> V<input id="val" size="5">
<p> Choose any color: <input class="color" id="myColor" onchange="
document.getElementById('red').value = this.color.rgb[0]*100 + '%';
document.getElementById('grn').value = this.color.rgb[1]*100 + '%';
document.getElementById('blu').value = this.color.rgb[2]*100 + '%';
document.getElementById('hue').value = this.color.hsv[0]* 60 + '°';
document.getElementById('sat').value = this.color.hsv[1]*100 + '%';
document.getElementById('val').value = this.color.hsv[2]*100 + '%';">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input class="color" id="myColor">
<input type="submit" value="Move mouse"
onmouseover="document.getElementById('myColor').color.fromString('F2C80A')">
<input type="submit" value="Move mouse"
onmouseover="document.getElementById('myColor').color.fromRGB(0.8, 1, 0.2)">
<input type="submit" value="Move mouse"
onmouseover="document.getElementById('myColor').color.fromHSV(4, 0.8, 0.5)">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> Redirect value: <input class="color {valueElement:'myValue'}"> <input id="myValue">
<p> Redirect style: <input class="color {styleElement:'myStyle'}"> <input id="myStyle">
<p> Redirect both: <input class="color {valueElement:'myBoth',styleElement:'myBoth'}"> <input id="myBoth">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<input id="myField1">
<script type="text/javascript">
var myPicker = new jscolor.color(document.getElementById('myField1'), {})
myPicker.fromString('99FF33') // now you can access API via 'myPicker' variable
</script>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> No Slider: <input class="color {slider:false}">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
Click here: <input class="color {pickerClosable:true}">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
Light colors only: <input class="color {minV:0.8}" value="66ff00">
Dark colors only: <input class="color {maxV:0.2}" value="66ff00">
Pale colors only: <input class="color {maxS:0.2}" value="66ff00">
Strong colors only: <input class="color {minS:0.8}" value="66ff00">
<script type="text/javascript" src="jscolor/jscolor.js"></script>
<p> <input onclick="add()" type="button" value="Add 100 pickers">
<script type="text/javascript">
function add() {
var count = 100
for(var i=0; i<count; i++) {
var input = document.createElement('INPUT')
input.style.width = '5em'
// bind jscolor
var col = new jscolor.color(input)
col.fromHSV(6/count*i, 1, 1)
document.getElementsByTagName('BODY')[0].appendChild(input)
}
}
</script>