Build Simple Color Picker using JavaScript | JS Projects with Code

let’s build a Color Picker by applying the basic JavaScript concepts.

Refer to the below image.


  • The HTML container element that is wrapping all the HTML elements should have the id colorPickerContainer
  • The HTML span element should have the id selectedColorHexCode
  • The HTML button element with text as #e0e0e0 should have the id button1
  • The HTML button element with text as #6fcf97 should have the id button2
  • The HTML button element with text as #56ccf2 should have the id button3
  • The HTML button element with text as #bb6bd9 should have the id button4

By following the above instructions, achieve the given functionality.

  • The background color of the page and the Hex Code value in the HTML span element should change when the HTML button element is clicked.
  • The background color of the page and the background color of the clicked HTML button element should be the same.
  • The text in the clicked HTML button element and the text in the HTML span element should be the same.

Here is the Code:


<!DOCTYPE html>
    <link rel="stylesheet" href="" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

    <div id="colorPickerContainer" class="d-flex flex-column justify-content-center">
        <h1>Color Picker</h1>
            <button class="button btn1" onclick="colorOne()" id="button1">#e0e0e0</button>
            <button class="button btn2" onclick="colortwo()" id="button2">#6fcf97</button>
            <button class="button btn3" onclick="colorthree()" id="button3">#56ccf2</button>
            <button class="button btn4" onclick="colorfour()" id="button4">#bb6bd9</button>
        <p class="Background_Color mt-3 mb-3">Background Color : <span id="selectedColorHexCode">#fffff</span></p>
        <p>Try clicking on one of the colors above to change the background color of this page!</p>



#colorPickerContainer {
    height: 100vh;
    text-align: center;

h1 {
    font-weight: 900;
    font-size: 35px;
    margin-bottom: 20px;

.button {
    height: 90px;
    width: 90px;
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    font-size: 12px;

.btn1 {
    background-color: #e0e0e0;

.btn2 {
    background-color: #6fcf97;

.btn3 {
    background-color: #56ccf2;

.btn4 {
    background-color: #bb6bd9;

.Background_Color {
    background-color: #222222;
    color: #ffffff;
    padding: 10px;
    font-size: 22px;
    font-weight: 600;
    border-radius: 10px;


#selectedColorHexCode {
    color: #49a6e9;


let colorPickerContainer = document.getElementById("colorPickerContainer");
let selectedColorHexCode = document.getElementById("selectedColorHexCode");

function colorOne() { = "#e0e0e0";
    selectedColorHexCode.textContent = "#e0e0e0";

function colortwo() { = "#6fcf97";
    selectedColorHexCode.textContent = "#6fcf97";

function colorthree() { = "#56ccf2";
    selectedColorHexCode.textContent = "#56ccf2";

function colorfour() { = "#bb6bd9";
    selectedColorHexCode.textContent = "#bb6bd9";

Github Link:

Github Repository

Related Posts

Time Converter Using JavaScript | Simple JS Projects for Beginners

Time Converter Today, let’s build a Time Converter by applying the basic java script concepts. Refer to the below image. Instructions: The HTML input element for entering the number…

JS Program to log the value located at Given Index

Access the values of an array Given an array. myArray = [25, false, “green”, “apple”]Write a Js program to log the value located at the given index….

JavaScript Program to Create & Log an Array

Create & Log an Array Write a JS program to log an array with the given values.‘Orange’, 25, 100, true, 33.58. OutputThe output should be a single…

Traffic Signal Light using Javascript | JS Projects for Beginners with Code

Traffic Signal Light Today, let’s build a Traffic Light by applying the basic Javascript concepts. Refer to the below image. Instructions: The HTML button elements should have the ids stopButton, readyButton,…

Leave a Reply

Your email address will not be published. Required fields are marked *