【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](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color)

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


# 例
```html: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);`はRGB`rgb(rr, gg, bb)`で、`console.log(colorPicker.value);`はHEX`#rrggbb`で表示されます。

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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081435/0c0f3710-5dc0-d4b5-6ca1-ca4974f77e1d.png)


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

# rgb(rr, gg, bb)から#rrggbbに変換
javascriptで使うためにRGB`rgb(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/](https://www.delftstack.com/ja/howto/javascript/rgb-to-hex-javascript/)を参考にさせていただきました。


```html: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>
```

```html: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://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color)
https://www.delftstack.com/ja/howto/javascript/rgb-to-hex-javascript/