Color Picker
Color Picker Code :
<html>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Color Picker</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
#color-picker-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
display: flex;
flex-direction: column;
align-items: center;
}
.color-line {
display: flex;
width: 100%;
margin-bottom: 10px;
justify-content: space-around;
position: relative;
}
.color-box {
width: 50px;
height: 50px;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
margin-right: 5px;
}
#selected-color-preview {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin-top: 20px;
}
#color-code {
margin-top: 10px;
}
.scroll-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255, 255, 255, 0.7);
border: none;
padding: 5px 10px;
cursor: pointer;
z-index: 10;
}
.scroll-button.left {
left: 0;
}
.scroll-button.right {
right: 0;
}
.color-container {
overflow-x: auto;
white-space: nowrap;
padding: 0 20px;
width: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
}
.color-container::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div id=”color-picker-container”>
<div class=”color-line” id=”color-line-1″>
<!– Color boxes will be added here dynamically –>
</div>
<div class=”color-line” id=”color-line-2″>
<!– Color boxes will be added here dynamically –>
</div>
<div class=”color-line” id=”color-line-3″>
<!– Color boxes will be added here dynamically –>
</div>
<div id=”selected-color-preview”></div>
<div id=”color-code”></div>
</div>
<script>
const colorPickerContainer = document.getElementById(‘color-picker-container’);
const colorLine1 = document.getElementById(‘color-line-1’);
const colorLine2 = document.getElementById(‘color-line-2’);
const colorLine3 = document.getElementById(‘color-line-3’);
const selectedColorPreview = document.getElementById(‘selected-color-preview’);
const colorCode = document.getElementById(‘color-code’);
const colors = [
[‘#FF0000’, ‘#00FF00’, ‘#0000FF’, ‘#FFFF00’, ‘#FF00FF’, ‘#FFA500’, ‘#A52A2A’, ‘#D2691E’, ‘#DC143C’, ‘#FF7F50’, ‘#8B008B’],
[‘#00FFFF’, ‘#800000’, ‘#008000’, ‘#000080’, ‘#808000’, ‘#4682B4’, ‘#483D8B’, ‘#2F4F4F’, ‘#00CED1’, ‘#9400D3’, ‘#DA70D6’],
[‘#800080’, ‘#008080’, ‘#C0C0C0’, ‘#808080’, ‘#FFFFFF’, ‘#FA8072’, ‘#708090’, ‘#778899’, ‘#B0C4DE’, ‘#ADD8E6’, ‘#E0FFFF’]
];
function createColorBoxes(colors, lineElement) {
const colorBoxContainer = document.createElement(‘div’);
colorBoxContainer.classList.add(‘color-container’);
const leftButton = document.createElement(‘button’);
leftButton.classList.add(‘scroll-button’, ‘left’);
leftButton.textContent = ‘<‘;
leftButton.addEventListener(‘click’, () => scrollLine(-100, colorBoxContainer));
const rightButton = document.createElement(‘button’);
rightButton.classList.add(‘scroll-button’, ‘right’);
rightButton.textContent = ‘>’;
rightButton.addEventListener(‘click’, () => scrollLine(100, colorBoxContainer));
lineElement.appendChild(leftButton);
lineElement.appendChild(colorBoxContainer);
lineElement.appendChild(rightButton);
colors.forEach(color => {
const colorBox = document.createElement(‘div’);
colorBox.classList.add(‘color-box’);
colorBox.style.backgroundColor = color;
colorBox.addEventListener(‘click’, () => {
selectedColorPreview.style.backgroundColor = color;
colorCode.textContent = color;
});
colorBoxContainer.appendChild(colorBox);
});
}
function scrollLine(scrollAmount, colorBoxContainer) {
colorBoxContainer.scrollLeft += scrollAmount;
}
createColorBoxes(colors[0], colorLine1);
createColorBoxes(colors[1], colorLine2);
createColorBoxes(colors[2], colorLine3);
</script>
</body>
</html>