Can I change the default input format of the HTML color input in Chrome?

user_1395204 0
Viewed 3178

In Chrome 83, the color picker that appears upon clicking a <input type="color"> widget defaults to RGB input:

Chrome color picker using RGB input

The input format can be changed to HSL or HEX by clicking the two little arrows to the right of the letter "B".

Is there a way that I can change the default input format from RGB to HEX, or to only allow HEX input? HTML/CSS/JS would be ideal, but I'd be curious if there's even a Chrome setting to adjust this.

google-chrome html
1 Answers

No, it is not possible (as of December 2020). You could implement and provide a color picker with JavaScript.

Each browser (or OS combination) will show a default color picker or the OS's color picker.

https://collectiveidea.com/blog/archives/2011/09/14/hsl-color-selector-using-html5-and-css shows a different approach: a range slider with a gradient as background. It does not work in all browsers, but it might fit your requirements.

.spectrum {
  display: block;
  width: 150px;
  height: 15px;
  margin: 0 0 -3px 7px;
  background: -webkit-linear-gradient(left, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%) 100%);
}

input[type=range] {
  width: 161px;
  margin-top: -5px;
}
<span class="spectrum"></span>
<input type="range" min="0" max="300" step="1">

user_1129680
Related