A user-friendly, jQuery primarily based coloration picker for producing random colours you can simply copy the HEX coloration code to the clipboard with a single click on.
The way to use it:
1. Add fallback colours along with Refresh/Gradient Buttons and Copied data field to the colour picker.
<div class="colors-container"> <div class="coloration"> <div class="color-hex">#000000</div> </div> <div class="coloration"> <div class="color-hex">#000000</div> </div> <div class="coloration"> <div class="color-hex">#000000</div> </div> <div class="coloration"> <div class="color-hex">#000000</div> </div> <button class="refresh">Refresh Shade</button> <button class="generate-gradient">Generate Gradient</button> <div class="copied">Copied!</div> </div>
2. The required CSS kinds for the colour picker.
.colors-container{ width: 100%; min-height: 100vh; show: flex; flex-wrap: wrap; } .coloration{ flex: 25%; min-height: auto; transition: .4s linear; cursor: pointer; place: relative; } .coloration:hover{ filter: brightness(80%); } .color-hex{ place: absolute; backside: 10%; width: 100%; text-align: middle; coloration: #fff; font-size: 24px; letter-spacing: 2px; } .refresh{ place: fastened; high: 20px; proper: 20px; width: 50px; peak: 50px; border: none; border-radius: 50%; font-size: 18px; coloration: #fff; background-color: #000; define: none; cursor: pointer; transition: .4s linear; } .refresh:hover{ remodel: rotate(180deg); } .copied{ place: fastened; backside: 20px; left: 20px; coloration: #fff; background-color: black; border-radius: 50px; padding: 15px 40px; min-width: 340px; text-align: middle; show: none; } @media display screen and (max-width:800px){ .coloration{ flex: 100%; } }
3. Load the jQuery library within the doc.
<script src="/path/to/cdn/jquery.min.js"></script>
4. The primary JavaScript operate to generate colours and gradients.
var colorNames = { "#000000": "Black", "#ffffff": "White", // Add extra coloration mappings as wanted }; operate generateGradient() { var color1 = "#" + Math.random().toString(16).substr(2,6); var color2 = "#" + Math.random().toString(16).substr(2,6); $('.coloration').every(operate(index) "Unknown"); ); } operate interpolateColor(color1, color2, issue) { if (color1.size !== 7 || color2.size !== 7) return null; // Invalid coloration format var outcome = "#"; for (var i = 1; i <= 6; i += 2) { var c1 = parseInt(color1.substr(i, 2), 16); var c2 = parseInt(color2.substr(i, 2), 16); var interpolated = Math.spherical(c1 + issue * (c2 - c1)); outcome += ("0" + interpolated.toString(16)).slice(-2); } return outcome; } $('.refresh').click on(operate(){ $('.coloration').every(operate()); }).set off('click on'); $('.generate-gradient').click on(operate(){ generateGradient(); });
5. The primary JavaScript to repeat the chosen coloration to the clipboard.
$('.coloration').click on(operate(){ var enter = $('<enter>'); var coloration = $(this).kids(".color-hex").textual content(); $('physique').append(enter); enter.val(coloration).choose(); doc.execCommand('copy'); enter.take away(); $('.copied').fadeIn().delay(2000).fadeOut(); });
Changelog:
2023-04-25
- Add a button to generate gradiant coloration
2023-03-28
This superior jQuery plugin is developed by arminmehraeen. For extra Superior Usages, please verify the demo web page or go to the official web site.