Skip to main content

HTML input type="color"

HTML <input type="color"> is an input element that allows users to select a color value. It is used to create a color picker in a web form.

To use the <input type="color"> element, you need to include the type attribute with the value "color" in the <input> element. You can also specify an initial color value using the value attribute.

This type of input has many uses, ranging from creating custom text formatting tools to designing more effective user interfaces.

Here's an example of how to use the <input type="color"> element in an HTML form:

<form>
 <label for="favorite-color">Select your favorite color:</label><br>
 <input type="color" id="favorite-color" name="favorite-color" value="#e44d26"><br>
 <input type="submit" value="Submit">
</form>


The above code will create a color picker with the default color set to dark orange (#e44d26). When the user selects a different color, the value of the <input> element will be updated to the selected color.

You can also use JavaScript to retrieve the selected color value and use it in your code. For example, you can use the value property of the <input> element to get the selected color value:

var colorInput = document.getElementById("favorite-color");
var selectedColor = colorInput.value;

The HTML input type color is made up of three parts: the color palette, the color picker, and the color swatch.

  • The color palette is a set of colors that can be selected from.
  • The color picker is used to select one of the colors from the palette.
  • The color swatch is a visual representation of the selected color.

Some more examples:

<input type="color" name="favcolor" />
<input type="color" id="color_input" />
<input type="color" value="#ff0000" />
<input type="color" onchange="updateColor(this.value)" />
<input type="color" class="form-input" />