How to Set a Default Value on "color" input HTML Element?

To set a default value on HTML <input type="color" /> element, you need to make sure it's in the correct format — i.e. "#rrggbb" — a 6-character hexadecimal string in uppercase or lowercase prefixed with "#".

When no default value is set (or an invalid value is set), it defaults to "#000000".

For example, you could set the default color of the color picker input to "#e5e5e5" in the following way:

<input type="color" value="#e5e5e5" />

Although, you can add the value in both, uppercase and lowercase, it's always stored in lowercase. This means that when the value is submitted to the server, or used programmatically, it will be in lowercase. To demonstrate this, consider, for example, the following HTML <input type="color" /> element with an uppercase hexadecimal value:

<input id="color-picker" type="color" value="#E5E5E5" />

When you access the input's value, in JavaScript for example, it will be in lowercase:

const colorPicker = document.getElementById('color-picker');
console.log(colorPicker.value); // '#e5e5e5'

Please note that the presentation of the <input type="color" /> element may vary based on user's browser/OS.