起きたバグ
inputを用いて色の入力フォームを作成していたとき、初期値で指定している色が反映されないというバグが発生しました。
バグが起きたコードを下記に示します。
<input type="color" value="#fff" />
ですが、この初期値は黒色(#000=HTMLのデフォルト値)になってしまっていました。
原因
inputタグのtype="color"では、色の値を"#+16進数6桁"の7文字で管理しています。Figmaなどでは#000000を#000と省略することができますが、inputタグでは認識できないのです。
MDN(MDN Web Docs)では以下のように説明されています。
<input>要素で型がcolorのもののvalueは、常に 16 進表記で RGB カラーを特定する 7 文字の文字列になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。
前述の実装では、白色が認識できずデフォルト値である黒色が反映されたと言えるでしょう。
また、アルファチャネルのある色(透明な色)もサポートされていないため、#000000に設定されるでしょう。
対処法
inputタグで値を指定したい場合は、"#+16進数6桁"の7文字で設定するようにしましょう。前述のコードは下記のように修正することで、初期値が#fffの入力フォームが得られます。
<input type="color" value="#ffffff" />
追記
HTMLのタグやその他の何かを用いていてバグが起こった際には、公式ページや今回引用したMDNなどで仕様技術の詳細を確認すると、バグの発見や深い知識への出会いにつながるのでとてもおすすめです。