Here is what we'll have:

Step 3: Style with CSS

1. Open the styles.css file in your code editor.

2. Add CSS Styles: Copy and paste the following code into styles.css:

    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    .color-picker {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .color-info {
        margin-top: 20px;
    }
    p {
        margin: 5px 0;
        font-size: 16px;
    }
   

Explanation:

• body: Styles the body of the page. It centers the content both vertically and horizontally and sets a light gray background.

• font-family: Arial, sans-serif;: Sets the font for the text on the page.

• display: flex;: Uses Flexbox to layout the page.

• justify-content: center; and align-items: center;: Centers the content.

• height: 100vh;: Sets the height to 100% of the viewport height.

• margin: 0;: Removes default margin.

• background-color: #f0f0f0;: Sets the background color of the page.

• .color-picker: Styles the color picker container with a white background, padding, rounded corners, and a shadow for a card-like appearance.

• .color-info: Adds a margin at the top to separate it from the color input.

• p: Styles the paragraphs within the color info, setting margin and font size.

Here is what we will have:

At this point, we can pick a color but the color codes won't be displayed. To have the color codes displayed, we'll have to add some JavaScript.

Step 4: Add JavaScript Functionality

1. Open the script.js file in your code editor.

2. Add JavaScript Code: Add the following code into script.js:

    document.getElementById('colorInput').addEventListener('input', function() {
        const color = this.value;
        document.getElementById('hexValue').textContent = color;
        document.getElementById('rgbValue').textContent = hexToRgb(color);
    });
    function hexToRgb(hex) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return `rgb(${r}, ${g}, ${b})`;
    }
   

   Explanation:

   • document.getElementById('colorInput'): Selects the color input element by its ID.

   • .addEventListener('input', function() {...}): Adds an event listener that triggers whenever the user selects a new color.

   • const color = this.value;: Gets the current value of the color input, which is in HEX format.

   • document.getElementById('hexValue').textContent = color;: Updates the text content of the HEX value display with the selected color.

   • document.getElementById('rgbValue').textContent = hexToRgb(color);: Converts the HEX color to RGB and updates the RGB value display.

   • function hexToRgb(hex) {...}: A function that converts a HEX color string to an RGB string.

     • parseInt(hex.slice(1, 3), 16): Converts the first two characters of the HEX color (after the #) to a decimal number, representing the red component.

     • parseInt(hex.slice(3, 5), 16): Converts the next two characters to the green component.

     • parseInt(hex.slice(5, 7), 16): Converts the last two characters to the blue component.

     • return rgb(${r}, ${g}, ${b});: Returns the RGB color as a string.

1. Open the Project in a Browser: Open the index.html file in a web browser to view your color picker tool.

2. Interact with the Tool: Use the color input to select different colors. The HEX and RGB values should update automatically as you select new colors.

Final Thoughts

Congratulations! You've successfully created a color picker tool using HTML, CSS, and JavaScript.

This project is a great way to practice working with user input and manipulating the DOM. You can further enhance this tool by adding features like copying color values to the clipboard or saving favorite colors.

Enjoy experimenting and learning!