DEV Community 👩‍💻👨‍💻

Cover image for Color picker using HTML and CSS
Piyush | Coding Torque
Piyush | Coding Torque

Posted on • Originally published at codingtorque.com

Color picker using HTML and CSS

Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Color picker using HTML and CSS. This will be a step-by-step guide. Let's get started 🚀.

Visit codingtorque.com for more projects like this!

Step 1: Import Google Fonts

Import the fonts using Google Fonts API. Below is the code for the Poppins Font. Paste the below code in the <head> tag.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
Enter fullscreen mode Exit fullscreen mode

Step 2 : HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Custom Color picker using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="container">
        <div style="text-align: center;">
            <h1>Coding Torque</h1>
            <div style="display: flex; justify-content:center">
                <input type="text" id="hex">
                <input type="color" id="color">
            </div>
        </div>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Output Till Now

Color picker using HTML and CSS

Step 2: CSS Code

body {
    background: linear-gradient(90deg, #8A2387, #E94057, #F27121);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: poppins;
}

.container {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 20rem;
    height: 10rem;
    padding: 32px;
}

input[type="color"] {
    background-color: white;
    border: none;
    border-radius: 5px;
    height: 40px;
    width: 40px;
    transition: 0.3s;
}

input[type="color"]:hover {
    background-color: deepskyblue;
}

input[type="text"] {
    border: none;
    padding: 10px;
    border-radius: 5px;
    outline: none;
    margin-right: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Output Till Now

Color picker using HTML and CSS

Step 3: JavaScript Code

let colorInput = document.querySelector("#color");
let hexInput = document.querySelector("#hex");
colorInput.addEventListener('input', () => {
    let color = colorInput.value;
    hexInput.value = color;
    document.querySelector('h1').style.color = color;
});
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.