javascript_implementation/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset='utf-8'>
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
  <meta http-equiv="Content-Language" content="en">

  <link href="../index.css" media="all" rel="stylesheet" type="text/css" />
  <link href="jsColor.css" media="all" rel="stylesheet" type="text/css" />
      
  <meta name="description" content="colorPicker - Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...); this is a javaScript implememntation example">
  <title>colorPicker javaScript implementation example</title>
</head>

<body>
<h1>Simple javaScript implementation</h1>
Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPicker('input.color');</pre>
<p>
	<input class="color" value="#B6BD79" />
	<input class="color" value="rgb(162, 63, 3)" />
	<input class="color" value="hsla(32, 95%, 23%, 0.9)" />
</p>
<!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
<script type="text/javascript" src="../colors.js"></script>
<script type="text/javascript" src="../colorPicker.data.js"></script>
<script type="text/javascript" src="../colorPicker.js"></script>

<!-- <script type="text/javascript" src="../color.all.min.js"></script> -->

<script type="text/javascript" src="jsColor.js"></script>

<!-- <script type="text/javascript" src="jsColorPicker.min.js"></script> -->

<script type="text/javascript">
	var colors = jsColorPicker('input.color', {
        customBG: '#222',
        readOnly: true,
        // patch: false,
        init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
          elm.style.backgroundColor = elm.value;
          elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
        }
      });
</script>
</body>
</html>