ColorsPicker is an easy-to-use color picker that relies on jQuery to generate random colors. You can easily copy the HEX color code to the clipboard.
How to make use of it:
1. Add fallback colors along with Refresh Button and Copied data field to the color picker.
<div class="colors-container"> <div class="color"> <div class="color-hex">#000000</div> </div> <div class="color"> <div class="color-hex">#000000</div> </div> <div class="color"> <div class="color-hex">#000000</div> </div> <div class="color"> <div class="color-hex">#000000</div> </div> <button class="refresh">Refresh Color</button> <div class="copied">Copied!</div> </div>
2. The required CSS styles for the color picker.
.colors-container{ width: 100%; min-height: 100vh; display: flex; flex-wrap: wrap; } .color{ flex: 25%; min-height: auto; transition: .4s linear; cursor: pointer; position: relative; } .color:hover{ filter: brightness(80%); } .color-hex{ position: absolute; bottom: 10%; width: 100%; text-align: center; color: #fff; font-size: 24px; letter-spacing: 2px; } .refresh{ position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; border: none; border-radius: 50%; font-size: 18px; color: #fff; background-color: #000; outline: none; cursor: pointer; transition: .4s linear; } .refresh:hover{ transform: rotate(180deg); } .copied{ position: fixed; bottom: 20px; left: 20px; color: #fff; background-color: black; border-radius: 50px; padding: 15px 40px; min-width: 340px; text-align: center; display: none; } @media screen and (max-width:800px){ .color{ flex: 100%; } }
3. Load the jQuery library within the doc.
<script src="/path/to/cdn/jquery.min.js"></script>
4. JavaScript to generate random colors.
$('.refresh').click(function(){ $('.color').each(function(){ var rColor = "#" + Math.random().toString(16).substr(2,6); $(this).css('background-color',rColor); $(this).children(".color-hex").text(rColor); }); }).trigger('click');
5. The JavaScript to repeat the chosen color to the clipboard.
$('.color').click(function(){ var input = $('<input>'); var color = $(this).children(".color-hex").text(); $('body').append(input); input.val(color).select(); document.execCommand('copy'); input.remove(); $('.copied').fadeIn().delay(2000).fadeOut(); });
Random Color Picker, ColorsPicker Plugin/Github
See Demo And Download
Official Website(arminmehraeen): Click Here
This superior jQuery/javascript plugin is developed by arminmehraeen. For extra Advanced Usage, please go to the official website.