javascriptを使ってカラーコードを表示させよう!


色コードを入力すると、色が反映されて、その色コードをRGBに変換させてみました。

以下がコードサンプルになります。

▼JavaScript

window.onload=function(){
var convert = document.getElementById('convert');
var color = document.getElementById('color');
var before = document.getElementById('before');
var beforecode = document.getElementById('before-c');
var after = document.getElementById('after');
var aftercode = document.getElementById('after-c');

convert.addEventListener('click', function() {
    var colorcode = color.value;
    var rgbArr = convert_colorcode_to_rgb(colorcode);
    if(!rgbArr) {
        alert('変換に失敗しました');
        return false;
    }

    if(colorcode.split('')[0] !== '#') {
        colorcode = '#' + colorcode;
    }
    var rgb = 'rgb(' + rgbArr[0] + ', ' + rgbArr[1] + ', ' + rgbArr[2] + ')';
 
    before.style.backgroundColor = colorcode;
    beforecode.innerHTML = colorcode;
    after.style.backgroundColor = rgb;
    aftercode.innerHTML = rgb;
}, false);
function convert_colorcode_to_rgb(colorcode) {

    if(colorcode.split('')[0] === '#') {
        colorcode = colorcode.substring(1);
    }
    if(colorcode.length === 3) {
        var codeArr = colorcode.split('');
        colorcode = codeArr[0] + codeArr[0] + codeArr[1] + codeArr[1] + codeArr[2] + codeArr[2];
    }

    if(colorcode.length !== 6) {
        return false;
    }
    var r = parseInt(colorcode.substring(0, 2), 16);
    var g = parseInt(colorcode.substring(2, 4), 16);
    var b = parseInt(colorcode.substring(4, 6), 16);
    return [r, g, b];
}
};

▼HTML

色コードを入力すると、色が表示されます。

#

変換前:

変換後:

今回、参考にさせていただいたのは、

『Qiita』さんです。
ありがとうございます。

デモページは、こちら