Open In App

HTML | DOM Input Color value Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Input Color value Property in HTML DOM is used to set or return the value of the value attribute of a color picker. 

The value attribute is used to specify the color for the color picker. It’s default value is #000000 (black color). Syntax

  • It returns the value property.
colorObject.value
  • It is used to set the value property.
colorObject.value = #hexvalue

Property Values: It contains a value i.e #hexvalue which specifies the color for the color picker. 

The value should be a hexadecimal : 3 double digit number start from # sign . For eg-Hex value of a black color is #000000. 

Return Value: It returns a string value which represents the color for the colorpicker. 

Example-1: This Example illustrates how to return the Property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Color value Property
    </title>
</head>
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2>
        HTML DOM Input Color value Property
    </h2>
    <p>
        Select your favorite color:
        <input type = "color" value = "#009900"
            id = "color">
    </p>
    <button onclick = "myGeeks()">
        Click Here!
    </button>
    <p id = "GFG"></p>
     
    <!-- script to return the input color -->
    <script>
        function myGeeks() {
            var x = document.getElementById("color").value;
            document.getElementById("GFG").innerHTML = x;
        }
    </script>
</body>
</html>


Output: 

Before Clicking On Button:

  

After Clicking On Button:

  

Example-2: This Example illustrates how to set the Property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Color value Property
    </title>
</head>
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <h2>
        HTML DOM Input Color value Property
    </h2>
    <p>
        Select your favorite color:
        <input type = "color" value = "#009900"
            id = "color">
    </p>
    <button onclick = "myGeeks()">
        Click Here!
    </button>
    <p id = "GFG" style="font-size:20px;color:green;"></p>
     
    <!-- script to change the input color -->
    <script>
        function myGeeks() {
            var x = document.getElementById("color").value = "#FF8040";
            document.getElementById("GFG").innerHTML =
               "The value was changed to " + x;
        }
    </script>
</body>
</html>


Output: 

Before Clicking On Button:

  

After Clicking On Button:

  

Supported Browsers: The browser supported by DOM input color value property listed below:

  • Google Chrome 20
  • Edge 14
  • Firefox 29
  • Opera 12
  • Safari 12.1


Last Updated : 24 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads