Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Input Color value Property

  • Difficulty Level : Basic
  • Last Updated : 24 Oct, 2019

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 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.






    <!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.




    <!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 return 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
    • Internet Explorer 10.0 +
    • Firefox
    • Opera
    • Safari



    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :