mirror of
https://github.com/PitPik/colorPicker.git
synced 2025-09-24 16:40:57 -06:00
72 lines
7.1 KiB
HTML
72 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset='utf-8'>
|
||
<meta http-equiv="Content-Language" content="en">
|
||
<meta name="Keywords" content="ColorPicker, color picker, color chooser, color, picker, javaScript, java script, colors, rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, grayscale, contrast, readability, realtime" />
|
||
<meta name="author" content="Peter Dematté" />
|
||
<meta http-equiv="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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut cumque, voluptas, consequuntur fugiat assumenda culpa provident quae repellat nemo necessitatibus adipisci repellendus perferendis illum commodi corporis, officiis neque. Autem, nulla.</p>
|
||
<p>Harum error libero placeat, laudantium doloremque maiores voluptatem quasi eos dolorum ea praesentium commodi consectetur, consequuntur laboriosam illum beatae repellendus quibusdam nostrum suscipit optio aperiam. Autem eum nesciunt, at enim.</p>
|
||
<p>Aut distinctio quas maiores fugiat sequi, vel dolores quidem. Quia dolores veniam accusantium accusamus eos ipsa vitae eum? Rem at quas suscipit accusamus. Mollitia fugit amet eveniet, quos voluptates aperiam!</p>
|
||
<p>Dolores maxime eius soluta architecto dolore fugit id minus, illum obcaecati. Nam possimus repellat eos natus excepturi! Veritatis similique at quia modi provident sequi, unde quas numquam! Molestias quidem, debitis.</p>
|
||
<p>Similique ab consectetur assumenda maiores quae, ipsum amet earum facilis quaerat. Optio, dolor sapiente ducimus ad repellendus porro minus quidem nihil assumenda repellat? Mollitia officia quia nihil doloribus at blanditiis.</p>
|
||
<p>Repellendus mollitia doloribus in necessitatibus illum porro ipsum laudantium ipsa dolor velit labore libero impedit praesentium adipisci, voluptates harum asperiores deleniti nesciunt! Sit provident ratione unde, commodi fugiat, expedita quidem.</p>
|
||
<p>Iusto fugiat ullam pariatur rem unde, natus quam possimus doloribus esse, mollitia aliquid, autem dignissimos animi illo aspernatur numquam. Vero nemo quod dolorum ratione porro tempora eius voluptatem nihil fugit.</p>
|
||
<p>Hic saepe ab voluptas deleniti id veniam aspernatur accusamus aut impedit at quidem, quis sint, rerum recusandae consequuntur, minus, ex dolore eum repellat? Aut numquam magni asperiores praesentium culpa aperiam.</p>
|
||
<p>Sed eligendi ab rerum et laborum repudiandae culpa labore ad temporibus, minus facilis minima accusantium laudantium iure quidem nulla laboriosam sunt doloremque neque iusto repellat officia illo itaque saepe. Enim.</p>
|
||
<p>Nisi, cumque quia qui ratione, nesciunt est repudiandae similique magni laborum ea tempore impedit numquam ex quae! Temporibus blanditiis consectetur rem modi aperiam praesentium dolorem, eaque veniam numquam ea, libero!</p>
|
||
<p>Numquam ab earum a cupiditate iure aperiam atque dolor, temporibus adipisci optio perspiciatis dolores asperiores maxime dicta quaerat sed tempora expedita tempore suscipit odit quidem labore autem enim? Recusandae, culpa?</p>
|
||
<p>Illo dolores cupiditate non ipsum neque, expedita eveniet aperiam illum at sed aliquid nam voluptate. Nostrum rerum itaque nam illo, distinctio. Sit iure dolorem quis, numquam sapiente, magni fugiat dolores.</p>
|
||
<p>Odit nulla alias ab, tenetur facere laudantium eveniet voluptate quam. Repudiandae error repellendus at voluptates harum qui soluta tempore officiis necessitatibus obcaecati nam adipisci reiciendis accusantium magni ducimus, doloribus. Fuga?</p>
|
||
<p>Tempora error quos rerum nostrum amet perspiciatis at quis vitae aliquam veritatis beatae asperiores, eius, commodi. Explicabo vitae minima et debitis ipsam nulla vel, aut vero libero, rerum beatae dicta.</p>
|
||
<p>Maxime quia perferendis repellendus obcaecati, voluptates quod soluta alias quibusdam earum. Aut obcaecati nesciunt error minus, quis in maxime sit, eum accusamus voluptates aspernatur? Hic omnis commodi in itaque provident.</p>
|
||
<p>Natus aliquid dignissimos modi nesciunt nostrum id nam hic ullam autem voluptates ab, commodi porro veniam cumque, quibusdam molestias neque libero labore ipsa deserunt quis, consectetur dolorum. Dolore, enim, dignissimos!</p>
|
||
<p>Optio consectetur cupiditate, dolor explicabo ratione nesciunt reiciendis similique velit laudantium nisi sit, placeat assumenda. Architecto, non exercitationem harum. Tenetur pariatur fugit iure natus accusamus, rem earum incidunt at perspiciatis.</p>
|
||
<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>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque odit, unde. Earum ex distinctio ea, ab perferendis magni eum reprehenderit, ad ipsa, sequi praesentium nemo facere beatae modi quasi, ipsam?</p>
|
||
<p>Aperiam id officiis odio quo commodi rem vero tempora, maiores provident nulla numquam doloremque voluptate dicta. Facilis esse consectetur fuga provident, earum mollitia inventore, vitae, omnis quod veritatis in blanditiis.</p>
|
||
<p>Aliquam sunt, at iusto reiciendis quibusdam ut illum. Sequi ratione est fugiat ducimus obcaecati optio. Tempore sunt maiores, delectus. Deserunt excepturi ratione eveniet quia, nesciunt ut consequatur autem sequi odit!</p>
|
||
<p>Consequuntur totam expedita distinctio repellendus voluptatum laborum assumenda. Id, quas labore repellendus! Commodi aut doloremque optio natus dolores, temporibus architecto voluptas dignissimos iure nostrum officiis, placeat voluptatibus, aspernatur rerum. Sed.</p>
|
||
<p>Ex odit quibusdam dolor repellat voluptatibus debitis distinctio vero nesciunt corporis repudiandae porro, consequatur, voluptatem necessitatibus asperiores et omnis ratione quae voluptate ipsa tempore quasi culpa. Impedit aperiam labore ullam.</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';
|
||
},
|
||
// appendTo: document.querySelector('.samples')
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|