How to create a Color Generator using HTML CSS and JavaScript ?
Last Updated :
23 Jul, 2024
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=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</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>
/* 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;
}
// 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:
Similar Reads
How to create RGB color generator using HTML CSS and JavaScript ? In this article, we will create a RGB color generator using HTML, CSS, and JavaScript. Using RGB color generator, we can construct all the colors from the combination of Red, Green, Blue colors. Each color is represented by the range of decimal numbers from 0 to 255 (256 levels for each color). So,
3 min read
How to create Hex color generator using HTML CSS and JavaScript? Hex color codes are six-digit combinations representing the amount of red, green, and blue (RGB) in a color. These codes are essential in web design and development for specifying colors in HTML and CSS. The hex color generator provides the hex code for any selected color, making it a valuable tool
2 min read
How to create linear-gradient color generator using HTML, CSS and JavaScript ? Creating a background generator using HTML, CSS, and JavaScript is an excellent way to add interactive and visually appealing features to your web projects. This tool allows users to generate gradient backgrounds based on their selected color values. In this article, we'll walk you through the steps
2 min read
Design Random Color Generator using HTML CSS and JavaScript A Random Color Generator app is used to create random colors with a simple button click, displaying both HEX and RGB codes that users can copy. It's built using HTML, CSS, and JavaScript, making it a handy tool for designers or developers who need quick color ideas. The app can also include a Dark M
3 min read
How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit
2 min read
Create a Coin Flip using HTML, CSS & JavaScript We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used
4 min read
How to Create Text Color Animation using HTML and CSS ? The text color can be changed according to the programmer’s choice using CSS @keyframes rule. In this article, we will see how to create text color animation using HTML and CSS. Preview:Approach:Create an HTML file with a centered <div> containing an <h2> element.Use CSS to reset default
1 min read
Create Feature Flags using HTML CSS & JavaScript Feature flags, also known as feature toggles, are a crucial component of modern web development. They enable developers to control feature releases, test functionalities, and tailor user experiences dynamically.This article introduces a feature flag mechanism to control the dynamic change of the bac
4 min read
How to randomly change image color using HTML CSS and JavaScript ? In this article, we will create a webpage where we can change image color randomly by clicking on the image using HTML, CSS, and JavaScript. The image color will change randomly using the JavaScript Math random() function.Approach:First of all select your image using HTML <img> tag.In JavaScri
2 min read
How to pick a random color from an array using CSS and JavaScript ? The task is to pick a random color from an array using CSS. There is no way to do this using CSS only. CSS doesn't support logical statements because CSS is purely deterministic (there is nothing like array etc in CSS). We can use client-side JavaScript to select a random color from the array. Below
1 min read