【HTML】<input="color"> hoge.valueとhoge.style.colorのカラー形式(RGB/HEX変換)

Qiita初投稿です。
HTMLでの<input="color">の値の取得で詰まったのでまとめました。備忘録です。

<input="color">について

こちら見てもらえるとわかりやすいと思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color

hoge.value値を取得するときは#rrggbbの形で、
hoge.style.colorのときはrgb(rr, gg, bb)に変更されます。

例

colorpicker.html

<input type="color" id="colorpicker">
<p>ここの色が変わります</p>
<script>
     const p = document.querySelector("p");
     const colorPicker = document.getElementById("colorpicker");
     colorPicker.addEventListener("input", input_color, false);//色を指定すると実行

     function input_color(){
        p.style.color = colorPicker.value;
        console.log(p.style.color);//結果:rgb(rr, gg, bb)                
        console.log(colorPicker.value);//結果:#rrggbb
        console.log(typeof(p.style.color));//結果:string
        //colorPicker.value=p.style.color;//警告が出ます        
     };    
</script>

p.style.color = colorPicker.value;と代入していますが、console.log(p.style.color);はRGBrgb(rr, gg, bb)で、console.log(colorPicker.value);はHEX#rrggbbで表示されます。

一番下のcolorPicker.value=p.style.color;の部分ですが、
p.style.colorのrgb(rr, gg, bb)のまま代入すると警告が出ます。
javascriptでは#rrggbbで色を指定する必要があります。

また、rgb(rr, gg, bb)の場合、「rgb(rr, gg, bb)」全体の型がstringになります。

rgb(rr, gg, bb)から#rrggbbに変換

javascriptで使うためにRGBrgb(rr, gg, bb)からHEX#rrggbbへ変換します。
stringである「rgb(rr, gg, bb)」からrr,gg,bbの値の部分を抽出してから#rrggbbにします。
今回は「rgb(rr, gg, bb)」の( と , と , と )の位置からrr,gg,bbの値を取り出しました。
関数はhttps://www.delftstack.com/ja/howto/javascript/rgb-to-hex-javascript/を参考にさせていただきました。

function.html

<script>
//関数
    function rgb_10_to_16(color){//16進数に変換する関数
        //文字列を数値に変換してから16進数に変換
        let color_16=parseInt(color).toString(16);
        if(color_16.length==1){//もし1桁なら上に0をつける01とか0eみたいに
        color_16="0"+color_16;
        };
        return color_16;
    };
    
    function rgb_to_hex(red, green,blue){//HEX#rrggbbの形にする関数
        return "#" + rgb_10_to_16(red)+rgb_10_to_16(green)+rgb_10_to_16(blue);
    };
</script>

index.html

<script>
    let color_rgb10 = p.style.backgroundColor;
    const paren_1 = "(";
    const comma = ",";
    const paren_2 = ")";
    //indexOfは最初に出てきた場所を返す.lastIndexOfは最後に出てきた場所を返す.
    //最初のかっこの場所
    let result_paren_1 = this.style.backgroundColor.indexOf(paren_1);
    //最初のコンマの場所
    let result_comma_1 = this.style.backgroundColor.indexOf(comma);
    //2つ目のコンマの場所 
    let result_comma_2 = this.style.backgroundColor.lastIndexOf(comma);
    //最後のかっこの場所
    let result_paren_2 = this.style.backgroundColor.indexOf(paren_2);

    //rgb(rr,gg,bb)のrrを取り出す     
    let rgb_r=color_rgb10.substr(result_paren_1+1,result_comma_1-(result_paren_1+1));
    //rgb(rr,gg,bb)のggを取り出す コンマの後の空白は除く
    let rgb_g=color_rgb10.substr(result_comma_1+2,result_comma_2-(result_comma_1+2));
    //rgb(rr,gg,bb)のbbを取り出す コンマの後の空白は除く   
    let rgb_b=color_rgb10.substr(result_comma_2+2,result_paren_2-(result_comma_2+2));
    
    rgb_to_hex(rgb_r, rgb_g,rgb_b);
</script>

もっと簡単なやり方があると思いますが...

おわりに

例えば、クリックしたところの背景の色を<input="color">のvalueに入れるときなどはこの方法でできると思います。

最後までお読みいただきありがとうございました。

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color
https://www.delftstack.com/ja/howto/javascript/rgb-to-hex-javascript/