DEV Community

Cover image for RGB color picker using HTML & Bootstrap
Dhruv Rajkotia
Dhruv Rajkotia

Posted on

RGB color picker using HTML & Bootstrap

Today, I have created a RGB color picker using the HTML and Bootstrap. It was kind of fun and completed this within the 10 minutes of the development.

Here is the LIVE DEMO

Technologies that used to build this demo

  1. HTML
  2. CSS (Inline)
  3. Bootstrap 5
  4. Javascript(A few lines)

Code snippet

Here is the link of the code snippet if you wanted to have a look at the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RGB Color Chooser</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body style="background-color: black;">
    <header>
        <h1 class="text-center my-4 font-monospace text-white">RGB COLOR PICKER</h1>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div id="result" class="shadow rounded col-md-4 d-flex justify-content-center p-5 my-5" style="background-color: rgb(127,127,127);">

            </div>
            <div class="col-md-4"></div>
        </div>
        <div class="row">
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">RED</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">GREEN</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange2" oninput='OutputIdGreen.value = customRange2.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdGreen">127</output>
            </div>
            <div class="col-md-4 col-lg-4 p-5">
                <p class="text-center text-white">BLUE</p>
                <input type="range" class="form-range" min="0" max="255" step="1" id="customRange3" oninput='OutputIdBlue.value = customRange3.value' onchange="changebackground()">
                <output class="text-center text-white" style="display: block;" id="OutputIdBlue">127</output>
            </div>
        </div>
    </div>

    <script>

        function changebackground(){
            document.getElementById('result').style.backgroundColor = 'rgb(' + document.getElementById("OutputIdRed").value + ',' + document.getElementById("OutputIdGreen").value + ',' + document.getElementById("OutputIdBlue").value + ')';
        }
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Key Points to learn with this demo

  • Bootstraps Classes
  • Display Scroll value without using the javascript.

So If you have checked the code,

<input type="range" class="form-range" min="0" max="255" step="1" id="customRange1" oninput='OutputIdRed.value = customRange1.value' onchange="changebackground()">
<output class="text-center text-white" style="display: block;" id="OutputIdRed">127</output>

Enter fullscreen mode Exit fullscreen mode

So here we are showing the scroll value that user has selected. So for that we have used the oninput field and set the user selected value in the output field.

Conclusion:
Today, We have created a small demo where user can see the actual color based on the RGB values. We have created that demo using the HTML and Bootstrap. Also we have covered the key points that we can learn from this small demo which has developed within the 10 minutesπŸ˜€. Hope you liked it and learn something new today.

I'm also posting some useful content on twitter. So You guys can follow me there. Link

Discussion (4)

Collapse
jonrandy profile image
Jon Randy

I assume this was more about using Bootstrap etc. - as it would be far easier to use the built-in HTML colour picker

Collapse
dhruv_rajkotia profile image
Dhruv Rajkotia Author

Thanks for your comment Jon, Yes, correct. It's more like to see how it's change based on the RGB values changes. But for the built-in HTML color picker mostly used the hex values i believe not the rgb one. correct me if i wrong?

Collapse
jonrandy profile image
Jon Randy

Try it out. Varies from browser to browser