Color Picker Design with HTML CSS and JavaScript

In this tutorial we will see how to create Color Picker Design with HTML CSS and JavaScript. Pure CSS and JavaScript is used for this purpose, complete code is given.

Table of Contents

HTML Code

Take a look at the HTML code given below.


<div class="color-picker" id="color-picker">
    
    <h1 class="title" id="title">Color Picker</h1>
    
</div>

CSS Code

CSS code is given below.


<style>
*
{
    box-sizing: border-box;
    font-family: 'Fira Sans Extra Condensed', sans-serif;
}
body
{
    background-color: #ECF0F3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
.color-picker
{
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 200px;
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px #333;
}
.title
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.colors
{
    width: 5%;
    height: 50px;
    box-shadow: inset 0px 0px 3px 0px #333;
    transition: 0.5s;
    cursor: pointer;
    float: left;
}
.color-move
{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform: translateY(-70px);
    height: 120px;
}
</style>

JavaScript Code

Take a look at the JavaScript Code given below.


<script>
const colorsArray = ['#d92114','#e91e63','#9c27b0','#673ab7','#3f51b5','#2196f3','#03a9f4','#00bcd4','#009688','#4caf50', '#8bc34a','#cddc39','#ffeb3b','#ffc107','#ff9800','#ff5722','#704535','#857a7a','#607d8b','#13252e'];


var colorPicker = document.getElementById('color-picker');


for(var i=0; i<20; i++)
{
var colorElement = "";
    colorPicker.innerHTML+=colorElement;
}

function changeColor(e)
{
var elements = document.getElementsByClassName('colors');
for(var j=0; j < elements.length; j++)
{
 elements[j].classList.remove('color-move');
}

e.classList.add('color-move');
    
colorPicker.style.backgroundColor=colorsArray[e.id];
document.getElementById('title').style.color='#fff';    
    
}
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Color Picker Design with HTML CSS and JavaScript.