In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.
In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color picker to directly change the color with color input. As per the option selected, the fields are dynamically changed and the color is been generated. Users can also copy the color code that is generated and can use it in different sources. Also, the color that is created is shown in the Squae-shaped color box.
Final Output
Approach
- Create the color box as a square shape using type color <input> and CSS classes. Also, there are h1 and h3 to represent the application headings.
- Sliders for RGB and CMYK are done using the tag of <label type=”range”>. This contains the value from 0 to 255. There is <input> field to take the HEX code input from the user.
- Styling the entire application with CSS like fading, shivering, colors, etc. is done using CSS classes and properties.
- In JavaScript code, we first store the reference of HTML elements like ‘color-box’, ‘slider’ etc.
- We have the colorChnage() user-defined function that is used to update the color which is displayed in the square-shaped color box. This function is called when there is a change in the color type.
- The color() user-defined function is used for copying the color code displayed in the color box to the user’s clipboard when the button is clicked. A popup is also generated notifying that the color code is been copied.
Example: This example describes the basic implementation of the Color Generator application using HTML, CSS, and JavaScript.
HTML
<!-- index.html --><!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Color Generator</title>
<link rel="stylesheet"
href="style.css">
<link rel="stylesheet" href=
</head>
<body>
<div class="container">
<div class="card">
<h1 class="text-success">
GeeksforGeeks</h1>
<h3 class="mb-4">Color
Generator using HTML,
CSS and Javascript</h3>
<input type="color" id="color-box" onchange="updatePicker()"
value="#FFFFFF">
<div id="color-type">
<label for="color-type-select">
Type:
</label>
<select id="color-type-select">
<option value="rgb">
RGB</option>
<option value="hex">
Hex</option>
<option value="cmyk">
CMYK</option>
</select>
</div>
<div id="rgb-inputs" class="color-inputs">
<div class="input-group">
<label class="slider-label">Red</label>
<input type="range"
min="0" max="255" value="255" class="slider" id="red-slider">
<span class="slider-value" id="red-value">
255
</span>
</div>
<div class="input-group">
<label class="slider-label">Green</label>
<input type="range" min="0" max="255" value="255" class="slider" id="green-slider">
<span class="slider-value" id="green-value">
255
</span>
</div>
<div class="input-group">
<label class="slider-label">
Blue
</label>
<input type="range"
min="0" max="255" value="255"
class="slider"
id="blue-slider">
<span class="slider-value"
id="blue-value">
255
</span>
</div>
</div>
<div id="hex-input" class="color-inputs">
<label for="hex-color">
Hex Color:
</label>
<input type="text"
id="hex-color" value="#FFFFFF">
</div>
<div id="cmyk-inputs" class="color-inputs">
<div class="input-group">
<label class="slider-label">
Cyan
</label>
<input type="range"
min="0"
max="100" value="0"
class="slider" id="cyan-slider">
<span class="slider-value" id="cyan-value">
0
</span>
</div>
<div class="input-group">
<label class="slider-label">
Magenta
</label>
<input type="range" min="0" max="100"
value="0" class="slider" id="magenta-slider">
<span class="slider-value" id="magenta-value">
0
</span>
</div>
<div class="input-group">
<label class="slider-label">
Yellow
</label>
<input type="range"
min="0" max="100" value="0" class="slider" id="yellow-slider">
<span class="slider-value"
id="yellow-value">
0
</span>
</div>
<div class="input-group">
<label class="slider-label">
Black
</label>
<input type="range"
min="0"
max="100" value="0" class="slider" id="black-slider">
<span class="slider-value" id="black-value">
0
</span>
</div>
</div>
<div id="color-code"></div>
<button class="generate-button" id="copy-button">
Copy Color Code
<i class="far fa-copy icon"></i>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|
CSS
/* style.css*/body { font-family: Arial, sans-serif;
background-color: #f3eba0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
} .container { display: flex;
align-items: center;
justify-content: center;
height: 100%;
} .card { max-width: 500px;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
transition: transform 0.2s ease-in-out;
background-color: #fff;
overflow: hidden;
margin: 0 auto;
} .card:hover { transform: scale(1.02);
} h1 {
color: green;
font-size: 36px;
margin-bottom: 10px;
} h3 {
font-size: 24px;
margin-bottom: 20px;
} #color-box { width: 200px;
height: 200px;
border: 2px solid #333;
border-radius: 10px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
background-color: #ffffff;
transition: background-color 0.3s ease-in-out;
margin-bottom: 20px;
} #color-type { display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
} #color-type label { font-size: 18px;
margin-right: 30px;
} #color-type-select { font-size: 16px;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
} .color-inputs { display: none;
} .color-inputs.active { display: block;
} .input-group { display: flex;
align-items: center;
margin-bottom: 10px;
} .input-group label { font-size: 18px;
margin-right: 10px;
} .slider { width: 100%;
} .slider-value { font-size: 16px;
margin-left: 10px;
} .generate-button { padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
width: 100%;
margin-top: 20px;
transition: background-color 0.3s ease-in-out;
} .generate-button:hover { background-color: #0056b3;
} #color-code {
font-size: 18px;
margin-top: 20px;
} #copy-button { padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
width: 100%;
margin-top: 20px;
transition: background-color 0.3s ease-in-out;
} #copy-button:hover { background-color: #0056b3;
} .icon {
font-size: 24px;
margin-right: 5px;
} #opacity-label, #opacity-slider, #opacity-value { display: none;
} #color-type-select[value="cmyk"] ~ #opacity-label,
#color-type-select[value="cmyk"] ~ #opacity-slider,
#color-type-select[value="cmyk"] ~ #opacity-value {
display: block;
} |
Javascript
// script.js const cBox = document.getElementById('color-box');
const cType = document.getElementById('color-type-select');
const cInput = document.querySelectorAll('.color-inputs');
const opaText = document.getElementById('opacity-label');
const opaSlide = document.getElementById('opacity-slider');
cType.addEventListener('change', () => {
const choseTpe = cType.value;
cInput.forEach(input => {
input.style.display = 'none';
});
if (choseTpe === 'rgb') {
document.getElementById('rgb-inputs').style.display = 'block';
opaText.style.display = 'none';
opaSlide.style.display = 'none';
} else if (choseTpe === 'hex') {
document.getElementById('hex-input').style.display = 'block';
opaText.style.display = 'none';
opaSlide.style.display = 'none';
} else if (choseTpe === 'cmyk') {
document.getElementById('cmyk-inputs').style.display = 'block';
opaText.style.display = 'block';
opaSlide.style.display = 'block';
}
colorChange();
}); const slides = document.querySelectorAll('.slider');
const slideVal = document.querySelectorAll('.slider-value');
slides.forEach((slider, index) => { slider.addEventListener('input', () => {
slideVal[index].textContent = slider.value;
colorChange();
});
}); const hexColInput = document.getElementById('hex-color');
hexColInput.addEventListener('input', () => {
colorChange();
}); opaSlide.addEventListener('input', () => {
colorChange();
}); cType.value = 'rgb';
cType.dispatchEvent(new Event('change'));
function colorChange() {
const colorType = cType.value;
if (colorType === 'rgb') {
const rValue =
document.getElementById('red-slider').value;
const gValue =
document.getElementById('green-slider').value;
const bValue =
document.getElementById('blue-slider').value;
const col = `rgb(${rValue}, ${gValue}, ${bValue})`;
cBox.textContent = col;
cBox.style.backgroundColor = col;
document.getElementById('color-code').textContent = col;
} else if (colorType === 'hex') {
const hexValue = hexColInput.value;
cBox.textContent = hexValue;
cBox.style.backgroundColor = hexValue;
document.getElementById('color-code').textContent = hexValue;
} else if (colorType === 'cmyk') {
const cValue =
document.getElementById('cyan-slider').value;
const mValue =
document.getElementById('magenta-slider').value;
const yValue =
document.getElementById('yellow-slider').value;
const kValue =
document.getElementById('black-slider').value;
const opacityValue = opaSlide.value;
const r =
Math.round(255 * (1 - cValue / 100) * (1 - kValue / 100));
const g =
Math.round(255 * (1 - mValue / 100) * (1 - kValue / 100));
const b =
Math.round(255 * (1 - yValue / 100) * (1 - kValue / 100));
const col =
`rgba(${r}, ${g}, ${b}, ${opacityValue})`;
const cmykCol =
`CMYK(${cValue}%, ${mValue}%, ${yValue}%, ${kValue}%)`;
cBox.textContent = cmykCol;
cBox.style.backgroundColor = col;
document.getElementById('color-code').textContent = cmykCol;
}
} const cpBtn = document.getElementById('copy-button');
function cpyColor() {
const cCode =
document.getElementById('color-code').textContent;
const input =
document.createElement('textarea');
input.value = cCode;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
alert('Color code copied to clipboard: ' + cCode);
} cpBtn.addEventListener('click', cpyColor);
|
Output: