Random Color Generator

Developer
Sasha
Size
3,519 Kb
Views
125,488
  1. Random Color Generator Previews
  2. Random Color Generator HTML Codes
  3. Random Color Generator CSS Codes
  4. Random Color Generator JS Codes

How do I make an random color generator?

My speed coding videos on Youtube. What is a random color generator? How do you make a random color generator? This script and codes were developed by Sasha on 12 June 2022, Sunday.

Random Color Generator Previews
IQ Test

Random Color Generator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Color Generator</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.5/waves.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.5/waves.css" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="text">Random Color Generator</div> <div class="container"> <div id="box_1"> <div class="text_1"></div> </div> <div id="box_2"> <div class="text_2"></div> </div> <div id="box_3"> <div class="text_3"></div> </div> <div id="box_4"> <div class="text_4"></div> </div> <div id="box_5"> <div class="text_5"></div> </div> <button class="button" id="generate">Generate</button> </div> <div class="credit">Coded by <a href="http://sashatran.com/">Sasha Tran</a></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Random Color Generator - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600");
body { overflow: hidden;
}
.wrapper { width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px 0;
}
.wrapper .text { font-size: 35px; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; letter-spacing: 2px; color: #676767;
}
.wrapper .credit { padding: 10px 0; font-size: 12px; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; letter-spacing: 2px; color: #676767;
}
.wrapper .credit a { color: #A152FF; font-weight: 400; text-decoration: none;
}
.container { width: 800px; height: 250px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; letter-spacing: 2px;
}
.container div { display: flex; justify-content: center; align-items: flex-end; width: 150px; height: 150px; margin: 3px; padding-bottom: 5px; transition: all 0.5s cubic-bezier(0.42, 0, 0.46, 0.96); font-size: 24px; border-radius: 6px;
}
.button { background: #00aced; width: 150px; height: 40px; outline: none; border: none; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; letter-spacing: 2px; font-size: 16px; color: #FFF; border-radius: 100px; line-height: 10px;
}
.button:hover { background: #00aced; color: #FFF; line-height: 10px;
}

Random Color Generator - Script Codes JS Codes

$(document).ready(function(){ generate(); $("#generate").on("click", function() { generate(); });
});
function generate() { let rgb, grey, color; for (let i = 1; i < 6; i++) { rgb = createRGB(); grey = greyscale(rgb); color = RGBtoHex(rgb); $("#box_" + i).css("background", "rgb(" + rgb + ")"); $(".text_" + i).text("#" + color); $(".text_" + i).css("color", "rgb(" + grey + ")"); } $(".container > div").css("box-shadow", "3px 3px 10px #DEE0E0");
}
function createRGB() { let color = []; for (let i = 0; i < 3; i++) { let random = Math.floor(Math.random() * 256); color.push(random); } return color;
};
function RGBtoHex(rgb) { return rgb.reduce(function(hex, color){ const hexLetters = ['A', 'B', 'C', 'D', 'E', 'F']; let second = color % 16; let first = (color - second) / 16; hex += first > 9 ? hexLetters[first - 10] : first; hex += second > 9 ? hexLetters[second - 10] : second; return hex; }, '');
}
function greyscale(arr) { const grey = Math.floor(0.21 * arr[0] + 0.72 * arr[1] + 0.07 * arr[2]); return grey < 150 ? [235, 235, 235] : [35, 35, 35];
}
Waves.attach('.button', ['waves-button', 'waves-float', 'waves-light']);
Waves.init();
Random Color Generator - Script Codes
Random Color Generator - Script Codes
Home Page Home
Developer Sasha
Username sashatran
Uploaded June 12, 2022
Rating 4.5
Size 3,519 Kb
Views 125,488
Do you need developer help for Random Color Generator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sasha (sashatran) Script Codes
Name
Svg Stars Experiment
VueJS Zip Code Finder
SVG Filter Gooey Share, Social Media Button
Creative Juice Co.
Pages of 2017
CSS Gallery Hover Effect
Button with Hover Effect
VueJS Todo List
Instagram Inspired Loader
CSS Girl
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!