[Random] Amazing Color Picker With HTML / CSS / JQuery

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.

Related Posts

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

bootstrap-5-treeview

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Responsive-FAQ-Accordion-Dropdown

Responsive FAQ Accordion Dropdown In HTML and CSS

How to create responsive accordion Expandable and Collapsible Frequently Asked Questions Elements. Accordion HTML, is an easy and seamless accordion FAQ component built with CSS and HTML…

swiper-touch-slider

Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…

jquery-steps-plugin

[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…

VenoBox-Responsive-jQuery-Lightbox-Plugin

Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

Leave a Reply

Your email address will not be published. Required fields are marked *