HTML color inputs allow users to select a color using a color picker. They are commonly used in design tools, profile customization, website editors, and applications that let users change backgrounds, text colors, or themes. HTML provides the <input type="color"> element to create a color selection field.

What Is an HTML Color Input?

An HTML color input is a form control that allows users to choose a color visually instead of typing a color code manually. Depending on the browser and device, selecting the field opens a color picker.

For example, a website customization tool can use a color input to let users select their preferred background color.

To understand other form controls, explore HTML Input and HTML Input Types.

HTML Color Input Example

The following example demonstrates how to create a basic color input.

<form>
  <label for="color">Choose a Color:</label>

  <input
    type="color"
    id="color"
    name="color"
    value="#007bff"
  >

  <button type="submit">Submit</button>
</form>

In this example:

• type="color" creates the color picker.
• id="color" identifies the input element.
• name="color" defines the field name in submitted form data.
• value="#007bff" sets the initial color to blue.

The selected color is generally represented as a hexadecimal color value, such as #ff0000 for red.

Important Attributes of HTML Color Input

HTML color inputs support several useful attributes.

• value sets the initial color.
• name identifies the field when the form is submitted.
• id uniquely identifies the input.
• disabled prevents users from changing the color.
• required can require a value before normal form submission.

For example:

<label for="theme-color">Choose Your Theme Color:</label>

<input
  type="color"
  id="theme-color"
  name="theme-color"
  value="#0056b3"
  required
>

This example initializes the color picker with a blue shade.

Learn more about HTML Form Attributes and HTML Form Elements.

Changing a Website’s Background Color

You can combine an HTML color input with JavaScript to change an element’s background color when the user selects a new color.

<label for="background-color">Select Background Color:</label>

<input
  type="color"
  id="background-color"
  value="#ffffff"
>

<div id="preview">
  Preview your selected color
</div>

<script>
  const colorInput = document.getElementById("background-color");
  const preview = document.getElementById("preview");

  colorInput.addEventListener("input", function () {
    preview.style.backgroundColor = colorInput.value;
  });
</script>

<style>
  #preview {
    padding: 30px;
    margin-top: 15px;
    border: 1px solid #ccc;
  }
</style>

When users select a color, JavaScript updates the preview area’s background immediately. This technique is useful for theme editors and simple design applications.

Styling HTML Color Inputs with CSS

CSS can change the size and appearance of a color input.

<style>
  input[type="color"] {
    width: 80px;
    height: 45px;
    padding: 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
  }
</style>

The width and height properties control the input’s dimensions, while border-radius adds rounded corners. The exact appearance of the internal color picker can vary between browsers.

HTML Color Input vs Text Input

A color input provides a visual color picker, while a text input lets users type general text. If users need to enter a color code manually, a text input may be more appropriate, with additional validation to check the format.

For example, a design tool may use a color input for beginners and a text field for advanced users who prefer entering hexadecimal codes directly.

Frequently Asked Questions

What is the default value of an HTML color input?

The default color is generally black (#000000) if no valid initial color is specified.

Can users select any color?

The available choices depend on the browser’s color picker. Modern implementations commonly support selecting colors through a graphical interface.

Can I get the selected color using JavaScript?

Yes. Read the input’s value property to obtain the selected color, commonly as a hexadecimal string.

Can a color input change a website’s theme?

Yes. JavaScript can read the selected color and apply it to CSS properties, such as backgroundColor or color.