Learn how to create a color palette generator using HTML, CSS, and JavaScript in this step-by-step guide. Understand the basics of color theory and build a custom generator from scratch.
Table of Contents
Color palettes are a crucial element of effective design. Whether you're designing a website, creating graphics, or developing branding materials, choosing the right color scheme can make a big difference in the success of your project.
In this blog post, we will guide you through the process of creating a color palette generator using HTML, CSS, and JavaScript. The color palette generator will allow users to select a base color, and then generate a palette of complementary colors based on that selection. This tool can be extremely useful for designers who need to quickly generate a variety of color schemes for their projects.
To create an effective color palette, it's important to understand the basics of color theory. Color theory is the study of how colors interact with each other, and how they can be combined to create visually appealing designs. By understanding color theory, you can create custom color palettes that are both visually appealing and effective in communicating your message.
By the end of this blog post, you will have a solid understanding of how to create a color palette generator from scratch using HTML, CSS, and JavaScript. You'll also have a better understanding of color theory and design principles, which will help you create more effective designs in the future.
Let's start making an amazing color palette generator using HTML, CSS and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our color palette generator.
Let's break it down:
<!DOCTYPE html> - This is the document type declaration, indicating that this is an HTML5 document.
<html lang="en"> - This is the opening tag for the HTML document. The "lang" attribute indicates that the document is in English.
<head> - This is the opening tag for the head section of the document. The head section contains information about the document, such as the title, character set, and links to stylesheets and scripts.
<title>Color palette generator</title> - This is the title of the document that appears in the browser's title bar.
<meta charset="UTF-8" /> - This meta tag sets the character encoding of the document to UTF-8, which allows for the display of a wide range of characters and symbols.
<meta name="viewport" content="width=device-width" /> - This meta tag sets the viewport width to the width of the device, which allows for better rendering of the page on different devices.
<link rel="stylesheet" href="styles.css" /> - This link tag connects the HTML document to a stylesheet, which contains instructions for how the page should be styled.
<body> - This is the opening tag for the body section of the document. The body section contains the content of the document that is visible to the user.
<div class="container"> - This is a container element that groups together the content of the page.
<h4 class="message"> - This is a heading element that contains a message about the color palette that has been generated.
<strong id="ColorVal">#F9ACA7</strong> - This is a strong element that contains a hexadecimal color value.
<h2>Color palette generator</h2> - This is a heading element that displays the title of the page.
<div class="palettes"></div> - This is a div element that will be filled with the generated color palette.
<button class="btn">Generate palette</button> - This is a button element that, when clicked, will generate a new color palette.
<p>Or just press the "Spacebar" to generate new palettes</p> - This is a paragraph element that informs the user that they can generate a new color palette by pressing the spacebar.
</div> - This is the closing tag for the container element.
<script src="script.js"></script> - This script tag links the HTML document to an external JavaScript file that contains the code for generating the color palette.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our color palette generator using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the color palette generator is in place, the next step is to add styling to the color palette generator using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our color palette generator.
The stylesheet starts with an "@import" rule that imports a font called "Nunito" from Google Fonts.
The CSS code then applies a "reset" style to all elements, removing any default margins, paddings, and box-sizing settings. It also sets a transition of 0.3 seconds to all elements, meaning that any visual changes will be animated smoothly over a period of 0.3 seconds.
The body of the document is given a light blue background color, and the font-family of the document is set to "Nunito". The body element is set to display as a flex container, and the items within the container are aligned to the center both vertically and horizontally. The height of the body is set to 100vh, which means that it will occupy 100% of the viewport height.
The ".container" class is used to define a container element that holds the content of the page. It is given a fixed width of 900px, and a maximum width of 900px to ensure that it does not expand beyond the screen size. The container is set to display as a flex container with a column direction, which means that its children will be arranged vertically. The text within the container is centered both horizontally and vertically.
The ".palettes" class is used to define a flex container that holds a collection of color palettes. The palettes are displayed as a row with space between them, and the container has a padding of 60px at the top and bottom.
Each palette is represented by the ".palette" class, which is a relatively positioned element with a white background color and a border radius of 12px. The palette also has a padding of 8px and a bottom padding of 12px. Each palette has a child element with the ".color" class, which represents the actual color of the palette. The color element has a fixed width and height, a border radius of 8px, and a margin bottom of 12px. The palette also has a child element with the ".h3" class, which displays the name of the palette.
When a palette is active or hovered over, it is given a box-shadow effect and a transform of -10px on the y-axis, which creates a subtle animation effect. The name of the palette also changes color when the palette is active or hovered over.
Finally, there is a ".btn" class that is used to define a button element. The button has a fixed width of 300px and a maximum width of 300px, a padding of 14px, and a border radius of 4px. The button also has a background color and a border color of purple. When the button is hovered over, the background color changes to a darker shade of purple. When the button is clicked, it is given a scale transform of 0.96, which creates a slight "pressed" effect.
There is also a media query that targets screens with a maximum width of 1200px. In this case, the body of the document is given a margin of 50px at the top and bottom, and the height is set to auto, meaning that it will expand to fit its content.
This will give our color palette generator an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all .3s;
}
body {
background-color: #e8ecf3;
font-family: 'Nunito', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.container {
width: 900px;
max-width: 900px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 10px;
}
.container h4 {
position: fixed;
top: 30px;
font-size: 14px;
background-color: #111a36;
color: #e8ecf3;
font-weight: 400;
padding: 12px 30px;
border-radius: 30px;
box-shadow: 0 6px 10px #111a3630;
transform: scale(0);
z-index: 999;
}
h4 strong {
text-transform: uppercase;
}
.container h2 {
font-size: 26px;
}
.container .palettes {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
justify-content: center;
padding: 60px 0;
}
.palettes .palette {
position: relative;
background-color: #fff;
padding: 8px;
padding-bottom: 12px;
border-radius: 12px;
text-align: center;
cursor: pointer;
}
.palette .color {
width: 140px;
height: 190px;
border-radius: 8px;
margin-bottom: 12px;
}
.palette h3 {
color: #95979b;
text-transform: uppercase;
}
.palette.active,
.palette:hover {
transform: translateY(-10px);
box-shadow: 0 18px 20px -8px #424d6430;
}
.palette.active h3,
.palette:hover h3 {
color: #2c2c2c;
}
.btn {
width: 300px;
max-width: 300px;
padding: 14px;
background-color: #8977dd;
border: 1px solid #8977dd;
font-family: inherit;
font-size: 15px;
color: #fff;
border-radius: 4px;
margin-bottom: 15px;
cursor: pointer;
}
.btn:hover {
background-color: #6e5eb4;
}
.btn:active {
transform: scale(.96);
}
@media (max-width:1200px) {
body {
margin: 50px 0;
height: auto;
}
} Step 3 (JavaScript Code):
Finally, we need to create a generate function in JavaScript.
The code starts by selecting elements from the HTML page using the querySelector() method. The generateBtn, palettes, container, and message variables are used to access the button, the palette container, the main container, and the message container, respectively.
The generatePlatte() function is called initially to generate the initial set of color palettes. This function clears any existing palettes and generates five new ones using a loop that runs five times. In each iteration, a random color is generated using the Math.random() and toString() methods. A new div element with a class of palette is created, and the random color is used to set the background color of a child div element with a class of color. The color value is also displayed in an h3 element within the palette div. A click event listener is added to each palette element to enable users to copy the color value to the clipboard.
The copyColor() function copies the color value of a clicked palette element to the clipboard using the navigator.clipboard.writeText() method. The copied color value is also displayed in the message container, which slides down to indicate that the color has been copied. The setTimeout() function is used to slide up the message container after two seconds.
Finally, an event listener is added to the generate button using the addEventListener() method to enable users to generate new palettes by clicking the button.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
const generateBtn = document.querySelector('.btn')
const palettes = document.querySelector('.palettes')
const container = document.querySelector('.container')
const message = document.querySelector('.message')
const generatePlatte = () => {
palettes.innerHTML = ""
for (let i = 0; i < 5; i++) {
let randomColor = Math.floor(Math.random() * 0xffffff).toString(16)
randomColor = `#${randomColor.padStart(6, "0")}`
const palette = document.createElement('div')
palette.classList.add('palette')
palette.innerHTML = `
${randomColor}
`
palette.addEventListener('click', () => copyColor(randomColor))
palettes.appendChild(palette)
}
}
generatePlatte()
const copyColor = (colorVal) => {
const colorCop = container.querySelector('#ColorVal')
message.style.transform = `scale(1)`
navigator.clipboard.writeText(colorVal).then(() => {
colorCop.innerText = `${colorVal}`
setTimeout(() => message.style.transform = `scale(0)`, 2000)
})
}
generateBtn.addEventListener('click', generatePlatte)Final Output:
Conclusion:
In conclusion, creating a color palette generator using HTML, CSS, and JavaScript is an essential skill for designers and developers. With this tool, you can quickly generate custom color schemes that are both visually appealing and effective in communicating your message.
In this blog post, we've covered the basics of color theory and design principles, which are essential for creating effective color palettes. We've also provided a step-by-step guide on how to create a color palette generator from scratch using HTML, CSS, and JavaScript.
By following the steps outlined in this blog post, you can create your own color palette generator and customize it to fit your specific needs. You can also use the knowledge and skills you've gained to create other useful tools and applications.
We hope this blog post has been helpful in expanding your knowledge of color theory and design principles, as well as guiding you through the process of creating a color palette generator. With these tools and knowledge, you can create effective and visually appealing designs that are sure to impress.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
