The Random Color Generator application can Generate new and random colors each time the user clicks on the Generate Color button. The user has the feature to Copy the HEX and RGB code of the generated color for the application. There is Dark Mode functionality, through which the user can view the generated color in the Dark Mode also and can toggle in Light Mode using the same button.
Approach to Design Random Color Generator
- Create the basic layout or structure of the Color Application using various HTML tags like <h1>,<h3>,<div>, and <button>. Also, link all the necessary CDN links for fonts, icons, etc.
- Once the layout is created, we need to style the application with various CSS styling properties like background, font-family, padding, border, etc. This makes the application visually attractive in terms of appearance.
- In the main JavaScript file, we have defined the function getColorFn() which generated the random color using the Math.random() function.
- The disFn() is used to represent the generated color in its visual form along with its HEX Code and RGB Code.
- The hexToRgb() function parses the HEX code to the RGB code.
- There is cpyFn() which is used to copy the HEX Code and RGB code of the generated color. Additionally, there is a feature to toggle between Light Mode and Dark Mode to view the colors in both scenarios.
Example: This example describes the basic implementation for a Random color generator app in HTML CSS and JavaScript.
HTML
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link href=
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="app-title">
GeeksforGeeks Random Color Generator
</h1>
<div id="colorDisplay" class="color-card animate__animated animate__fadeIn">
<p id="colorHex">#FFFFFF</p>
<p id="colorRgb">RGB(255, 255, 255)</p>
</div>
<div class="buttons">
<button onclick="genColorFn()">
<i class="fas fa-random"></i> Generate Color
</button>
<button onclick="cpyFn('colorHex')">
<i class="far fa-copy"></i> Copy HEX
</button>
<button onclick="cpyFn('colorRgb')">
<i class="far fa-copy"></i> Copy RGB
</button>
<button onclick="darkFn()">
<i class="fas fa-adjust"></i> Dark Mode
</button>
</div>
<p id="copyMessage" class="animate__animated"></p>
</div>
<script src="app.js"></script>
<script>
document.addEventListener('DOMContentLoaded', genColorFn);
</script>
</body>
</html>
|
CSS
/* Filename: style.css */body { margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
background: linear-gradient(to right, #3494E6, #EC6EAD);
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
} .app-title { font-size: 20px;
color: #4CAF50;
margin-bottom: 20px;
font-weight: bold;
} .container { background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
overflow: hidden;
text-align: center;
} .color-card { background: #fff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} .color-card p { font-size: 18px;
margin: 10px 0;
} .buttons button { margin: 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
} .buttons button:hover { background: #FF4848;
} #copyMessage { font-size: 14px;
color: #333;
margin: 10px 0;
} |
Javascript
/*Filename: app.js */let darkVar = false;
function genColorFn() {
const rColor = getRandomColor();
disFn(rColor);
} function getRandomColor() {
const l = '0123456789ABCDEF';
let col = '#';
for (let i = 0; i < 6; i++) {
col += l[Math.floor(Math.random() * 16)];
}
return col;
} function disFn(col) {
const colDis = document.getElementById('colorDisplay');
const hex = document.getElementById('colorHex');
const rgb = document.getElementById('colorRgb');
colDis.style.backgroundColor = col;
hex.textContent = col;
rgb.textContent = hexToRgb(col);
} function hexToRgb(hex) {
const temp = parseInt(hex.substring(1), 16);
const r = (temp >> 16) & 255;
const g = (temp >> 8) & 255;
const b = temp & 255;
return `RGB(${r}, ${g}, ${b})`;
} function cpyFn(elementId) {
const ele = document.getElementById(elementId);
const ta = document.createElement('textarea');
ta.value = ele.textContent;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
msgFn('Color code copied to clipboard!');
} function msgFn(msg) {
const cpyMsg = document.getElementById('copyMessage');
cpyMsg.textContent = msg;
cpyMsg.classList.add('animate__fadeIn');
setTimeout(() => {
cpyMsg.textContent = '';
cpyMsg.classList.remove('animate__fadeIn');
}, 2000);
} function darkFn() {
darkVar = !darkVar;
themeFn();
} function themeFn() {
const body = document.body;
body.style.background = darkVar ? '#333' :
'linear-gradient(to right, #3494E6, #EC6EAD)';
body.style.color = darkVar ? '#fff' : '#333';
const container = document.querySelector('.container');
container.style.background =
darkVar ? 'rgba(0, 0, 0, 0.9)' :
'rgba(255, 255, 255, 0.9)';
} |
Output: