Random Color Palette Generator Using HTML, CSS & JavaScript
In this blog, This code is for a random color palette generator. The HTML document includes a button with the id “refreshBtn” and a section with the class “container.” The button, when clicked, calls a function called “addColor()” which generates random colors for each of the 40 boxes within the container section.
The CSS styles the button and the container, as well as the boxes within the container. The button’s background color changes to the last copied color. The background color of the whole page changes to the last copied color.
The JavaScript file creates 40 div elements with the class “box” and appends them to the container section. The function “addColor()” then assigns a random color to each box using the “RandomHexColorCode()” function and adds an event listener to each box so that when clicked, the color code of the box will be copied to the clipboard and displayed in an alert.
The “RandomHexColorCode()” function creates a random color code in the hexadecimal format by generating random characters from the string “0123456789abcdef” and concatenating them to form a six-character color code, which is then prefixed with “#” to create a valid hex color code.
This code also uses Sweetalert library to show a pop-up message after the color is copied. The message will disappear after 1.5 sec.
Video Tutorial of Random Color Palette Generator
To see a live demonstration of the Random Color Palette Generator, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
A Random Color Palette Generator
HTML:
Create a new file with the name “index.html
” and add the provided code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Random Color Palette Generator</title> </head> <body> <button id="refreshBtn" class="btn" onclick="addColor();">Refresh</button> <section class="container"></section> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> </body> </html>
This is an HTML document that sets up a webpage with a button labeled “Refresh” and an empty section with a class of “container”. The button has an onclick function that triggers the “addColor()” function.
CSS:
Create a new CSS file named “style.css
” and copy the provided code into it. Ensure that the file has a “.css
” extension.
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Poppins; } .btn { background: none; color: #fff; padding: 5px 40px; font-size: 1.2em; font-weight: 500; margin: 15px auto; max-width: 200px; outline: none; background: #ced4da; display: block; border: 2px solid #fff; border-radius: 20px; text-shadow: 0 0 8px rgba(0, 0, 0, 0.9); cursor: pointer; box-shadow: 0px 50px 100px -20px rgba(50, 50, 93, 0.25), 0px 30px 60px -30px rgba(0, 0, 0, 0.3), inset 0px -2px 6px 0px rgba(10, 37, 64, 0.35), 0px 5px 5px rgba(0, 0, 0, 0.3); } .container{ display: flex; flex-wrap: wrap; } .box{ width: 20%; height: 99px; display: flex; justify-content: center; align-items: center; border: 2px solid #fff; color: #fff; font-size: 1.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); cursor: pointer; }
This is a CSS file that styles the elements of the webpage. It sets the default font to Poppins and sets some basic styling for the elements on the page.
- The first block of CSS applies styles to all elements on the page by using the universal selector (*). It sets the margin, padding and box-sizing for all elements to 0, and sets the font-family to Poppins.
- The second block of CSS applies styles to elements with the class “btn”. It sets the background color to none, the text color to white, and the font-size and font-weight to 1.2em and 500 respectively. It also sets the margin, max-width and outline properties, and styles the button’s background, border, border-radius, text-shadow and cursor.
- The third block of CSS applies styles to elements with the class “container”. It sets the display property to flex, and the flex-wrap property to wrap.
- The fourth block of CSS applies styles to elements with the class “box”. It sets the width, height and display properties of the elements, and also sets the justify-content, align-items, border, color, font-size, text-shadow and cursor properties.
JavaScript:
In between the <body></body>
tags, you can include JavaScript code by enclosing it within <script>
tags.
for(let i = 1; i <=40; i++){ const box = document.createElement('div'); box.classList.add('box'); document.querySelector('.container').appendChild(box); } const randomColorBlock = document.querySelectorAll('.box'); function addColor(){ randomColorBlock.forEach(e => { var newColor = RandomHexColorCode(); e.style.background = newColor; e.innerHTML = newColor; e.addEventListener('click', myFunction); }) } function RandomHexColorCode(){ var chars = "0123456789abcdef"; var colorLength = 6; var color = ""; for (var i = 0; i < colorLength; i++){ var randomColor = Math.floor(Math.random() * chars.length); color += chars.substring(randomColor,randomColor+1); } return "#"+color; } var copiedColor = ""; function myFunction(e){ var text = e.target.innerHTML; copiedColor = text; var textArea = document.createElement("textarea"); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); textArea.remove(); swal({ title: "Copied!", text: `The color code is ${text}.`, icon: "success", buttons: false, timer: 1500 }); document.getElementById("refreshBtn").style.background = copiedColor; document.querySelector("body").style.background = copiedColor; }
This is an HTML file with some JavaScript code that creates a random color palette generator. When the “Refresh” button is click, a function call “addColor” is call. The “addColor” function creates 40 div elements with the class “box” and appends them to the container. Then it assigns a random hex color code to the background color of each div element, and sets the innerHTML of each div element to the corresponding hex color code. It also adds an event listener to each div element, so that when one is click, the color code is copy to the clipboard, and a message is display.
The function “RandomHexColorCode” generates a random hex color code by randomly selecting 6 characters from the string “0123456789abcdef”, and concatenating them together with a “#” symbol at the beginning. The function “myFunction” is the event listener that is call when a div element is click. It gets the color code from the innerHTML of the div element, copies it to the clipboard, and displays a message. It also changes the background color of the “Refresh” button and the body to the copied color.
Summary:
This code is an HTML page that generates random color palettes. The page includes a “Refresh” button and a container section where the color boxes will be display. When the “Refresh” button is click, it calls a JavaScript function called “addColor()” which creates 40 color boxes and assigns each box a randomly generated hex color code. The color code is also display in the center of each box. When a color box is click, the color code is copied to the clipboard and a message is display to confirm that the color has been copied. Additionally, the “Refresh” button and the background color of the entire page will change to the color that was copied. The CSS code styles the “Refresh” button, the container section, and the color boxes.