Create Dynamic Hex Colors | HTML, CSS & JS Tutorial
Table of Contents:
- Introduction
- Setting up the HTML File
- Linking CSS File
- Creating the HTML Structure
4.1. Creating the Container
4.2. Adding the Hex Color Div
4.3. Adding the Button
- Writing the JavaScript Code
5.1. Declaring Constants
5.2. Generating Random Hex Color
5.3. Changing the Text and Button Color
- Styling the CSS
6.1. Setting Background Color and Position
6.2. Styling the Hex Color Div
6.3. Styling the Button
6.4. Applying Hover Effects to the Button
- Using the TinyColor Library
- Final Testing and Output
- Summary and Conclusion
Article:
How to Create a Random Hex Color Generator using HTML, CSS, and JavaScript
Introduction
In this tutorial, we will learn how to create a random hex color generator using HTML, CSS, and JavaScript. We will walk through the step-by-step process of setting up the HTML file, linking the CSS file, creating the HTML structure, writing the JavaScript code, and styling the CSS. Additionally, we will use a JavaScript library called TinyColor to convert the generated hex color into HSL and apply appropriate text and button colors based on the brightness of the color.
1. Setting up the HTML File
To get started, open your preferred code editor (we recommend VS Code) and create a new HTML file called "index.html". Declare the doctype and start the HTML code using the <html> tag. Inside the <head> tag, add the <title> tag and link the CSS file using the <link> tag.
2. Linking CSS File
In the <link> tag, make sure to provide the appropriate attributes such as rel, type, and href to include the CSS file. This will allow us to style the elements of our HTML page.
3. Creating the HTML Structure
To create the HTML structure, we will start by creating a container using a <div> element with the class "container". Inside the container, we will add another division with the class "hex color" and ID "hex". Inside this division, we will add a <span> element to display the generated color.
Next, we will create a <div> element with the class "btn" and ID "btn". This div will act as our button to generate random colors. Make sure it is placed inside the container and not inside the "hex color" div. Add the text "Generate" inside this div.
4. Writing the JavaScript Code
In the JavaScript file (let's call it "sketch.js"), we will start by declaring constants for the elements used in our HTML. We will use the getElementById method to create a reference to the respective elements. As the body does not have an ID, you can use the querySelector method for that.
To generate a random hex color, we will write a function called "generateHex". Inside this function, we will declare a string containing all the digits present in the hexadecimal system. We will also declare a variable "count" to be used in a loop for color generation.
Using a while loop, we will continuously concatenate the color string with random characters from the string containing the hex digits. We will use the Math.random() method, which returns a floating value between 0 and 1, and multiply it by 16. To round off the value to the nearest integer, we use Math.floor().
Finally, we will change the text of the <span> element to display the newly generated color and change the color of the body using the style property to dynamically update the CSS of DOM elements.
5. Styling the CSS
To style the CSS, we will create a file called "style.css" (make sure to use the same name in the href attribute of the link tag). Using CSS, we will set the background color of the body to black. We will position the container div to the center of the screen by setting its position to absolute and adjusting its top and left positions.
We will style the "hex color" div by setting its color to white, display to block, font weight to 700 for bold text, and font size to 90 pixels. Additionally, we will give it a bottom margin of 20 pixels to prevent overlapping with the button text. We will also use text transformations and decorations to enhance its appearance.
For the button, we will set its display to flex, color to white, justify content to center, background color to transparent, font size to 30 pixels, and border properties for a solid border effect. We will also apply a box shadow to create an interactive hover effect.
6. Using the TinyColor Library
To convert our generated hex color to HSL and apply appropriate text and button colors based on the brightness, we will use the TinyColor JavaScript library. You can download the library or paste the raw data into a separate JavaScript file.
To include the library in our HTML file, add a script tag and link the library using the appropriate source. Once added, declare a variable "hsl" and initialize the module with the generated hex color.
Use the toHsl() method to convert the color to its HSL value. We will then use an if condition to determine whether the lightness of the color is greater than 0.5. If it is, we will color the elements black; otherwise, we will color them white.
7. Final Testing and Output
Now we can test our program. Open the HTML file in a browser and click on the "Generate" button to see the randomly generated color. The text and button color will adjust dynamically based on the brightness of the color. Feel free to play with the code and values to customize the result.
8. Summary and Conclusion
In this tutorial, we successfully created a random hex color generator using HTML, CSS, and JavaScript. We learned how to set up the HTML file, link the CSS file, create the HTML structure, write the JavaScript code, and style the CSS. We also utilized the TinyColor library to convert the hex color to HSL and apply appropriate text and button colors based on the brightness. This generator can be a useful tool for web designers and developers.
Thank you for following along with this tutorial! Don't forget to drop a like on the video and subscribe to our channel for more exciting tutorials. Have a great day!
Saas Video Reviews
WHY YOU SHOULD CHOOSE SaasVideoReviews
