Random Hex Color Picker With jQuery

A JavaScript (jQuery) powered random color picker app that helps you to quickly select a nice color ,and get the hex code. Developed using HTML,CSS, JavaScript and jQuery.

Shortcuts:

• r: Change color
• t: Toggle between dark and light themes
• c: Copy color code
• m: Show more info
• h: Show history

How to use it:

1. Build the HTML for the random color picker.

<!-- Dark Mode Toggler -->
<button onclick="hidea()" id="dark-mode-toggle" class="dark-mode-toggle" title="change theme color">
  <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 496">
    <path fill="currentColor" d="M8,256C8,393,119,504,256,504S504,393,504,256,393,8,256,8,8,119,8,256ZM256,440V72a184,184,0,0,1,0,368Z" transform="translate(-8 -8)" />
  </svg>
</button>

<!-- Color Picker -->
<input id="color_input" type="color" value="#000000" title="load your color" onclick="clrpicker()">

<!-- Output -->
<section class="main">
  <div type="text" class="div1">
    <div class="divtxt" id="txt"></div>
    <div class="divrgb" id="divrgb"></div>
</section>

<!-- Display More Info About The Color -->
<div class="buttons">
  <button class="button1" id="moreinfo" onclick="window.open(link)">more info</button>
</div>

<!-- Copy The Color Code -->
<div class="buttons">
  <button id="copy" class="button1" onclick="copyToClipboard('#txt');showa()">copy text</button>
</div>

<!-- Re-generate A New Color -->
<div class="buttons">
  <button class="button1" id="refresh" onclick="main();hidea();input_refresh()">refresh</button>
</div>

<!-- History -->
<div class="history">
  <h1 id="history">
    <span class="span1">History list</span><br>
    <ol id="historylist"></ol>
  </h1>
</div>
<button id="hbutton" class="button2" onclick="showh();">Show History</button>

<!-- Feedback Message -->
<div class="alert" id="alert">
  <span class="closebtn" onclick="hidea()">&times;</span>
  <span id="alertspan" class="alertspan"></span>
</div>

2. Load the necessary jQuery and other resources in the document. That's it.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="js/shortcuts.js"></script>
<script src="js/main.js"></script>

Changelog:

2022-07-22

• Update app.js

2022-07-20

• Update app.js

2022-07-17

• Update main.js

2022-05-09

• Fixed demo page

2022-05-07

• JS & CSS updated

---

This awesome jQuery plugin is developed by maciekt07. For more Advanced Usages, please check the demo page or visit the official website.