Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Create a Color Picker using HTML, CSS, and JavaScript?
We can easily create a simple color picker on a palette in JavaScript. The primary colors on a color picker are RGB i.e. Red, Green, and Blue. With the help of mixing these colors, we can form any color we want.
In this article, we will be learning about how to get the RGB value from the user and form different colors with the help of CSS using the RGB color properties. The color intensity of RGB ranges from 0 to 255 where 0 is the least intensity and 255 is the highest intensity.
When the intensity of all the 3 colors is 255 it forms a white color. Black color is formed when the intensity is 0 for all 3.
Understanding RGB Color Model
Creating the Color Picker
In the example below, we create a color picker with the help of basic HTML, CSS, and JavaScript.
index.html
<!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>Color Picker</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
</head>
<body>
<h1 style="color: green; text-align: center;">
Welcome To Tutorials Point
</h1>
<div class="container">
<div class="color-display"></div>
<div class="input-group">
<label for="red">Red (0-255):</label>
<input type="number" id="red" min="0" max="255" value="0">
<label for="green">Green (0-255):</label>
<input type="number" id="green" min="0" max="255" value="0">
<label for="blue">Blue (0-255):</label>
<input type="number" id="blue" min="0" max="255" value="0">
</div>
<div class="color-info">
<p id="rgb-value">RGB(0, 0, 0)</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
body {
font-family: 'Itim', cursive;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.color-display {
width: 100%;
height: 300px;
border: 3px solid #ddd;
border-radius: 10px;
background-color: rgb(0, 0, 0);
margin-bottom: 30px;
transition: background-color 0.3s ease;
box-shadow: inset 0 2px 10px rgba(0,0,0,0.1);
}
.input-group {
display: flex;
flex-direction: column;
gap: 15px;
}
.input-group label {
font-size: 16px;
font-weight: bold;
color: #333;
}
.input-group input {
padding: 10px;
font-size: 18px;
border: 2px solid #ddd;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: #4CAF50;
}
#red {
border-left: 5px solid #f44336;
}
#green {
border-left: 5px solid #4CAF50;
}
#blue {
border-left: 5px solid #2196F3;
}
.color-info {
text-align: center;
margin-top: 20px;
}
#rgb-value {
font-size: 20px;
font-weight: bold;
color: #333;
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
}
script.js
// Get DOM elements
const redInput = document.getElementById('red');
const greenInput = document.getElementById('green');
const blueInput = document.getElementById('blue');
const colorDisplay = document.querySelector('.color-display');
const rgbValue = document.getElementById('rgb-value');
// Initialize color values
let r = 0, g = 0, b = 0;
// Function to update color display
function updateColor() {
const rgbColor = `rgb(${r}, ${g}, ${b})`;
colorDisplay.style.backgroundColor = rgbColor;
rgbValue.textContent = `RGB(${r}, ${g}, ${b})`;
}
// Function to validate RGB value
function validateRGB(value) {
if (value === '' || isNaN(value)) return 0;
return Math.min(Math.max(parseInt(value), 0), 255);
}
// Red input event listener
redInput.addEventListener('input', function() {
r = validateRGB(this.value);
this.value = r; // Update input with validated value
updateColor();
});
// Green input event listener
greenInput.addEventListener('input', function() {
g = validateRGB(this.value);
this.value = g; // Update input with validated value
updateColor();
});
// Blue input event listener
blueInput.addEventListener('input', function() {
b = validateRGB(this.value);
this.value = b; // Update input with validated value
updateColor();
});
// Initialize with default color
updateColor();
How It Works
The color picker works by:
- HTML Structure: Creates input fields for RGB values and a display area for the resulting color
- CSS Styling: Provides visual styling with smooth transitions and modern design
- JavaScript Logic: Listens for input changes, validates RGB values (0-255), and updates the color display in real-time
- Validation: Ensures input values stay within the valid RGB range of 0-255
Key Features
| Feature | Description | Benefit |
|---|---|---|
| Real-time Updates | Color changes as you type | Immediate visual feedback |
| Input Validation | Restricts values to 0-255 | Prevents invalid colors |
| RGB Display | Shows current RGB values | Easy color identification |
Common RGB Color Examples
- Black: RGB(0, 0, 0) - No light from any color
- White: RGB(255, 255, 255) - Maximum light from all colors
- Red: RGB(255, 0, 0) - Pure red
- Green: RGB(0, 255, 0) - Pure green
- Blue: RGB(0, 0, 255) - Pure blue
- Yellow: RGB(255, 255, 0) - Red + Green
- Purple: RGB(128, 0, 128) - Red + Blue with medium intensity
Conclusion
This color picker demonstrates how HTML, CSS, and JavaScript work together to create interactive web applications. The RGB color model provides precise control over colors by mixing red, green, and blue values from 0 to 255, making it perfect for web development and design projects.
Updated on: 2026-03-15T23:19:00+05:30
2K+ Views
Advertisements