Skip to content
Related Articles

Related Articles

HTML | DOM Input Color value Property

Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 24 Aug, 2022
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!