ブラウザ標準でカラーコードの指定ができる<input type="color">
ですが、デフォルトのカラー指定がRGB指定なんですよね。
Value値の指定はHEXなのになんでデフォルトがRGBなんだろう…。というのは置いておいて、HEXコードでの指定の方がユースケースとしては多いので、これをデフォルトでHEXにしたい!と思ったのですが、色々調べたものの、color属性には入力モード設定がオプションに存在しないようでした。
別のinputフィールドを用意して同期することで対応
与件的にはクリック数を減らしてHEXでの入力ができればよい、ということでしたので、別のinputフィールドを用意して、そのValue値をcolorの方と同期することで対応しました。
See the Pen HEX input color by Albedo Japan (@Albedo-Japan) on CodePen.
<input type="color">
では3桁HEXが上手く効かない模様なので、3桁だった場合自動的に補完するようにしています。
これでCMSでの色指定も素早く運用できそうです!