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, checkboxes. Pure CSS can’t offer Color generator directly because for dynamic values we must write actions, so it is possible accurately with JavaScript. The color generator was used for changing the color of the background for color blindness people. Because they can see only particular colors so if we change the background according to their comfort, they can easily read the content. The color generator is also used to get color code like #fff from a single place to use this color code for other page requirements.
How does Color Generator work in CSS?
In this tutorial, we will see how we can generate different background color generators in JavaScript with CSS. For Clear understanding please refer below Syntaxes and examples:
Syntax 1:
color = element.options[element.selectedIndex].value;
if (color == "value from User") {
document.body.style.backgroundColor = "colorValue";
}Syntax 1 Explanation:
- Options array takes selected index value from the user.
- If condition checks whether selected color existed in the user values. If it exists it gives background color as specified by the user.
- If the condition is not satisfied, the background color as a previous color only.
Syntax 2:
.selected option
{
color: value1;
}Syntax 2 Explanation:
- Once we select any option from the dropdown list then that selected box background color becomes changed to the specified color.
Examples of CSS Color Generator
Given below are the examples of CSS Color Generator:
Example #1
Red Green Blue Background color from 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, color is by default white.
- Selected color always passed from choosenColor() method to script.
- When we select Red Color then the background becomes red color.
- When we select Green Color then background becomes green color.
- When we select Blue Color then the background becomes a blue color.
Example #2
Red Green Blue Background color from 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, color is by default white.
- Selected color always passed from choosenColor() method to script.
- When we select Orange Color then background becomes orange color.
- When we select Yellow Color then the background becomes a yellow color.
- When we select Brown Color then background becomes brown color.
Is it possible to generate background color only within the dropdown box portion?
The answer is Yes. By using selected box option CSS property.
Example #3
Red Green Blue Background color from 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, color is by default white.
- When we select Red Color then the background of the drop-down box becomes red color.
- When we select Green Color then the background of the drop-down box becomes green color.
- When we select Blue Color then the background of the drop-down box becomes blue color.
Example #4
Red Green Blue Background color from 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, color is by default white.
- When we select Orange Color then the background of the drop-down box becomes orange color.
- When we select Yellow Color then the background of the drop-down box becomes yellow color.
- When we select Brown Color then the background of the drop-down box becomes brown color.
Recommended Articles
This is a guide to CSS Color Generator. Here we discuss how we can generate as many colors as we want by using the color generator in CSS by using drop-down boxes, buttons, and links, etc. You may also have a look at the following articles to learn more –
