Random Shade Picker In jQuery

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-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.