Updated June 15, 2023
Introduction to CSS Color Generator
Color generator in CSS used to generate random colors by choosing different colors. The color generator can display the chosen color dynamically from the dropdown box, buttons, and checkboxes. Pure CSS can’t offer a Color generator directly because we must write actions for dynamic values, so it is possible accurately with JavaScript. The color generator was used to change the background color for color blindness people. Because they can see only particular colors, they can easily read the content if we change the background according to their comfort. The color generator is also used to get color codes like #fff from a single place to use this color code for other page requirements.
How does Color Generator work in CSS?
This tutorial will show how we can generate different background color generators in JavaScript with CSS. For Clear understanding, please refer to the Syntaxes and examples:
Syntax 1:
color = element.options[element.selectedIndex].value;
if (color == "value from User") {
document.body.style.backgroundColor = "colorValue";
}Explanation:
- The options array takes the selected index value from the user.
- Suppose the condition checks whether the selected color exists in the user values. If it exists, it gives a background color as specified by the user.
- If the condition is not satisfied, the background color is a previous color only.
Syntax 2:
.selected option
{
color: value1;
}Explanation:
Once we select an option from the dropdown list, that box background color changes to the specified color.
Examples of CSS Color Generator
Given below are the examples of CSS Color Generator:
Example #1
Red, Green Blue Background colors from the Selected Dropdown colors list:
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Color Generator</title>
<script>
function choosenColor(element) {
const color = element.options[element.selectedIndex].value;
if (color == "Red") {
document.body.style.backgroundColor = "red";
}
if (color == "Green") {
document.body.style.backgroundColor = "green";
}
if (color == "Blue") {
document.body.style.backgroundColor = "blue";
}
}
</script>
</head>
<style>
.header
{
text-align: center;
}
</style>
<body>
<h2 class="header">Generating Red Green Blue Colors</h2>
<select id="colors" onchange="choosenColor(this)">
<option>Select a Color</option>
<option value="Red">Red Color</option>
<option value="Green">Grren Color</option>
<option value="Blue">Blue Color</option>
</select>
</body>
</html>Output:
Explanation:
- As you can see in the output, when we didn’t select any color from the dropdown box, the color is, by default, white.
- The selected color is always passed from the choosenColor() method to the script.
- When we select Red Color, then the background becomes red color.
- When we select Green Color, the background becomes green color.
- When we select Blue Color, then the background becomes a blue color.
Example #2
Red, Green Blue Background colors from the Selected Dropdown colors list.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Color Generator</title>
<script>
function choosenColor(element) {
const color = element.options[element.selectedIndex].value;
if (color == "Orange") {
document.body.style.backgroundColor = "orange";
}
if (color == "Yellow") {
document.body.style.backgroundColor = "yellow";
}
if (color == "Brown") {
document.body.style.backgroundColor = "brown";
}
}
</script>
</head>
<style>
.header
{
text-align: center;
color: green;
}
</style>
<body>
<h2 class="header">Generating Orange Yellow Brown Colors</h2>
<select id="colors" onchange="choosenColor(this)">
<option>Select a Color</option>
<option value="Orange">Orange Color</option>
<option value="Yellow">Yellow Color</option>
<option value="Brown">Brown Color</option>
</select>
</body>
</html>Output:
Explanation:
- As you can see in the output, when we didn’t select any color from the dropdown box, the color is, by default, white.
- The selected color is always passed from the choosenColor() method to the script.
- When we select Orange Color, the background becomes orange color.
- When we select Yellow Color, then the background becomes a yellow color.
- When we select Brown Color, then the background becomes brown color.
Is it possible to generate background color only within the dropdown box portion?
The answer is Yes by using the selected box option CSS property.
Example #3
Red, Green Blue Background colors from the Selected Dropdown colors list.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Color Generator</title>
</head>
<style>
.colors {
font-size: 1em;
}
.colors option[value="Red"] {
background: Red;
}
.colors option[value="Blue"] {
background: blue;
}
.colors option[value="Green"] {
background: green;
}
.colors option[value="Select a Color"] {
background: white;
}
.header {
text-align: center;
color: brown;
}
</style>
<body>
<h2 class="header">Generating Blue Red Green Colors</h2>
<select class="colors">
<option>Select a Color</option>
<option value="Red">Red Color</option>
<option value="Green">Green Color</option>
<option value="Blue">Blue Color</option>
</select>
</body>
</html>Output:
Explanation:
- As you can see in the output, when we didn’t select any color from the dropdown box, the color is, by default, white.
- When we select Red Color, the background of the drop-down box becomes red.
- When we select Green Color, the background of the drop-down box becomes green.
- When we select Blue Color, the background of the drop-down box becomes blue.
Example #4
Red, Green Blue Background colors from the Selected Dropdown colors list.
Code:
<!DOCTYPE html>
<html>
<head>
<title>CSS Color Generator</title>
</head>
<style>
.colors {
font-size: 1em;
}
.colors option[value="Orange"] {
background: orange;
}
.colors option[value="Yellow"] {
background: yellow;
}
.colors option[value="Brown"] {
background: brown ;
}
.colors option[value="Select a Color"] {
background: white;
}
.header {
text-align: center;
color: green;
}
</style>
<body>
<h2 class="header">Generating Orange Yellow Brown Colors</h2>
<select class="colors">
<option>Select a Color</option>
<option value="Orange">Orange Color</option>
<option value="Yellow">Yellow Color</option>
<option value="Brown">Brown Color</option>
</select>
</body>
</html>Output:
Explanation:
- As you can see in the output, when we didn’t select any color from the dropdown box, the color is, by default, white.
- When we select the Orange Color, the background of the drop-down box becomes orange.
- When we select Yellow Color, the background of the drop-down box becomes yellow.
- When we select Brown Color, the background of the drop-down box becomes brown.
Recommended Articles
We hope that this EDUCBA information on “CSS Color Generator” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
