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
HTML DOM Input Color value Property
The HTML DOM Input Color value property returns or sets the value of an HTML color input field as a hexadecimal color string. This property allows you to programmatically get the currently selected color or change the color picker to display a different color value.
Syntax
Following is the syntax for returning the color value −
inputColorObject.value
Following is the syntax for setting the color value −
inputColorObject.value = "hexColorString"
Return Value
The value property returns a string representing the color in hexadecimal format (e.g., #ff0000 for red). If no color is selected, it returns the default value specified in the HTML or an empty string.
Example − Getting Color Value
Following example demonstrates how to retrieve the current value of a color input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Color Input Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Color Picker Example</h2>
<form>
<label for="colorPicker">Choose a color: </label>
<input type="color" id="colorPicker" name="selectedColor" value="#3498db">
</form>
<button onclick="getColorValue()">Get Selected Color</button>
<p id="result"></p>
<script>
function getColorValue() {
var colorInput = document.getElementById("colorPicker");
var result = document.getElementById("result");
result.innerHTML = "Selected color value: " + colorInput.value;
result.style.color = colorInput.value;
}
</script>
</body>
</html>
The output displays the selected color value in hexadecimal format −
Color Picker: [Blue Color Picker] [Get Selected Color] Selected color value: #3498db (displayed in blue color)
Example − Setting Color Value
Following example shows how to programmatically change the color input value −
<!DOCTYPE html>
<html>
<head>
<title>Set Color Input Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Color Programmatically</h2>
<form>
<label for="myColor">Primary Color: </label>
<input type="color" id="myColor" name="primaryColor" value="#00ff00">
</form>
<button onclick="changeToRed()">Set to Red</button>
<button onclick="changeToBlue()">Set to Blue</button>
<button onclick="showCurrentValue()">Show Current Value</button>
<div id="display" style="margin-top: 10px; padding: 10px; border: 1px solid #ccc;">
Current value: #00ff00
</div>
<script>
var colorInput = document.getElementById("myColor");
var display = document.getElementById("display");
function changeToRed() {
colorInput.value = "#ff0000";
showCurrentValue();
}
function changeToBlue() {
colorInput.value = "#0000ff";
showCurrentValue();
}
function showCurrentValue() {
display.innerHTML = "Current value: " + colorInput.value;
display.style.backgroundColor = colorInput.value;
display.style.color = getContrastColor(colorInput.value);
}
function getContrastColor(hex) {
// Simple contrast calculation
var r = parseInt(hex.slice(1,3), 16);
var g = parseInt(hex.slice(3,5), 16);
var b = parseInt(hex.slice(5,7), 16);
var brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 128 ? "#000000" : "#ffffff";
}
</script>
</body>
</html>
The output shows buttons that change the color picker value and update the display accordingly −
Primary Color: [Green Color Picker] [Set to Red] [Set to Blue] [Show Current Value] Current value: #00ff00 (with green background)
Example − Real-time Color Display
Following example demonstrates real-time color value monitoring using the oninput event −
<!DOCTYPE html>
<html>
<head>
<title>Real-time Color Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Real-time Color Monitor</h2>
<form>
<label for="realTimeColor">Select Color: </label>
<input type="color" id="realTimeColor" value="#ff6b35" oninput="updateDisplay()">
</form>
<div id="colorDisplay" style="width: 200px; height: 100px; border: 2px solid #333; margin: 20px 0; background-color: #ff6b35;"></div>
<div id="colorInfo">
<p><strong>Hex Value:</strong> <span id="hexValue">#ff6b35</span></p>
<p><strong>RGB Values:</strong> <span id="rgbValue">rgb(255, 107, 53)</span></p>
</div>
<script>
function updateDisplay() {
var colorInput = document.getElementById("realTimeColor");
var colorDisplay = document.getElementById("colorDisplay");
var hexValue = document.getElementById("hexValue");
var rgbValue = document.getElementById("rgbValue");
var selectedColor = colorInput.value;
// Update display box
colorDisplay.style.backgroundColor = selectedColor;
// Update hex value
hexValue.textContent = selectedColor;
// Convert hex to RGB
var r = parseInt(selectedColor.slice(1,3), 16);
var g = parseInt(selectedColor.slice(3,5), 16);
var b = parseInt(selectedColor.slice(5,7), 16);
rgbValue.textContent = `rgb(${r}, ${g}, ${b})`;
}
</script>
</body>
</html>
The output updates in real-time as you change the color picker −
Select Color: [Orange Color Picker] [Orange colored rectangle displayed] Hex Value: #ff6b35 RGB Values: rgb(255, 107, 53)
Key Points
The
valueproperty always returns a 7-character hexadecimal string starting with#.Color values are case-insensitive but are typically returned in lowercase.
Invalid color values are ignored, and the input retains its previous valid value.
The default value is
#000000(black) if no initial value is specified.Use the
oninputevent to detect real-time changes to the color picker.
Browser Compatibility
The Input Color value property is supported in all modern browsers that support the HTML5 color input type. Older browsers may display a text input instead of a color picker, but the value property will still work with valid hexadecimal color strings.
Conclusion
The HTML DOM Input Color value property provides a simple way to get and set color values in hexadecimal format. It enables dynamic color manipulation in web applications and forms an essential part of interactive color selection interfaces. Use this property with event handlers to create responsive color-based user experiences.
163 Views
