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
How to use input type field with the color picker in HTML?
The color input type in HTML provides a user-friendly way to select colors through a built-in color picker interface. The <input type="color"> element displays a clickable color swatch that opens a color picker dialog when activated.
When a user clicks on the color input field, the browser displays a native color picker interface. The selected color value is stored as a seven-character hexadecimal string (e.g., #ff0000 for red). You can set a default color using the value attribute with a valid hexadecimal color code.
Syntax
Following is the syntax to use input type field with color picker in HTML −
<input type="color" name="colorName" value="#hexcode">
Parameters
The color input type supports the following key attributes −
type="color" − Specifies the input type as color picker
value − Sets the default color in hexadecimal format (e.g., #ff0000)
name − Defines the name for form submission
id − Unique identifier for the element
disabled − Disables the color picker
Basic Color Picker Example
Following example demonstrates a simple color picker with a default red color −
<!DOCTYPE html>
<html>
<head>
<title>Color Picker Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<label for="onecolor">Select color:</label>
<input type="color" id="onecolor" name="onecolor" value="#ff0000"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The output displays a red color picker that opens a color selection dialog when clicked −
Select color: [Red Color Box] [Submit]
Styled Color Picker Example
Following example shows how to customize the appearance of a color picker using CSS −
<!DOCTYPE html>
<html>
<head>
<title>Styled Color Picker</title>
<style>
.color-container {
text-align: center;
padding: 30px;
}
input[type=color] {
width: 80px;
height: 40px;
padding: 5px;
margin: 10px;
border: 2px solid #4CAF50;
border-radius: 8px;
cursor: pointer;
}
label {
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="color-container">
<h2>Choose Your Favorite Color</h2>
<form>
<label for="favcolor">Select your favorite color:</label><br>
<input type="color" id="favcolor" name="favcolor" value="#4CAF50"><br><br>
<input type="submit" value="Apply Color">
</form>
</div>
</body>
</html>
The styled color picker appears larger with a green border and rounded corners −
Choose Your Favorite Color Select your favorite color: [Styled Green Color Box] [Apply Color]
Interactive Color Preview
Following example demonstrates how to display the selected color value and preview it dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Interactive Color Preview</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Color Picker with Live Preview</h2>
<form>
<label for="colorPicker">Choose a color:</label>
<input type="color" id="colorPicker" name="selectedColor" value="#3498db" onchange="updatePreview()">
<br><br>
<p>Selected Color: <span id="colorValue">#3498db</span></p>
<div id="colorPreview" style="width: 200px; height: 100px; background-color: #3498db; border: 1px solid #ccc; margin-top: 10px;"></div>
</form>
<script>
function updatePreview() {
var colorInput = document.getElementById("colorPicker");
var selectedColor = colorInput.value;
document.getElementById("colorValue").textContent = selectedColor;
document.getElementById("colorPreview").style.backgroundColor = selectedColor;
}
</script>
</body>
</html>
When users select a color, both the hex value and preview box update automatically −
Color Picker with Live Preview Choose a color: [Blue Color Box] Selected Color: #3498db [Blue Preview Rectangle]
Multiple Color Selection
Following example demonstrates how to create multiple color pickers for different purposes −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Color Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Website Color Scheme Selection</h2>
<form>
<div style="margin-bottom: 15px;">
<label for="bgColor">Background Color:</label>
<input type="color" id="bgColor" name="backgroundColor" value="#ffffff">
</div>
<div style="margin-bottom: 15px;">
<label for="textColor">Text Color:</label>
<input type="color" id="textColor" name="textColor" value="#333333">
</div>
<div style="margin-bottom: 15px;">
<label for="accentColor">Accent Color:</label>
<input type="color" id="accentColor" name="accentColor" value="#007bff">
</div>
<input type="submit" value="Apply Color Scheme" style="padding: 8px 16px;">
</form>
</body>
</html>
This creates three separate color pickers for different design elements −
Website Color Scheme Selection Background Color: [White Color Box] Text Color: [Dark Gray Color Box] Accent Color: [Blue Color Box] [Apply Color Scheme]
Browser Compatibility
The input type="color" has good browser support in modern browsers. However, some limitations exist −
| Browser | Support Status | Notes |
|---|---|---|
| Chrome | Full Support | Version 20+ |
| Firefox | Full Support | Version 29+ |
| Safari | Partial Support | Version 12.1+ (limited on iOS) |
| Edge | Full Support | Version 14+ |
| Internet Explorer | No Support | Displays as text input |
Note: In unsupported browsers, the color input falls back to a regular text input field where users can manually enter hex color codes.
Conclusion
The <input type="color"> provides an easy way to implement color selection in web forms. It displays a native color picker interface, returns hex color values, and can be styled with CSS. While browser support is excellent in modern browsers, consider providing fallback options for older browsers.
2K+ Views
